{"id":2276,"date":"2015-02-02T13:15:59","date_gmt":"2015-02-02T11:15:59","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2276"},"modified":"2018-06-19T11:16:19","modified_gmt":"2018-06-19T08:16:19","slug":"html5-audio-player-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-audio-player-example\/","title":{"rendered":"HTML5 Audio Player Example"},"content":{"rendered":"

In this example we will present you how to use the HTML5 Audio Player.<\/p>\n

First, we’ll present the <audio \/><\/code> tag and its attributes, for a quick audio integration in your HTML documents.<\/p>\n

And, then we will continue with more advanced usage using JavaScript to interact with the HTMLMediaElement<\/code>.<\/p>\n

[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. The minimal example<\/h2>\n

In order to allow your users to play music directly from the browser you simply have to add the following syntax (Assuming your audio file is located in the files<\/strong> folder).<\/p>\n

\r\n<audio src=".\/files\/audio.ogg">\r\n    <p>Your browser does not support the audio element.<\/p>\r\n<\/audio>\r\n<\/pre>\n
This will only enable audio in your document, but this will not show any player …<\/p>\n
Note : <\/strong>The paragraph inside the audio tag, will be displayed on old browsers that not support the audio tag. You can see the compatibility matrix on the CanIUse Web Site<\/a><\/p><\/blockquote>\n
2. Show the controls<\/h2>\n
The previous example did not diplay the player on the web page. To view the player, simply add the controls<\/code> attribute in the audio tag:<\/p>\n
\r\n<audio src=".\/files\/audio.ogg" controls>\r\n    <p>Your browser does not support the audio element.<\/p>\r\n<\/audio>\r\n<\/pre>\n
This will display the browser’s default player with the default controls.<\/p>\n
\"HTML5<\/a>
Default Audio Player on Firefox<\/figcaption><\/figure>\n
\"HTML5<\/a>
Default Audio Player on Chrome<\/figcaption><\/figure>\n
Here is another way to define the media source:<\/p>\n
\r\n<audio controls>\r\n    <p>Your browser does not support the audio element.<\/p>\r\n    <source src=".\/files\/audio.ogg" \/>\r\n<\/audio>\r\n<\/pre>\n
Note : <\/strong>All the audio format are not supported by all the browser, you can find a compatibility matrix on the Dedicated Wikipedia Web Page<\/a><\/p><\/blockquote>\n
3. Tag Attributes<\/h2>\n
The <audio \/><\/code> Tag accept attributes that will help you to manage the behaviour of the media on your page.<\/p>\n
3.1 Controls<\/h3>\n
This attribute will display the default browser player on the page, with the default controls, those controls are : Play<\/strong> and Pause<\/strong> buttons, Volume<\/strong> control, and the track duration.<\/p>\n
This attribute is used to display the player (as we’ve seen in the previous section).<\/p>\n
You can use it by simply adding the controls<\/code> or controls=\"controls\"<\/code>. It does not matter.<\/p>\n
\r\n<audio controls="controls">\r\n    <p>Your browser does not support the audio element.<\/p>\r\n    <source src=".\/files\/audio.ogg" \/>\r\n<\/audio>\r\n<\/pre>\n
3.2 Autoplay<\/h3>\n
This attribute will start playback once it’s ready.<\/p>\n
So, if you want to start playback on your page without displaying the player, you can do something like that:<\/p>\n
\r\n<audio autoplay="autoplay" >\r\n    <p>Your browser does not support the audio element.<\/p>\r\n    <source src=".\/files\/audio.ogg" \/>\r\n<\/audio>\r\n<\/pre>\n
3.3 Loop<\/h3>\n
With this attribute, the audio will play again once it’s finished.<\/p>\n
\r\n<audio loop="loop" autoplay >\r\n    <p>Your browser does not support the audio element.<\/p>\r\n    <source src=".\/files\/audio.ogg" \/>\r\n<\/audio>\r\n<\/pre>\n
This will start playback automatically, and loop at the end of the media, it will start again.<\/p>\n
3.4 Preload<\/h3>\n
This attributes will give a hint to the browser on how to treat the media file.<\/p>\n
This attribute accept the following values:<\/p>\n