Настройка позиции звука в HTML5

Question

Как перейти к определенным временным смещениям в HTML5 Audio элементах?

Они говорят, что вы можете просто установить их currentTime свойство (выделено мной):

Атрибут currentTime должен при получении возвращать текущую позицию воспроизведения, выраженную в секундах. При настройке , если медиа-элемент имеет текущий медиа-контроллер, он должен вызвать исключение INVALID_STATE_ERR;в противном случае пользовательский агент должен искать новое значение (которое может вызвать исключение).

Увы, похоже, оно не работает (оно мне нужно в Chrome).

Есть похожие вопросы, но ответов нет.

Answer 1

Для просмотра аудио файла ваш сервер должен быть правильно настроен.

Клиент отправляет запросов диапазона байтов для поиска и воспроизведения определенных областей файла, поэтому сервер должен адекватно ответить:

Для поддержки поиска и воспроизведения областей СМИ, которые еще не загружены, Gecko использует запросы байтового диапазона HTTP 1.1 для извлекать носитель из позиции поиска цели. Кроме того, если вы не обслуживать заголовки X-Content-Duration, Gecko использует запросы диапазона байтов искать до конца медиа (при условии, что вы обслуживаете контент-длина заголовок) для определения продолжительности мультимедиа.

Затем, если сервер правильно отвечает на запросы диапазона байтов, вы можете установить положение звука с помощью currentTime:

audio.currentTime = 30;

См. MDN Настройка серверов для Ogg Media (на самом деле то же самое относится и к другим форматам).

Также см. Настройка веб-серверов для видео и аудио Ogg HTML5 .

Answer 2

Работает на мой хром ...

$('#audio').bind('canplay', function() {
  this.currentTime = 29; // jumps to 29th secs
});

Answer 3

Вы можете использовать #t URI Диапазон времени свойство
, которое действительно как для audio , так и video СМИ.

stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec.

var a = new Audio();
a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5";
a.play();

Если вы хотите динамически пропустить до определенного диапазона, чем использовать HTMLMediaElement. currentTime :

audio.currentTime = 8.5;

Answer 4

A намного более простое решение -

var element = document.getElementById('audioPlayer');

//first make sure the audio player is playing
element.play(); 

//second seek to the specific time you're looking for
element.currentTime = 226;

Answer 5

Убедитесь, что вы пытаетесь установить свойство currentTime после , когда аудио элемент готов к воспроизведению. Вы можете связать свою функцию с атрибутом события oncanplay, определенным в спецификации.

Можете ли вы опубликовать пример кода, который не работает?

Answer 6

Firefox также запрашивает диапазон байтов при поиске контента, который еще не загружен - это не просто проблема Chrome.Установите заголовок ответа «Accept-Ranges: bytes» и верните код состояния 206 Partial Content, чтобы позволить любому клиенту делать запросы диапазона байтов.

См. https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

Answer 7

Я столкнулся с проблемой, что индикатор звука не работал, но звук работал правильно. Этот код работает для меня. Надеюсь, это вам тоже поможет. Здесь песня является объектом аудио компонента.

HTML Part

<input type="range" id="seek" value="0" max=""/>

JQuery Part

    $("#seek").bind("change", function() {
            song.currentTime = $(this).val();               
        });

song.addEventListener('timeupdate',function (){

    $("#seek").attr("max", song.duration);
    $('#seek').val(song.currentTime);
    });

Answer 8

Ответ @ katspaugh правильный, но есть обходной путь, который не требует дополнительной настройки сервера. Идея состоит в том, чтобы получить аудиофайл в виде большого двоичного объекта, преобразовать его в dataURL и использовать его в качестве src для элемента audio.

Вот решение для угловых $http, но при необходимости я также могу добавить версию vanilla JS:

$http.get(audioFileURL,
        {responseType:'blob'})
        .success(function(data){
            var fr = new FileReader;
            fr.readAsDataURL(data);
            fr.onloadend = function(){
                domObjects.audio.src = fr.result;
            };
        });

внимание

1. Этот обходной путь не подходит для больших файлов.
2. Он не будет работать с кросс-источником, если CORS не настроен правильно.

Answer 9

Установить время на 5 секунд:

var vid = document.getElementById("myAudio");
vid.currentTime = 5;