Установка аудио установки на HTML5
Как перейти к определенным смещениям времени в HTML5 Audio элементов?
Они говорят, что вы можете просто установить их currentTime свойства (выделено мной):
The
currentTimeатрибут должен, при получении, вернуть текущий
положение воспроизведения, выраженное в секундах. Об установлении, если СМИ
элемент имеет текущий медиа-контроллер, то он должен бросить
Исключение INVALID_STATE_ERR; в противном случае,агент пользователя должен стремиться
новое значение (который может вызвать исключение).
увы, это не работает (мне это нужно в Chrome).
есть похожие вопросы, но не ответы.
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 видео и аудио.
можно использовать
#tURI диапазон времени свойства
и это справедливо для обоих аудио и видео СМИ.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 частичного содержимого, чтобы любой клиент мог выполнять запросы диапазона байтов.
я столкнулся с проблемой, что индикатор выполнения аудио не работает, но аудио работает правильно. Этот код работает для меня. Надеюсь, что это поможет вам тоже. Здесь песня является объектом аудиокомпонента.
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; }; });предостережения
- этот способ не подходит для больших файлов.
- это не будет работать перекрестное происхождение, если CORS не установлены должным образом.
установите положение времени на 5 секунд:
var vid = document.getElementById("myAudio"); vid.currentTime = 5;
Comments