Search code examples
javascripthtmlbuttonaudiopause

Html&Javascript Audio Play&Stop Button

<!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>

Hi,

I couldn't understand why it doesn't work. It is suppose to start when I click (it starts) and it is suppose to pouse when I click again (it doesn't). I think the "else if" statement doesn't work but why?

Thanks,

H. Caglar

Solution

  • You set the audio's src every time, the user click on the button. It then starts directly after loading. Move it outside of the function and don't use an array [...], but only a string:

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

    Then, an else (without another condition) should be sufficient to distinguish between playing and pausing:

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