By HTML5, you have more power to play sounds and music files in your web pages. There is no need to pay for other players; just keep on, learn and use it easily . . .
Before everything let’s start with a simple example:
<audio src=”1.ogg” controls>
<p>The browser doesn’t support the audio element.</p>
</audio>
The result is:
First open the audio tag and specify the audio source file path. The ‘controls‘ attribute express that the browser must show the standard controls of the sound player; otherwise the element is exist, but can not be seen and the sound is played at background. Before using the audio final closing tag (‘</audio>‘), you can put a message to be shown when the audio element is not supported by the browser.
Two problems exist here; one is about the browser support of the audio element, and the second is its supporting of different audio types. For the first problem, the defined message is shown; but if the file is not loaded (either because of type supporting issue or a problem with the file source), the audio element may not be shown at all or may be loaded and be disabled. In the following table the browsers compatibilities are presented from W3School:
| Browser |
MP3 |
Wav |
Ogg |
| Internet Explorer 9+ |
YES |
NO |
NO |
| Chrome 6+ |
YES |
YES |
YES |
| Firefox 3.6+ |
NO |
YES |
YES |
| Safari 5+ |
YES |
YES |
NO |
| Opera 10+ |
NO |
YES |
YES |
So what should we do to solve the compatibility problem? It is better to use more than one types of your audio as the element source. For example if you provide both ‘Ogg’ and ‘MP3′, or ‘Wav’ and ‘MP3′ simultaneously, you get assured that at least one of them are loaded successfully; but be aware that older browsers may not support audio element at all. To define a multi-source audio element, follow the code below:
<audio controls>
<source src=”1.mp3” type=”audio/mpeg”>
<source src=”1.ogg” type=”audio/ogg”>
<p>The browser doesn’t support the audio element.</p>
</audio>
The sources are come in separated tags, so we can have many of them; if one fails, the next is loaded. For the ‘MP3′ files, the ‘mpeg’ is used as the type. Note that if all types are supported, just the first one is loaded and the others are ignored. The types of the audios are also mentioned in the source tags. It can also get added to our first example main definition tag. If is not mentioned, the browser tries to find the format and plays it.