1

残念ながら、私は html に完全に慣れていないので、質問に答えていただければ幸いです。

Web ページに 3 つのオーディオ ファイルを実装しようとしていますが、ソース ファイルの 1 つしか再生されません。他のファイルのボタンは機能しますが、1 つのソースからしか再生されません。手伝って頂けますか？

コードは次のとおりです。

<div class="sound1">
        <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

                <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="svartbakur-4.mp3" type="audio/mpeg" />
                </audio> 
                </div>

                <script type="text/javascript"> 
                var myAudio=document.getElementById("Sound"); 

                function playPause()
                { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
                }

                </script>

                </div>

                </div><!--Div hyphenate-->


<div class="sound2">
                <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
                <button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

            <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="likka-6.mp3" type="audio/mpeg" />
            </audio> 
        </div>

        <script type="text/javascript"> 
            var myAudio=document.getElementById("Sound"); 

            function playPause()
            { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
            }

            </script>

    </div>

    </div><!--Div hyphenate-->


<div class="sound3">
        <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent;
                ; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 

                <audio id="Sound">
                <source src="" type="audio/wav" />
                <source src="" type="audio/ogg" />
                <source src="fiskimasi-21.mp3" type="audio/mpeg" />
                </audio> 
                </div>

                <script type="text/javascript"> 
                var myAudio=document.getElementById("Sound"); 

                function playPause()
                { 
                if (myAudio.paused) 
                myAudio.play(); 
                else 
                myAudio.pause(); 
                }

                </script>

                </div>

                </div><!--Div hyphenate-->

どうもありがとう！

4

4 に答える 4

0

テストしたところ、問題はオーディオ ファイルの再生に使用している JavaScript コードに関連していることがわかりました。また、オーディオ タグを 1 つのタグとして定義する方法がすべての mp3 ファイルにバインドされていることがわかりました。

<div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
   <audio id="Soundx1">
     <source  src="XXXXXX.mp3" type="audio/mp3">
       </audio> 
     <button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent; "margin-top:0px; margin-left:0px;" onclick="playPause();" ></button> 
     </div>
     <script type="text/javascript"> 
        var myAudio1=document.getElementById("Soundx1"); 
        function playPause()
        { 
            if (myAudio1.paused) 
            myAudio1.play(); 
            else 
            myAudio1.pause(); 
        }
    </script>
</div>

だから私が変更したもの：

  1. オーディオ ID =各オーディオ ファイルに一意
  2. var myAudioXX=document.getElementById("_unique_id_"); としての各オーディオ ID の一意の JavaScript オブジェクト。

このコードは、複数の mp3 ファイルで機能します。また、各ファイルを再生する各関数ではなく、単一の JavaScript 関数を使用してすべてのファイルを再生する必要があります。単一の JavaScript 関数を使用してすべてのファイルを再生する場合は、ID タグをオブジェクト参照で渡すことができ、それはコードになります。

于 2012-06-22T17:06:44.560 に答える
0

同じ ID を持つ要素が複数あります。playPause()また、毎回関数を再定義しています。一般的に、あなたは自分が何をしているのかわからないようです。

controlsタグに属性を追加するだけの方がよいでしょうaudio。

于 2012-06-22T16:30:55.273 に答える
0

プレーヤーは ID "Sound" を探しています。

getElementById("Sound");

3<audio id="Sound">秒あります

など<audio id="Sound1">に変更してみてください<audio id="Sound2">

新しいオーディオ ID を反映するには、プレーヤーを更新する必要があります。

于 2012-06-22T16:31:28.837 に答える
0

単一の JavaScript 関数から複数のオーディオを再生する方法を次に示します。

<HTML>
<head>
<title>aa</title>
 <script type="text/javascript"> 
function playPause(x)
{ 
    var myAudio=document.getElementById(x); 
    if (myAudio.paused) 
    myAudio.play(); 
    else 
    myAudio.pause(); 
}
</script>
</head>
<body>
<div class="sound1">
    <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <audio id="Soundx1">
                <source  src="XXXXX.mp3" type="audio/mp3">
            </audio> 
            <button style="background-image:url(speaker_bakur.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx1');" ></button> 
     </div>
</div>
<div class="sound2">
            <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
        <audio id="Soundx2">
        <source  src="XXXXX.mp3" type="audio/mp3" />
        </audio> 
            <button style="background-image:url(speaker_likka.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx2');" ></button> 
    </div>
</div>
<div class="sound3">
    <div style="text-align:center; width:100px; height:100px; margin-left:390px; margin-top:0px; background-repeat:no-repeat; "> 
            <audio id="Soundx3">
            <source  src="XXXXXX.mp3" type="audio/mp3" />
            </audio> 
        <button style="background-image:url(speaker_fiskimasi.png); width:100px; height:100px; border:transparent; margin-top:0px; margin-left:0px;" onclick="playPause('Soundx3');" ></button> 
    </div>
</div>
</body>
</html>
于 2012-06-22T17:26:03.170 に答える