несколько аудио плееров html5 играют контроль - PullRequest
Новая
       5

несколько аудио плееров html5 играют контроль

0 голосов
/ 18 октября 2018

У меня есть несколько аудиоплееров HTML5 на моей странице, проблема в том, что, когда я играю на обоих из них, они играют одновременно, перекрывая звук друг друга.По сути, я хочу, чтобы один игрок играл, а другой нажимается для воспроизведения, предыдущий прекращает играть.

Ниже приведен мой HTML 

  <div>
     <audio controls="controls">
         <source src="./public/audio/tiesto.mp3" type="audio/mpeg">
     </audio>
  </div>
  <div>
     <audio controls="controls">
          <source src="./public/audio/123.mp3" type="audio/mpeg">
     </audio>
 </div>

Это мои файлы js, которые я скопировалоткуда-то, но не уверен, как это относится к аудиоэлементу. 

var curPlaying;
$(function () {
    $(".playback").click(function (e) {
        e.preventDefault();
        var song = $(this).next('audio')[0];
        if (song.paused) {
            if (curPlaying) {
                $("audio", "#" + curPlaying)[0].pause();
            }
            song.play();
            curPlaying = $(this).parent()[0].id;
        } else {
            song.pause();
            curPlaying = null;
        }
    });
});

Ребята использовали пользовательскую кнопку воспроизведения, тогда как я хочу использовать элемент управления ausio и его встроенную функциональность.Возможно ли это?

1 Ответ

0 голосов
/ 18 октября 2018

Просто добавил следующий javascript в мой пользовательский js 

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);
...