[英]HTML5 2 Audio tags
这些标记中有两个音频标签。 我的问题是第二个不会播放
<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更改为类
事情对您不起作用的原因是由于您的标记...在您的代码中,您尝试获取单击的“ play-bt”类的“父级”,但“ art-item” 不是您的DOM的父级结构体。 您可能以为是因为您的标记缩进不正确...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.