Установка аудио установки на HTML5



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



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




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




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



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

620   9  

9 ответов:

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

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

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

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

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

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

audio.currentTime = 30;

смотрите MDN настройка серверов для OGG media (то же самое относится и к другим форматам, на самом деле).

кроме того, см. настройка веб-серверов для HTML5 Ogg видео и аудио.

можно использовать #t URI диапазон времени свойства
и это справедливо для обоих аудио и видео СМИ.

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;

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;

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

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

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

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

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

HTML-часть

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

JQuery В Часть

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

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

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

ответ @кэтспо правилен, но существует обходной путь, который не требует никаких дополнительных настроек сервера. Идея состоит в том, чтобы получить аудиофайл в виде большого двоичного объекта, преобразовать его в 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 не установлены должным образом.

установите положение времени на 5 секунд:

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

Comments

    Ничего не найдено.