一次播放音频音频文件
问题描述:
我有5个图像,每个图像都有一个音频文件播放单击图像。一次播放音频音频文件
我希望单击另一个图像时正在播放的一个图像的音频停止,然后播放该图像的音频。
$('.cl').click(function() {
var DOMElem = $('.cs').get(0);
DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
答
您每次收到第一个audio
对象。你需要对于获取object
到img
$('.cl').click(function() {
var DOMElem = $(this).next().next().get(0);
DOMElem.paused ? DOMElem.play() : DOMElem.pause();
});
一种更好的方法是使每个图像和音频div容器,当你点击image
可以相对于容器获取音频对象。
<div class="audioContainer">
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audioContainer">
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
</div>
<div class="audioContainer">
<img class="cl" src="photo/198.jpg" />
</br>
<audio class="cs">
<source src="http://www.w3schools.com/html/horse.mp3" type="audio/mpeg">
</audio>
</div>
<script>
var DOMElem;
$('.cl').click(function() {
if (DOMElem) {
if (!DOMElem.paused)
DOMElem.pause();
}
DOMElem = $(this).parent().find('.cs').get(0);
DOMElem.play();
console.log(DOMElem);
});
</script>
这是[静音标签](http://www.w3schools.com/tags/att_audio_muted.asp),您可以将其应用于正在播放的人。 –
你可以写代码] –