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

【问题标题】：How to custom Play/Pause image For HTML5 Audio Using JavaScript如何使用 JavaScript 自定义 HTML5 音频的播放/暂停图像
【发布时间】：2019-11-26 18:50:57
【问题描述】：

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

单击“按钮播放”后，更改为“按钮暂停” 一旦我点击了“按钮暂停”，就会更改为“按钮播放”。

我想自定义音频标签，但不知道怎么做。

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

我试图找到一种方法，但我不明白。 T-T

以下是我在 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>

非常感谢

【问题讨论】：

标签： javascript html html5-audio

【解决方案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>

【讨论】：

我会试试这个。非常感谢你