Смена иконки через javascript

165

14 ноября 2019, 02:40

Есть 2 иконки play/pause, при нажатии на play должна появляться pause, но в момент когда появляется pause иконка play не исчезает и получается наложение одной иконки на другую. Как это исправить?

let playIcon = "https://image.flaticon.com/icons/svg/149/149668.svg"; 
let pauseIcon = "https://image.flaticon.com/icons/svg/149/149670.svg"; 
 
function togglePlay(video) { 
  var audio = document.getElementsByTagName("audio")[0]; 
  if (!audio) 
    return; 
  audio.paused ? audio.play() : audio.pause(); 
  document.getElementById("button").src = audio.paused ? playIcon : pauseIcon; 
}

@media (max-width: 479px) { 
   img { 
      display: none;  
   }  
}    
#button { 
  width: 50px; 
  display: block;  
}

<div class="player" onclick="togglePlay(this)"> 
  <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button"> 
  <audio> 
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" /> 
    </audio> 
  </div>