CODEWITHSUNDEEP
javascripthtmlaudio
user1185687
user1185687

Reputation:

Start HTML5 <Audio> 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.

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

}

Thanks :)

Upvotes: 3

Views: 2201

Answers (3)

Chris Sobolewski
Chris Sobolewski

Reputation: 12935

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.

Upvotes: 1

Andrew Edvalson
Andrew Edvalson

Reputation: 7878

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";

Upvotes: 0

Simeon Visser
Simeon Visser

Reputation: 122336

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:

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

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.

Upvotes: 1

Related Questions