Double-click autoplay to add the code autoplay="". To enable autoplay, place your cursor after the code controls="controls" and press the spacebar to activate HTML5 code hints. preload begins downloading the audio file when the page is opened, even before the Play button is clickedsomething that's not relevant if you enable autoplay, but, when autoplay isn't enabled, preload allows the audio file to launch more quickly when a visitor clicks the Play button in the player. autoplay launches the audio file immediately when the page is opened. In addition to displaying a controller, other significant HTML5 Audio parameters are autoplay, loop, and preload. We also defined a source fileagain, with the help of code hints and linking features in the HTML5 Pack. We added the controller parameter by inserting the code controls="controls" into the code we generated (with the help of the HTML5 Pack's HTML5 code hints) in the previous set of steps. That controller is rather minimalist, but it provides a Play/Pause button and a mute button, as well as displaying a scrubber that a listener can use to fast-forward or move manually through the audio playback. We've already defined one parameter for the HTML5 Audio elementwe displayed a controller. You can get this information by listening to the "canplaythrough" event this event is called by the User Agent once it estimates that if playback were to be started now, the media resource could be rendered at the current playback rate all the way to its end without having to stop for further buffering.Īudio = document.createElement( " audio") Īudio.Defining Audio Display and Play Parameters Defining Audio Display and Play Parameters While this property is great for the initialization phase, you might also need to know when the browser actually downloaded the audio clip and is ready to play it. For debug purposes, you can simulate new calls and disable the local cache by checking the "Always refresh from sever" menu. You can preview the impact over the network of these three options by running this page using the F12 Developer Tools (Network Tab). Note that when you set the src property of the audio element programmatically, the browser will set the preload property – unless otherwise specified – to "auto." For this reason, if your scenario needs a different value, make sure to specify it in a line of code before setting the src. If you are building a game, this approach is probably the best one, as it allows you to preload all the audio clips before actually starting the game experience. "auto": hints to the user agent that the user agent can put the user's needs first without risk to the server, up to and including optimistically downloading the entire resource.This option is recommended if you are building an audio player control and you need basic information about the audio clip, but don’t need to play it yet. "metadata": hints to the user agent that the author does not expect the user to need the media resource, but that fetching the resource metadata (dimensions, duration, etc.) is reasonable.Once the user plays the file (either through the default visual controls or the JavaScript methods load() or play()), the browser will start fetching the audio stream. If your scenario is a podcast blog with an audio file for each post, this option works particularly well, as it reduce the initial preload bandwidth. "none": hints to the user agent that either the author does not expect the user to need the media resource, or that the server wants to minimize unnecessary traffic.The HTML5 specification describes a preload property with three possible values: Once you have your audio element, you can choose the best preloading strategy. Here, for instance, is the setting on Internet Information Services (IIS). Also, if you are hosting the audio files on your server, remember to register the MIME type for mp3 files ("audio/mpeg") on the server side. However adding the audio element to the page will allow you to display the default control bar.Īlthough not covered in this post, you can support more than one audio file format. Note that you can play an audio element generated by JavaScript even if it’s not been actually added to the DOM tree (like in the code snippet above). The third approach (less recommended) consists in embedding the audio files as data-uri in the page, reducing the number of requests to the server. The second approach gives you more flexibility and better management of the network flow, as it defers the loading of the audio clip to a specific time during the application lifecycle. The first approach allows you to initialize the audio components during the page load.
0 Comments
Leave a Reply. |