播放音频后重置按钮文本

Posted 2023-02-25

【中文标题】播放音频后重置按钮文本

【英文标题】：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>  

【参考方案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 版本），但我保留了代码。