HTML 5 <audio> - воспроизведение файла в определенный момент времени

У меня есть простой фрагмент автовоспроизведения, который воспроизводит аудиофайл, но мне было интересно, как в JavaScript, так и в качестве атрибута воспроизведения этого файла в определенное время (например, 3:26).

<script type="text/javascript">
    var myAudio=document.getElementById('audio2')
    myAudio.oncanplaythrough=function(){this.play();}
</script>

<audio id="audio2" 
       preload="auto" 
       src="file.mp3" 
       oncanplaythrough="this.play();">
</audio>

Любая помощь будет отличной. Спасибо заранее:)

Ответы

Ответ 1

Несколько вещей... ваш script сначала должен быть после звукового тега.

Также вам не нужен атрибут oncanplaythough в теге аудио, так как вы используете JavaScript для этого.

Кроме того, oncanplaythrough является событием, а не методом. Добавьте к нему слушателя, который вместо этого будет использовать canplaythough. Взгляните на это:

<audio id="audio2" 
   preload="auto" 
   src="http://upload.wikimedia.org/wikipedia/commons/a/a9/Tromboon-sample.ogg" >

   <p>Your browser does not support the audio element</p>
</audio>

<script>
  myAudio=document.getElementById('audio2');
  myAudio.addEventListener('canplaythrough', function() {
    this.currentTime = 12;
    this.play();
  });
</script>

И, наконец, чтобы начать песню в определенную точку, просто установите currentTime, прежде чем вы начнете воспроизведение файла. Здесь у меня он установлен на 12 секунд, поэтому в этом примере он будет слышен, в течение 3:26 вы будете использовать 206 (секунд).

Посмотрите демо-версию: http://jsfiddle.net/mNPCP/4/

EDIT. Похоже, что currentTime может быть неправильно реализовано в браузерах, отличных от Firefox. Согласно разрешению этого подал ошибку W3C, когда установлен currentTime, он должен запускать события canplay и canplaythrough. Это означает, что в нашем примере Firefox будет воспроизводить первую секунду или около того звуковой дорожки на неопределенный срок, никогда не продолжая воспроизведение. Я придумал это быстрое обходное решение, позвольте изменить

this.currentTime = 12;

чтобы проверить, было ли оно уже установлено, и, следовательно, чтобы canplaythrough повторно вызывался:

if(this.currentTime < 12){this.currentTime = 12;}

Эта интерпретация спецификации по-прежнему в настоящее время оспаривается, но на данный момент эта реализация должна работать на большинстве современных браузеров с поддержкой аудио HTML5.

Обновленный jsFiddle: http://jsfiddle.net/mNPCP/5/

Ответ 2

Лучший способ сделать это - использовать спецификацию URI Media Fragment. Используя ваш пример, предположим, что вы хотите загрузить аудио, начиная с 3:26 дюйма

<audio id="audio2" 
       preload="auto" 
       src="file.mp3#t=00:03:26" 
       oncanplaythrough="this.play();">
</audio>

В качестве альтернативы, мы могли бы просто использовать количество секунд, например file.mp3#t=206.

Вы также можете установить время окончания, отделяя время начала от времени запятой. file.mp3#t=206,300.5

Этот метод лучше, чем метод JavaScript, поскольку вы намекаете браузеру, который вы хотите загрузить только с определенной отметки времени. В зависимости от формата файла и поддержки сервером для ранжированных запросов браузер может загружать только те данные, которые необходимы для воспроизведения.

Смотрите также:

Ответ 3

Используйте это.

var myAudio=document.getElementById('audio2')
// Seek to 10 seconds:
myAudio.oncanplaythrough=setTimeout(function(){setTime()},500);
function setTime(){myAudio.currentTime = 10; }

Причина, по которой я использовал setimeout, - это дать некоторое время для правильной загрузки звука. Это решит вашу проблему.