Home/ Questions/Q 8079687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T16:11:14+00:00

I’m trying to create a button which when clicked plays an audio file and

  • 0

I’m trying to create a button which when clicked plays an audio file and then when it’s clicked again plays the next file in my array. I get it to play but when I click it the second time it plays both the first file AND the second. When I press it the third time it plays the first, second and third. Seems like I need to reset something or other to clear the first two tracks of the page. Here is what I have:

    <!DOCTYPE HTML>
    <html>
    <head>
    </head>
    <body>

    <script language="javascript" type="text/javascript">

        audio = new Array('audio1.mp3','audio2.mp3','audio3.mp3');
        index = 0;

        function playSound() {
        if(index<3){
        document.getElementById("start").innerHTML=document.getElementById("start").innerHTML +
        "<embed src=\""+audio[index]+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
        index++;
        }
        else{ index = 0;
        document.getElementById("start").innerHTML=document.getElementById("start").innerHTML +
        "<embed src=\""+audio[index]+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
        index++;
        }



    }

     </script>

                <button id="start" type = "button" onclick="playSound();">Start</button>

    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    function playSound() {
    if(index>=3){
         index = 0;
    }
    document.getElementById("sound").innerHTML=
    "<embed src=\""+audio[index]+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    index++;
}

    And add a div (which u can make hidden as well with css), I thinks that’s a better way than adding the html to the button.

    <button id="start" type = "button" onclick="playSound();">Start</button>
<div id="sound" style="display:none"></div>
    • 0