Smart bandwith saving: how to stop HTML5 mp3 audio file from loading unneccessarily, whilst showing the total lenght duration?

1
votes

Given is a simple clean HTML5 audio player. To make the time duration work, the preload="none" must be left out in this code, which defeats the whole purpose of having a minialistic audio player!

What I want is to: wait and don't load the mp3 file (saving many megabytes of otherwise wasted data) unless and untill a user clicks on PLAY! Then and only then, as the mp3 loads and plays, show the duration information. How to achieve this?

In other words: as long as nobody has clicked the PLAY, no data should be loaded from the server and duration is simply 00:00. Thanks!

/*  BAD: Loads mp3 file, even of nobody clicks play!
   GOOD: Shows duration time correctly. */
<audio src="http://labs.qnimate.com/files/mp3.mp3" type="audio/mpeg"></audio>

/*  BAD: Doesn't show the duration time!
   GOOD: Doesnt load the mp3 file unless user clicks play.   */   
<audio src="http://labs.qnimate.com/files/mp3.mp3" type="audio/mpeg" preload="none"></audio>

https://jsfiddle.net/xt5c0whx/10/

The different states summed up for clarity:
• Webpage loads, but the 10 megabyte mp3 does NOT load, yet. Duration displays as "00:00"
• If user clicks play, then mp3 is loaded, played and duration shows the audio length time

1
javascripthtmlaudiohtml5-audiobandwidth
An idea -> Make a div and put it a javascript click handler. When some click on it, load the audio file with using new Audio(). So after that you can keep in memory with assigning to a variable. See more for details: developer.mozilla.org/tr/docs/Web/API/HTMLAudioElement – Zaphiel
Have you tried to use myAudio.duration in your onclick/play event listener function? – NewToJS
@Sam is this what you're looking for? jsfiddle.net/wjybw5eq – NewToJS
@Sam If you would like the duration to update "Time left" then maybe this will also fit your needs? jsfiddle.net/wjybw5eq/1 Not 100% sure if this is what you're looking for though. – NewToJS
@NewToJS, Awesome! I can confirm that BOTH your jsfiddles solve my puzzle! The page loads WITHOUT loading anything from the file, except when clicking play then the HTTP request is sent, file is loaded and duration is shown. Now please migrate your jsfiddle links to an answer below (and remove all your comments here) sothat I can upvote and accept your answer! – Sam

1 Answers

2
votes

In order to retrieve the length only, you should preload the metadata (ensure there is metadata on the files in question of course first). But this will load only the length details and not the actual file

<audio src="http://labs.qnimate.com/files/mp3.mp3"  preload="metadata" type="audio/mpeg"></audio>

From mozilla docs on audio :

preload

This enumerated attribute is intended to provide a hint to the browser about what the author thinks will lead to the best user experience. It may have one of the following values: none: indicates that the audio should not be preloaded; metadata: indicates that only audio metadata (e.g. length) is fetched; auto: indicates that the whole audio file could be downloaded, even if the user is not expected to use it; the empty string: synonym of the auto value. If not set, its default value is browser-defined (i.e. each browser may have its own default value). The spec advises it to be set to metadata.

Hope this helps