如何使用JavaScript为HTML5音频自定义播放/暂停图像

Question

我怎样才能做到这一点？ 例如.....

单击“按钮播放”后，更改为“按钮暂停”，单击“按钮暂停”后，更改为“按钮播放”。

我想自定义音频标签，但我不知道如何制作。

我不知道如何使用Javascript切换图片。

我试图找到一种方法，但是我不明白。 TT

以下是我在html模板中使用的内容：

    <button><img src="{% static "img/play.png" %}"></button>
    <button><img src="{% static "img/pause.png" %}"></button>
    <audio controls>
        <source src="{{ song.song_file.url }}" type="audio/mp3">
    </audio>

非常感谢

Answer 1

  var track = document.getElementById('track'); var controlBtn = document.getElementById('play-pause'); function playPause() { if (track.paused) { track.play(); //controlBtn.textContent = "Pause"; controlBtn.className = "pause"; } else { track.pause(); //controlBtn.textContent = "Play"; controlBtn.className = "play"; } } controlBtn.addEventListener("click", playPause); track.addEventListener("ended", function() { controlBtn.className = "play"; }); 

  #player-container #play-pause { cursor: pointer; text-indent: -999999px; height:40px; width: 40px; background: #eb01a5; background-image: url('http://basichow.com/asserts/images/play.png'); background-repeat:no-repeat; background-position:center; background-size:20px; } .play { background-image: url('http://basichow.com/asserts/images/play.png'); } .pause { background-image: url('http://basichow.com/asserts/images/pause.png')!important; } 

  <audio id="track"> <source src="http://basichow.com/asserts/interlude.mp3" type="audio/mpeg" /> </audio> <div id="player-container"> <div id="play-pause" class="play">Play</div> </div>