0

クリックするとオーディオファイルが再生され、もう一度クリックすると配列内の次のファイルが再生されるボタンを作成しようとしています。再生できますが、2回目にクリックすると、最初のファイルと2番目のファイルの両方が再生されます。3回目に押すと、1回目、2回目、3回目が再生されます。ページの最初の 2 つのトラックをクリアするには、何かをリセットする必要があるようです。ここに私が持っているものがあります:

    <!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 に答える