試圖在網頁上實現兩個音頻文件

我很遺憾地一直no html到所以我希望你能回答我的問題。試圖在網頁上實現兩個音頻文件

我試圖在我的網頁上實現三個音頻文件，但只有一個源文件正在播放。其他文件的按鈕有效，但它們只能從一個源文件播放。你可以幫我嗎？

下面的代碼：

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

太謝謝你了！

來源

2012-06-22 Pætur Magnussen

您需要定義其他兩個源標籤的源文件的位置。 '' –

閱讀此以獲取更多信息。 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-html-5-audio-element/ –

您的按鈕樣式存在錯誤。刪除額外;和「 – Timbadu

這裏是如何從一個單一的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-22 17:26:03 AvkashChauhan

這真是太好了！謝謝你，你救了我的一天！ –

很高興爲您的項目提供幫助和好運。 – AvkashChauhan

您有多個具有相同ID的元素。您每次都重新定義playPause()函數。總的來說，你似乎不知道自己在做什麼。

只需將controls屬性添加到audio標籤即可。

來源

2012-06-22 16:30:55

玩家正在尋找ID「Sound」。

getElementById("Sound");

你有3 <audio id="Sound">小號

試戴了變化，以類似<audio id="Sound1">和<audio id="Sound2">等

你需要更新播放器，以反映新的音頻標識。

來源

2012-06-22 16:31:28 Timbadu

我嘗試將它們更改爲

我只是測試，發現你的問題是否與您所使用的播放音頻文件的JavaScript代碼和您定義的音頻標籤作爲一個單獨的標籤綁定的所有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>

所以我有什麼變化：

音頻ID = 獨特的每個音頻文件
獨特的JavaScript對象每個音頻ID爲 var myAudioXX = document.getElementById（「_ unique_id_」）;

此代碼確實能夠工作多個mp3文件。你也應該使用一個JavaScript函數來播放所有的文件，而不是每個func來播放每個文件。如果您將使用一個JavaScript函數來播放所有文件，則可以通過對象引用傳遞ID標記，並將其縮減爲代碼。

來源

2012-06-22 17:06:44 AvkashChauhan

非常感謝！我將如何使用一個JavaScript函數？ –

我希望你能回答你的問題，如果是的話，請接受答案。關於一個javascript func，請花一些時間自己嘗試（因爲這會幫助你學習），如果解決不了，發佈一個問題，讓我知道，我肯定會幫助。 – AvkashChauhan

試圖在網頁上實現兩個音頻文件

回答

相關問題