Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Defining Audio Display and Play Parameters
We've already defined one parameter for the HTML5 Audio element—we displayed a controller. 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 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. We also defined a source file—again, with the help of code hints and linking features in the HTML5 Pack.
In addition to displaying a controller, other significant HTML5 Audio parameters are autoplay, loop, and preload. autoplay launches the audio file immediately when the page is opened. loop plays the audio file over and over. preload begins downloading the audio file when the page is opened, even before the Play button is clicked—something 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.
To enable autoplay, place your cursor after the code controls="controls" and press the spacebar to activate HTML5 code hints. Double-click autoplay to add the code autoplay="". There's no need to enter anything between the quotation marks in the code (like "true" or "false")—simply adding the autoplay code enables autoplay.
To enable looping, place your cursor after the code controls="controls" (you can do this whether or not you enabled autoplay), and press the spacebar to activate HTML5 code hints. Double-click loop to add the code loop="loop".
To preload the audio file, place your cursor after the code controls="controls". Again, you can do this whether or not you enabled any other parameter(s). Press the spacebar to activate HTML5 code hints. Double-click on preload, and then double-click on auto to add the code preload="auto"