我的html5自定義音頻控件有些麻煩

Question

我正在處理來自php的動態加載文件。 我的自定義音頻控件只能播放數據庫中的第一個音頻文件，但不能播放其他音頻文件。 如果有人能幫助我，我會很高興。

這是我的代碼：

 echo " <audio id='aud' controls> 
      source='$aud_dir' type='audio/$audio_type'>
      </audio>
     <h4 id='playpausebtn'><span class='glyphicon glyphicon-play'></span>  </h4>";

這是我的javascript代碼：

var aud, playbtn;

function intializeplayer() {
  aud = document.getElementById('aud');
  playbtn = document.getElementById('playpausebtn');

  playbtn.addEventListener('click', playpause, false);
}
window.onload = intializeplayer;

function playpause() {
  if (aud.paused) {
    aud.play();
  } else {
    aud.pause();
  }
}

Answer 1

javascript似乎有效......我稍微修改了一下html - 看來你的audio標簽的HTML是無效的 - 有一個>之后的controls關閉了開始標簽，然后source和type屬性浮動在標簽內...

見下面的工作示例：

更新

根據您的意見，您提到您需要讓Play / Pause按鈕適用於多個音頻播放器。 我已更新樣本以處理所有音頻標簽，但您可以將類屬性添加到特定音頻元素並使用該類名稱查找所需元素（例如var audioPlayers = $('.selectedAudioPlayers');並且符合html標准（4我相信） id屬性必須是唯一的（參考MDN文檔和有效性規則在本SO答案中解釋，因此當您使用服務器端代碼生成<audio>標簽時（PHP，對吧？），你可以通過在其中附加一個id來使id屬性唯一 - 例如echo "<audio id='aud_$id'..." 。這有意義嗎？

  var audPlayers, playbtn; function intializeplayer() { audPlayers = document.getElementsByTagName('audio'); playbtn = document.getElementById('playpausebtn'); playbtn.addEventListener('click', togglePlayers, false); } window.onload = intializeplayer; function togglePlayers() { Array.prototype.forEach.call(audPlayers,playpause); } function playpause(aud) { if (aud.paused) { aud.play(); } else { aud.pause(); } } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <audio id='aud_1' controls src="http://www.noiseaddicts.com/samples_1w72b820/3717.mp3"> </audio> <audio id='aud_2' controls src="http://www.noiseaddicts.com/samples_1w72b820/1456.mp3"> </audio> <h4 id='playpausebtn'><span class='glyphicon glyphicon-play'></span></h4>