0

I'm working with a default audio element (without giving controls to the user) that I'm interacting with through jQuery (changing source, playing/pausing - the usual). Now I'm trying to fade into the next track (of a second audio element), starting it 5 seconds early to have a seamless transition.

From what I gathered from the media events and audio element attributes pages, no method exists to do this by default - the closest thing in existence seem to be the onended event (which fires too late, obviously), and the loop attribute, which has the same problem.

I seperated my previous attempt into an answer to remove the question from the unanswered queue, but it originally was included here

Any help on solving this problem more efficiently, natively in a way I missed, or improving on my existing solution are greatly apprechiated! Thanks in advance.

TheThirdMan
  • 1,482
  • 1
  • 14
  • 27
  • I'm also thankful for feedback on the downvote, or what more information you would require... – TheThirdMan Jul 12 '16 at 21:43
  • This is the most efficient method. One use case you might not have thought of is as a user skips through the audio it will screw up. Also, as an end user, I wouldn't want the program screwing with my audio volumes and such. – DevNebulae Jul 12 '16 at 21:45
  • @GamerNebulae: Good thinking, I might have forgotten that. In this case, however, it's background music, so not only does the user not get any control over the playback (with the exception of starting and stopping it), there also shouldn't be a problem with fading into the next track from a interactability point of view. – TheThirdMan Jul 12 '16 at 21:56
  • I would just edit the music so it already fades without any intervention of Javascript code. It saves you a lot of hassle. – DevNebulae Jul 12 '16 at 22:03
  • @GamerNebulae: Well, I want the next track to start 5 seconds prior to the current one ending (in a seperate audio element, so that for 5 seconds, they would play at the same time). – TheThirdMan Jul 12 '16 at 22:05
  • Then I would just make one large soundtrack. This is a perfect example of keep it stupidly simple, not everything has to be solved in code. – DevNebulae Jul 12 '16 at 22:10
  • @GamerNebulae: That would be an option if I had a pre-determined arrangement of sounds, however tracks are arranged based on external factors, not to mention that in the absense of those external factors happening, the same track will be repeated. Long story short, it's not possible to solve this on file level, not without changing the concept at least. – TheThirdMan Jul 12 '16 at 22:15
  • Down-vote wasn't me, but it might have had to do with you wanting an event to fire 5 seconds before something happens. HTML5 doesn't have tachyonic antitelephones. – Tim Grant Jul 12 '16 at 22:15
  • @timster: That might be it; I have changed the title earlier because of that reason exactly. Oh well... – TheThirdMan Jul 12 '16 at 22:18
  • 2
    this may help you... [current/duration time of html5 video?](http://stackoverflow.com/questions/6380956/current-duration-time-of-html5-video) – DIEGO CARRASCAL Jul 12 '16 at 22:22

1 Answers1

1

At this point, the only solution I see is to check the duration of the track ahead of time, then set the following timeout:

$('audio').bind('loadedmetadata', function() {
  duration = $(this).prop('duration') * 1000; // get duration in milliseconds
  var fadetimer = setTimeout(function(){
    // set up next audio file
  }, duration - 5000); // execute timeout 5 seconds before end of playback
});

This seems vastly inefficient to me, however. I am also unsure whether this method will leave "garbage" timeouts or event bindings running in the background, which will eventually add up and slow down the application.

TheThirdMan
  • 1,482
  • 1
  • 14
  • 27
  • And what if the user pauses the audio, or if some latency occurs during the playback ? A better approach would be to use the [timeupdate](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events#timeupdate) event , when `audio.currentTime === audio.duration - 5` then call your function. – Kaiido Aug 01 '16 at 11:07
  • @Kaiido: I should've added this to the question by now, but as I've commented on the question, the user doesn't have any controls for the audio in my case - it's simply background audio. The `timeupdate` approach was hinted on by another user in the comments, but for my case, this method seemed to be the less resource-intensive one. Of course, if you disagree or have a different point, feel free to post it as an answer, and I will try it out! – TheThirdMan Aug 01 '16 at 11:11