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属性浮动在标记内...

见下面的工作示例：

更新

根据您的评论，您提到您需要让播放/暂停按钮适用于多个音频播放器。我已经更新了样本以处理所有音频标签，但您可以将类属性添加到特定的音频元素，并使用该类名称找到所需的元素（例如var audioPlayers = $('.selectedAudioPlayers');。并按照html标准（我认为4）id属性必须是唯一的（请参阅MDN documentation，并在此SO answer中说明有效性规则，以便生成<audio>标记使用服务器端代码（PHP，对吗？），您可以通过向其添加ID来使id属性唯一 - 例如echo "<audio id='aud_$id'..."。这有意义吗？

＆＃13;

    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();
      }
    }

＆＃13;

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

＆＃13;

我的html5自定义音频控件有些麻烦

1 个答案:

更新