<button class="btn-audio" onclick="playVoice('오디오 경로')">▶</button>
<button class="btn-audio" onclick="playVoice('오디오 경로')">▶</button>
.icon_voice.play{
background : skyblue;
}
let track = new Audio();
let flag = 0;
const playVoice = (audioSrc) =>{
track.src = audioSrc;
console.log(track.paused)
if(flag === 0){
flag = 1;
playAudio();
}else{
flag = 0;
stopAudio()
}
}
const playAudio = () => {
track.play();
track.paused = false
iconAnimation("play");
}
const stopAudio = () => {
track.pause();
track.currentTime = 0;
iconAnimation("stop");
}
track.addEventListener('ended', function() {
iconAnimation();
});
const iconVoice = document.querySelectorAll('.btn-audio');
const iconAnimation = (status) =>{
iconVoice.forEach(function(btn){
if(status === "play"){
btn.classList.add('play');
}else{
btn.classList.remove('play');
}
})
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.