I'm creating a website for a musician who's website will be checked around the globe, so the compatibility of the reproduction of the audio element is essential.
Therefore I thought about the following to cover all possible browsers:
<audio controls="controls" data-music data-bind-target="{{ fileName }}">
<source src="assets/audio/mp3/fileName.mp3" type="audio/mpeg" />
<source src="assets/audio/ogg/fileName.ogg" type="audio/ogg" />
<source src="assets/audio/webm/fileName.webm" type="audio/webm" />
<source src="assets/audio/wav/fileName.wav" type="audio/wave" />
</audio>
I've seen websites which only insert mp3 and ogg, so I would like to know if I'm taking it too far. I've checked the MDN site regarding the formats but not sure what to follow, therefore I would like the opinion of other developers.
Creating these formats takes no effort so thats not the issue. I would like to know:
- If this helps to make the audio file better cross-browser?
- Does it affect the global performance or not?
- Do all the files download or only the first one which works in the order displayed?
- Which order would you recommend? if it matters...