start html5,Start HTML5 at random position | 易学教程

问题

I have an audio track which is around 2 hours long that I want to use on my website. I want it to start the track playing at a random position when the page loads. Is this possible using HTML5? I know you can use the element.currentTime() function to get the current position but how would you get the total time of the track before it's fully downloaded? I've tried every combination of .load .preload .autobuffer and hundreds more.

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();

}

Thanks :)

回答1:

If there's no way to obtain the information from the HTML5 audio element, you could determine the duration at the server and pass the information as a data attribute to the HTML. For example:

where 7200 is the time in seconds (or some other unit of time). You can then use the value of this attribute in JavaScript to decide where to start the audio file.

回答2:

What does daJukebox.duration return? It should be the total length of the track in seconds.

I did a little bit of research and it looks like .duration will only work if the server is configured to properly set the file headers to type="audio/mp3" name="filename.mp3" (or ogg), check the network tab of your dev console, I'd wager your server is sending the file with a type of octet/stream, which results in a duration of "infinite" in Opera and NaN in other browsers.

回答3:

Haven't set this up yet myself, but I found these examples at 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);

No idea how cross-compatible this is, but this indicates that you might be able to do something like

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

audio.currentTime = "some time format I'm not sure how to format yet";

来源：https://stackoverflow.com/questions/9830375/start-html5-audio-at-random-position