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