Html&Javascript 音频播放和停止按钮

Question

<!DOCTYPE html> 
<html> 
<body> 

<img id="myImage" onclick="aud_play_pause()" src="../../images/off.png" alt=""/>

<audio id="myAudio">
</audio>

<script>
    function aud_play_pause()
    {
        var song = ["../Sesler/3.mp3"];
        var myAudio = document.getElementById("myAudio");
        var image = document.getElementById('myImage');
        myAudio.src = song;
        if (myAudio.paused)
        {
            image.src = "../../images/on.png";
            myAudio.play();
        }
        else if(image.src.match("on"))
        {
            image.src = "../../images/off.png";
            myAudio.pause();
        }
    }
</script>

</body> 
</html>

嗨，

我不明白为什么它不起作用。它应该在我单击时开始（它开始）并且它应该在我再次单击时停止（它没有）。我认为 "else if" 语句不起作用，但为什么呢？

谢谢，

H.卡格拉

Answer 1

你每次设置音频的src，用户点击按钮。然后它在加载后直接启动。将它移到函数之外，不要使用数组 [...]，而只使用字符串：

 myAudio.src = "../Sesler/3.mp3";

然后，else（没有其他条件）应该足以区分播放和暂停：

if (myAudio.paused) {
    image.src = "../../images/on.png";
    myAudio.play();
} else {
    image.src = "../../images/off.png";
    myAudio.pause();
}

Html&Javascript 音频播放和停止按钮

Html&Javascript Audio Play&Stop Button

html

javascript

audio

button

pause