音频完成后，再次显示播放按钮？

Question

我是一个真正高兴的哈哈，不能自己解决这个问题。

当我加载页面时，它会显示播放按钮。我点击播放（音乐开始播放），只要我想暂停音乐，就会显示暂停按钮。

但是当音乐播放结束时，它会一直显示暂停按钮。

问题;如何在音乐播放完毕后如何恢复播放按钮？

var audio, playbtn, mutebtn, seek_bar;
function initAudioPlayer(){
	audio = new Audio();
	audio.src = "./audio/D.mp3";
	audio.loop = false;
	// Set object references
	playbtn = document.getElementById("playpausebtn");
	// Add Event Handling
	playbtn.addEventListener("click",playPause);
	// Functions
	function playPause(){
		if(audio.paused){
		    audio.play();
		    playbtn.style.background = "url(./images/pause.png) no-repeat";
	    } else {
		    audio.pause();
		    playbtn.style.background = "url(./images/play.png) no-repeat";
	    }
	}
}
window.addEventListener("load", initAudioPlayer);

	<button id="playpausebtn"></button>

Answer 1

您需要为ended事件添加一个事件侦听器，并在其中运行您想要的逻辑。

  

播放或流式传输停止时会触发已结束事件   因为已达到媒体的结尾或因为没有其他数据   可用。

有关此活动的更多信息here。

audio.addEventListener("ended", function(){
     // show play button
});