Запустите HTML5 <Audio> в случайном положении

Question

У меня есть звуковая дорожка длиной около 2 часов, которую я хочу использовать на своем веб-сайте. Я хочу, чтобы он запускал воспроизведение трека в случайном положении, когда страница загружается. Возможно ли использование HTML5? Я знаю, что вы можете использовать функцию element.currentTime(), чтобы получить текущую позицию, но как бы вы получили общее время дорожки перед ее полной загрузкой? Я пробовал каждую комбинацию .load .preload .autobuffer и сотни других.

<script> 

var stream_url_mp3 = ""; 
var stream_url_ogg = ""; 
var stream_total_time = 100; 
var stream_start_time = Math.floor(Math.random() * stream_total_time); 
var daJukebox = document.createElement('audio'); 

if (daJukebox.canPlayType) { 

    if ("" != daJukebox.canPlayType('audio/mpeg')) { 
     daJukebox.src = stream_url_mp3; 
    } else if ("" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) { 
     daJukebox.src = stream_url_ogg; 
    } 

    daJukebox.preload = true; 
    daJukebox.autobuffer = true; 
    daJukebox.pause(); 
    daJukebox.currentTime = stream_start_time; 
    daJukebox.play(); 

} 

Спасибо :)

Answer 1

Если нет никакого способа, чтобы получить информацию от звукового элемента HTML5, можно определить длительность на сервере и передавать информацию в качестве атрибута данных к HTML. Например:

<audio id="some-id" data-duration="7200">

, где 7200 это время в секундах (или какой-либо другой единицы времени). Затем вы можете использовать значение этого атрибута в JavaScript, чтобы решить, где начать звуковой файл.

Answer 2

Не установить это еще сам, но я нашел эти примеры в http://dev.opera.com/articles/view/html5-audio-radio-player/

// Invoke new Audio object 
var audio = new Audio('test.ogg'); 

// Get the play button and append an audio play method to onclick 
var play = document.getElementById('play'); 
play.addEventListener('click', function(){ 
    audio.play(); 
}, false); 

// Get the pause button and append an audio pause method to onclick 
var pause = document.getElementById('pause'); 
pause.addEventListener('click', function(){ 
    audio.pause(); 
}, false); 

// Get the HTML5 range input element and append audio volume adjustment to onchange 
var volume = document.getElementById('volume'); 
volume.addEventListener('change', function(){ 
    audio.volume = parseFloat(this.value/10); 
}, false); 

// Get where one are in playback and push the time to an element 
audio.addEventListener("timeupdate", function() { 
    var duration = document.getElementById('duration'); 
    var s = parseInt(audio.currentTime % 60); 
    var m = parseInt((audio.currentTime/60) % 60); 
    duration.innerHTML = m + '.' + s + 'sec'; 
}, false); 

не знаю, как кросс-совместимый это, но это указывает на то, что вы могли бы быть в состоянии сделать что-то вроде

var audio = new Audio('test.ogg'); 
audio.currentTime = "some time format I'm not sure how to format yet"; 

Answer 3

Что делает daJukebox.duration возвращение? Это должна быть общая длина дорожки в секундах.

Я сделал немного исследований, и похоже, что .duration будет работать только в том случае, если сервер настроен на правильную настройку заголовков файлов на тип = "audio/mp3" name = "filename.mp3" (или ogg), проверьте вкладку в сети вашей консоли разработчика, я бы поставил ваш сервер на отправку файла с типом octet/stream, что приводит к длительности "infinite" в Opera и NaN в других браузерах.