Question

我的自定义HTML MP3播放器出现了一个小问题。播放器完成歌曲后，暂停按钮仍然存在，虽然应该有播放按钮，因此您可以通过单击再次播放该歌曲。

这是我的代码：

<!doctype html>
<html>

<head>

  <script type="text/javascript">
    function play() {
      document.getElementById("player").play();
      document.getElementById("pausebutton").style.display = "";
      document.getElementById("playbutton").style.display = "none";
    }

    function pause() {
      document.getElementById("player").pause();
      document.getElementById("playbutton").style.display = "";
      document.getElementById("pausebutton").style.display = "none";
    }
  </script>

</head>

<body onload="play()">

  <audio id="player">
    			<source src="test.mp3" type="audio/mpeg"></source>

    		</audio>
  <img src="play.png" onclick="play()" id="playbutton" style="display: none" />
  <img src="pause.png" onclick="pause()" id="pausebutton" />

</body>

</html>

Answer 1

您可以尝试在脚本标记中添加以下内容：

window.onload = function () {
    var player = document.getElementById("player");
    if (player) {
        player.onended = function () {
            pause();
            player.currentTime = 0;
        };
    }
};

歌曲自动切换为从暂停到播放按钮

1 个答案: