<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');   
    }
  })
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.