Start timeline when audio has finished loading

Using JavaScript with Hype
1

i am having issues with synchronising my audio with the timeline the timeline starts before the audio has finished loading on ios - can you help me to make it that it only starts the timeline when the audio is actually loaded and begins. There’s a nasty delay on ios.

so at the moment it I am using this code to start the timeline and audio on an opening button and also on a play pause button. It’s great except on ios.

var myAudio = document.getElementById("myAudio2");



if (myAudio.paused) { 
  myAudio.play(); 
  hypeDocument.continueTimelineNamed('playsound1');
  hypeDocument.getElementById('ppaudio1').innerHTML = '<i class="fa fa-pause"></i>';
} else { 
  myAudio.pause(); 
  hypeDocument.pauseTimelineNamed('playsound1');
  hypeDocument.getElementById('ppaudio1').innerHTML = '<i class="fa fa-play"></i>';
}
2

I actually found the solution to this question here:

I think I've solved it.

Edit - yes works brilliantly -this is a brilliant solution to the preload issue I was having.

3

Glad this worked for you. If you can share any tips or techniques for your specific use case that would be awesome. The key thing to this is that you can’t really depend on anything except ‘timeupdate’ being accurate with different bandwidth speeds and preloading policies.

4

This was how I used it - really just a copy and paste of your example - only I shortened the time that it plays before the timeline starts to 0.1 and added in a change to inner html of the play pause button. As my audio is a minute or two long it was at times on my phone several seconds behind the timeline.

  var myAudio = document.getElementById("myAudio");
    	
    	// This establishes the T1 variable as an integer.
    var T1 = 0;

    // Listen to the 'timeupdate' value: 
    hypeDocument.getElementById('myAudio').addEventListener('timeupdate', function() {
    var currentTime = hypeDocument.getElementById('myAudio').currentTime;

    // If the current time is greater than 5, run the RedRobin timeline. 
    if (currentTime >= 0.1 && T1 == 0) {
    hypeDocument.startTimelineNamed('playsound1');

    // This ensures that the 'startTimelineNamed' action only occurs once, not at every point beyond time = 5. 
    T1 = T1 + 1;
    }
    });
    	myAudio.play();
    	hypeDocument.getElementById('ppaudio').innerHTML = '<i class="fa fa-pause"></i>';
2 Likes