播放音频后重置按钮文本答案

【问题标题】：Reset button text after audio plays播放音频后重置按钮文本
【发布时间】：2018-07-14 19:51:30
【问题描述】：

当您单击带有“PLAY VOICE AUDIO”文本的playAudio 时，我有一个播放音频文件的按钮，文本更改为“PAUSE VOICE”。如果您在播放时再次单击playAudio，它会暂停（现在带有文本“PAUSE VOICE”）。

音频文件播放完毕后，我希望按钮文本返回到“PLAY VOICE AUDIO”。

提前感谢您的帮助！

<div class="center">
    <button id="playAudio">PLAY VOICE AUDIO</button>
</div>

<audio id="testAudio" hidden src="testaudioagainmp3.mp3" type="audio/mpeg"></audio>    


<!-- Play/pause audio script -->
<script>
document.getElementById("playAudio").addEventListener("click", function() {
    var audio = document.getElementById('testAudio');
    if(this.className == 'is-playing') {
        this.className = "";
        this.innerHTML = "PLAY VOICE AUDIO"
        audio.pause();
    } else {
        this.className = "is-playing";
        this.innerHTML = "PAUSE VOICE";
        audio.play();
    }
});
</script>

【问题讨论】：

标签： javascript audio mp3 innerhtml playback

【解决方案1】：

var audio = document.getElementById('testAudio');
var btn = document.getElementById("playAudio");
audio.addEventListener('ended', function() {
 btn.innerHTML = "PLAY VOICE AUDIO";
 btn.className = "";
});

【讨论】：

【解决方案2】：

您目前只有一个事件侦听器，用于点击您的按钮 playAudio。当audio 结束播放时，您需要第二个事件监听器。在这种情况下，它只是 ended 事件，您需要使用 addEventListener 将其附加到您的 audio 变量。

下面是我要使用的代码。

// This part is just a refactored version of your current code.
var audio = document.getElementById('testAudio');
var playButton = document.getElementById('playAudio');
playButton.addEventListener('click', function() {
    if(this.className == 'is-playing') {
        this.className = "";
        this.innerHTML = "PLAY VOICE AUDIO"
        audio.pause();
    } else {
        this.className = "is-playing";
        this.innerHTML = "PAUSE VOICE";
        audio.play();
    }
});

// This runs when the audio ends and will change the `playButton`'s text to be "PLAY VOICE AUDIO"
audio.addEventListener('ended', function() {
    playButton.innerHTML = 'PLAY VOICE AUDIO';
    playButton.className = '';
}

我还建议学习一些 ES6（最新的 JavaScript 版本），但我保留了代码。

【讨论】：