Разрешить только один аудио элемент играть за раз
-
11-10-2019 - |
Вопрос
У меня есть несколько аудиоплееров, каждый с кнопкой воспроизведения и остановки, на одной странице. Единственная проблема, которую у меня есть, это когда вы нажимаете одну кнопку воспроизведения, а затем другая, они играют друг на друга. Может ли кто -нибудь помочь мне с кодом, мне нужно было бы остановить любую песню, воспроизводимую, когда нажимается другая кнопка воспроизведения - так что никогда не было бы более одной песни, играющей за раз ?? Спасибо! Вот мой код:
$(document).ready(function(){
$("#play-bt").click(function(){
$("#audio-player")[0].play();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#audio-player")[0].currentTime = 0;
})
})
$(document).ready(function(){
$("#play-bt1").click(function(){
$("#audio-player1")[0].play();
})
$("#stop-bt1").click(function(){
$("#audio-player1")[0].pause();
$("#audio-player1")[0].currentTime = 0;
})
})
Решение
$(document).ready(function(){
var allAudioEls = $('audio');
function pauseAllAudio() {
allAudioEls.each(function() {
var a = $(this).get(0);
a.pause();
});
}
$("#play-bt").click(function(){
pauseAllAudio();
$("#audio-player")[0].play();
})
$("#stop-bt").click(function(){
$("#audio-player")[0].pause();
$("#audio-player")[0].currentTime = 0;
})
$("#play-bt1").click(function(){
pauseAllAudio();
$("#audio-player1")[0].play();
})
$("#stop-bt1").click(function(){
$("#audio-player1")[0].pause();
$("#audio-player1")[0].currentTime = 0;
})
})
Другие советы
Вот мой код PHP
<div id="sourceplay"></div>
<table class="table tlm-table-epg">
<tbody>
<?php foreach (\common\models\Video::find()->orderBy('id desc')->all() as $valuevideo): ?>
<tr class="tlm-epg">
<td class="width35">
<a class="playbutton"
values="<?= Yii::$app->urlManager->baseUrl . $valuevideo->url ?>" tss="<?=$valuevideo->id?>"><i
id="ts-<?=$valuevideo->id?>" class="fa fa-play-circle-o font-size-25"></i></a>
</td>
<td>
<p><?= $valuevideo->name ?></p>
<p class="margin-top-10px"><?php $date = date_create_from_format('Ymd', $valuevideo->code);
echo date_format($date, 'd/m/Y'); ?></p>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
$(document).ready(function () {
$(document).on('click','.playbutton',function () {
var self=$(this);
if(self.attr('class')!='playbutton actives'){
var t = $(".fa.fa-pause-circle-o.font-size-25");
var r = $("#ts-"+self.attr('tss'));
var last = $(".playbutton.actives");
$("#sourceplay").html('<audio controlsList="nodownload" id="mainpls" autoplay="true" controls="controls">' +
'<source src="'+self.attr('values')+'" type="audio/mpeg" >' +
'</audio>');
t.attr('class','fa fa-play-circle-o font-size-25 actives');
r.attr('class','fa fa-pause-circle-o font-size-25');
self.attr('class','playbutton actives');
last.attr('class','playbutton');
}else {
$("#mainpls").remove();
var t = $(".fa.fa-pause-circle-o.font-size-25");
var last = $(".playbutton.actives");
t.attr('class','fa fa-play-circle-o font-size-25 actives');
self.attr('class','playbutton');
last.attr('class','playbutton');
}
})
})
Не связан с StackOverflow