[英]HTML5 2 Audio tags
I have two audio tags in these markup. 这些标记中有两个音频标签。 my problem is that the second one won't play
我的问题是第二个不会播放
<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>
And here is the script that plays the track 这是播放曲目的脚本
$(".play-bt").click(function(){
var $artItem = $(this).parent(".art-item");
console.log($artItem);
$artItem.find('audio').play();
$artItem.find(".message").text("Music started");
});
My problem is that I can only play the first audio tag. 我的问题是我只能播放第一个音频标签。 what can I do to play the second tag or 3rd audio tag if there's more?
如果还有更多内容,我该怎么做才能播放第二个标签或第三个音频标签? the counter is the one that is selecting what audio tags to play.
计数器就是选择要播放的音频标签的计数器。 but as of now I have no idea how would I make the second audio tag or user selected audio tag if the are more audio post in this markup.
但是到目前为止,如果该标记中包含更多音频,我还不知道如何制作第二个音频标签或用户选择的音频标签。
not 100% sure that's the only issue but you use id a lot. 不是100%确定这是唯一的问题,但是您经常使用id。 id's should be unique on a page.
ID在页面上应该是唯一的。 Replace them by classes
用类代替它们
And your references are wrong. 并且您的引用是错误的。
$("#play-bt").click(function(){
// -> will allways try to play song indicated by counter (0)
$(".audio-player")[counter].play();
$("#message").text("Music started");
})
I don't think you want that? 我不想要你吗? Don't you want to play the audio in the "post-container" ?
您不想在“后置容器”中播放音频吗?
you could do something like this: 您可以执行以下操作:
$(document).ready(function(){
$(".play-bt").click(function(){
var $post= $(this).parents(".post-container");
$post.find('audio')[0].play();
$post.find(".message").text("Music started");
});
});
=> and changing the play-bt and message id's into classes =>并将play-bt和消息ID更改为类
The reason why things don't work for you is because of your markup... in your code you try to obtain "parent" of the clicked "play-bt" class, yet "art-item" is NOT parent in your DOM structure. 事情对您不起作用的原因是由于您的标记...在您的代码中,您尝试获取单击的“ play-bt”类的“父级”,但“ art-item” 不是您的DOM的父级结构体。 What probably makes you think it is, is your incorrect markup indentation...
您可能以为是因为您的标记缩进不正确...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.