Настройка позиции аудио в формате HTML5

Ответ 1

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

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

Ответ 2

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

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

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

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

audio.currentTime = 30;

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

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

Ответ 3

Вы можете использовать #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();

Ответ 4

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

Можете ли вы опубликовать образец неудавшегося кода?

Ответ 5

Намного проще решить

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;

Ответ 6

Firefox также делает запросы диапазона байтов при поиске контента, который он еще не загрузил, это не просто проблема с хромом. Задайте заголовок ответа "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

Ответ 7

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

Часть 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);
    });

Ответ 8

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

Вот решение для angular $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 не будут установлены правильно.

Ответ 9

Установите временную позицию до 5 секунд:

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