这些标记中有两个音频标签。我的问题是第二个无法播放
<div class="container">
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/02 So Far.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
<div class="post-container">
<legend>
<strong>Zedd - Spectrum</legend>
</h4>
<div class="art-item">
<img src="uploads/arts/default.jpg">
</div>
<audio class="audio-player" src="uploads/tracks/track3.mp3"></audio>
<div class="playerContainer">
<ul id="playerControls">
<li class="play-bt"></li>
<li class="pause-bt"></li>
<li>
<div class="progressContainer">
<!-- Progess bars container //-->
<div class="progressbar"></div>
</div>
</li>
</ul>
<span class="timecode">0:00</span>
</div>
</div>
</div>
这是播放轨道的脚本
$(".play-bt").click(function(){
var $artItem = $(this).parent(".art-item");
console.log($artItem);
$artItem.find('audio').play();
$artItem.find(".message").text("Music started");
});
我的问题是我只能播放第一个音频标签。如果还有更多标签,我该怎么做才能播放第二个标签或第三个音频标签?计数器是选择要播放的音频标签的计数器。但到目前为止,我不知道如果此标记中有更多音频帖子,我将如何制作第二个音频标签或用户选择的音频标签。
最佳答案
不能 100% 确定这是唯一的问题,但您经常使用 id。 id 在页面上应该是唯一的。用类替换它们
你的引用文献是错误的。
$("#play-bt").click(function(){
// -> will allways try to play song indicated by counter (0)
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
我想你不想要这样吗?您不想播放“后容器”中的音频吗?
你可以这样做:
$(document).ready(function(){
$(".play-bt").click(function(){
var $post= $(this).parents(".post-container");
$post.find('audio')[0].play();
$post.find(".message").text("Music started");
});
});
=> 并将 play-bt 和消息 id 更改为类
关于javascript - HTML5 2 音频标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11863898/