HTML5 перекрестный плейлист

Question

С помощью этого вопроса Использование ссылки на вызывающий объект (this) с использованием аудио HTML5 и jQuery .

Редактирование Я получил плейлист, который хотел, он отлично работает на Crome и Safari, но он не воспроизводится вообще в других браузерах, нестабильный, поскольку не все браузеры поддерживают файлы MP3. (Проверено IE и Firefox; звук не воспроизводится, Safari проверен на моем iPod и нет проблем) Но странно, что IE не воспроизводит звук, когда поддерживает MP3.

jsFiddle

Это то, что я придумал для редактирования вопроса, связанного выше. Я интегрировал jQuery, чтобы придать кнопке другой стиль, чтобы она больше напоминала кнопку «Воспроизведение / Пауза» на YouTube.

Лучший пример здесь: Плейлист

Я пытался использовать jQuery, чтобы изменить ссылку src в аудио, как это

this.next = function (){
     count++;
      if(count == 2){count = 0;}
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3');
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg');
};

И изменение тега <audio> на это:

<audio id="aud" autoplay autobuffer>
  <source id="uhh2" src="http://daokun.webs.com/play0.ogg" type="audio/ogg" />
  <source id="uhh" src="http://daokun.webs.com/play0.mp3" type="audio/mpeg" />
</audio>

Сделать это кроссбраузером, но после изменения песни он не изменит src тегов <source>.

Я также попытался отредактировать следующую функцию следующим образом:

this.next = function (){
 count++;
  if(count == 2){count = 0;}
   uhh = 'http://daokun.webs.com/play'+count+'.mp3';
   uhh2 = 'http://daokun.webs.com/play'+count+'.ogg';
};

И добавить переменные:

var uhh = $('#uhh').attr('src'),
    uhh2 = $('#uhh2').attr('src');

Попробовал это, а все равно ничего.

var uhh = document.getElementById('aud').firstChild,
    uhh2 = document.getElementById('aud').lastChild;

Не сработало, поэтому я отредактировал его так:

var uhh = document.getElementById('uhh'),
    uhh2 = document.getElementById('uhh2');

Следующая функция в:

 this.next = function (){
     count++;
      if(count == 2){count = 0;}
    uhh.src = 'http://daokun.webs.com/play'+count+'.mp3';
    uhh2.src = 'http://daokun.webs.com/play'+count+'.mp3';
 };

Присвоение идентификаторов двум <source> с (ухм и ухх2), но ничего.

Я заметил, проверив исходный код в Chrome, что ссылки src на этих двух <source> меняются, но проблема в том, что файлы MP3 не «загружаются» на страницу, проверяя вкладку ресурсов. , При использовании тега <audio> на страницу «загружаются» и воспроизводятся только новые файлы MP3.

Так что же я делаю не так? Или что происходит, что это не работает?

Answer 1

Похоже, что вы делаете здесь много, и мне нравится, что вы вкладываете в это. Мне кажется, единственное, что вы не делаете, - это «захватываете событие».

$("#aud").addEventListener('ended', function(){
  this.currentTime=0;
  this.next = function (){
    count++;
    if(count == 2){count = 0;}
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3');
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg');
  };
}, false);

Затем добавьте 'preload элементов управления' к звуковому тегу

<audio id="aud" autoplay autobuffer controls preload">

Вы должны быть в состоянии захватить «конец» события с этим. Я пока не самый опытный эксперт по HTML5, только немного потрудился.

В любом случае, что-то вроде приведенного выше примера даст вам то, что вы хотите, теперь, когда вы можете захватить «конец» песни; Я получил этот пример от:

Аудио петли HTML 5