www.webdeveloper.com
Results 1 to 4 of 4

Thread: Html5 audio preload="none" messes up pause() and currentTime

  1. #1
    Join Date
    Mar 2013
    Posts
    2

    Html5 audio preload="none" messes up pause() and currentTime

    I'm having a really weird problem pausing and resetting progress of html5 audio.

    If I set preload="none", then "pause();" and "currentTime=0;" will not execute, I know this as I've set an alert() after it and the alert() doesn't execute. The moment I delete preload="none", everything works, and the alert() will of course execute.

    This is my code. I fade in/out a couple of pages, each pages has an html 5 audio element in the same position (intended), so the user can play that page's music when visiting that page.

    Code:
    $('.link').on('click', function(e){
        $('.pagecontainer>div').fadeOut();
        $(this.getAttribute("href")).fadeIn();  
        stopAudio();
    });
    
    function stopAudio() { //fade out and stop any current audio
        $('audio').animate({volume: 0}, 1000);
        setTimeout(function(){
            $.each($('audio'), function () {
                this.currentTime=0;
                this.pause();
                alert('audio has been stopped and reset');
            });
        },1000)
    }
    
    $('.sound').on('play', function () { //since volume was faded out, reset volume when click play button
        $('audio').animate({volume: 1}, 100);
    });
    ....
    ....

    Code:
    <a href="#page1" class="link">Audio 1</a>
    <a href="#page2" class="link">Audio 2</a>
    <a href="#page3" class="link">Audio 3</a>
    
    <div class="pagecontainer">
    
        <div id="page1"> //all three audio elements are in exact same spot
                         //clicking page link fades in current audio and fades in new one
            <audio controls loop class="sound" preload="none">
                <source src="../../site/music/music1.mp3"/>
                <source src="../../site/music/music1.ogg"/>
            </audio>
        </div>
    
        <div id="page2">
            <audio controls loop class="sound" preload="none">
                <source src="../../site/music/music2.mp3"/>
                <source src="../../site/music/music2.ogg"/>
            </audio>
        </div>
    
        <div id="page3">
            <audio controls loop class="sound" preload="none">
                <source src="../../site/music/music3.mp3"/>
                <source src="../../site/music/music3.ogg"/>
            </audio>
        </div>
    
    </div>
    When I click a link to another page, I need to stop and reset all three audio elements. Currently since it doesn't stop, the moment I click the play button of the audio element that fades in, I hear two audios playing at the same time. Though interestingly the audio does fade out.

    As mentioned, if I delete preload="none", then the alert('audio has been stopped and reset') will fire, and everything works fine.

    Does anyone know how I can load the audio only when needed (if I take out preload="none") then my website won't work in Chrome, about 20 music files will all try to load at the same time causing Chrome to hang), but make my script work?

    Urgent~ thanks!

  2. #2
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    you cannot jump to zero if the audio file is not loaded, just like you can't pause a CD that's not in your boombox.

    you can lazy-load them one-at-a-time by keeping the <audio> tag empty, setting preload, and slowly appending <source> elements to the empty tags as the tracks load.
    if your server handles partial url requests (via HTTP Range headers), then chrome will not load the entire file before it fires the "loadeddata" event on the <audio> tag.
    when that event fires, you can pause and "currentTime=0" the track, and it's a good opportunity to append the next <source> tag to the next <audio> tag.

    if your server doesn't handle partial requests, move the files to somewhere that does, since you can play audio on any site from any site just fine.

  3. #3
    Join Date
    Mar 2013
    Posts
    2
    Quote Originally Posted by rnd me View Post
    you cannot jump to zero if the audio file is not loaded, just like you can't pause a CD that's not in your boombox.

    you can lazy-load them one-at-a-time by keeping the <audio> tag empty, setting preload, and slowly appending <source> elements to the empty tags as the tracks load.
    if your server handles partial url requests (via HTTP Range headers), then chrome will not load the entire file before it fires the "loadeddata" event on the <audio> tag.
    when that event fires, you can pause and "currentTime=0" the track, and it's a good opportunity to append the next <source> tag to the next <audio> tag.

    if your server doesn't handle partial requests, move the files to somewhere that does, since you can play audio on any site from any site just fine.
    Can you give me an example of how to append the source file to an empty audio tag?

    If I understand correctly, you mean to first have just "<audio loop class="sound">", then when I enter that page, append "<source src="../../site/music/music1.mp3"/>" in between the <audio> tags?

  4. #4
    Join Date
    Jul 2008
    Location
    urbana, il
    Posts
    2,787
    i don't have time to test this, but something like this is what you need:
    Code:
    
    //add a source with a pre-set path to an audio tag based upon a number:
    function appendSource(num, aud){
      var t=document.createElement("source");
        t.src="../../site/music/music"+num+".mp3";
       aud.appendChild(t);
    }
    
    
    //loop through all audio tags and add an event listener to append sources upon one loading:
    $('audio').map(function(index, elm){
         elm.addEventListener("loadeddata", function(){
              appendSource(index+1, elm);
         });  
    
       // run the first one immediately:
       if(!index){  appendSource(index+1, elm); }
    
    })//end map()
    oh, and you need to enable preloading on all your <audio> tags to use this pattern.
    it should not crash chrome anymore because none of the <audio> tags load any data until told to do so later, one at a time.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles