0

我正在尝试创建一个按钮，单击该按钮会播放音频文件，然后再次单击该按钮会播放数组中的下一个文件。我让它播放，但是当我第二次点击它时，它会播放第一个文件和第二个文件。当我第三次按下它时，它会播放第一，第二和第三。似乎我需要重置某些内容或其他内容以清除页面的前两个轨道。这是我所拥有的：

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

2 回答 2

1

你不断地添加越来越多的<embed>元素，从不删除任何一个。

与其将它们附加到按钮上，不如将它们附加到容器中，然后在添加另一个容器之前将其删除。

于 2012-06-14T18:38:32.757 回答
1 
function playSound() {
    if(index>=3){
         index = 0;
    }
    document.getElementById("sound").innerHTML=
    "<embed src=\""+audio[index]+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    index++;
}

并添加一个 div（您也可以使用 css 将其隐藏），我认为这比将 html 添加到按钮更好。

<button id="start" type = "button" onclick="playSound();">Start</button>
<div id="sound" style="display:none"></div>
于 2012-06-14T18:41:44.797 回答