Adding Audio to page

This is article all about how to create an audio player to your web page. Notice for those who are far intellectual than I’m, this is the simplest solution. We are going to use browsers own default media player in this example.

Getting started

To use audio player basically you need to use only couple simply lines. But fits you need to have that audio file converted into three different formats, because not all browsers default audio player support mp3-format. You need to have mp3-, aac- and ogg-formats (if you want to be super-sure that all browsers can play it add also wav-format to ensure this).

Audio player

So after you have succesfully converted media files in their formats add those files to your public_html dictionary. Also I recommend making own folder for them, for example music folder. The only difference is that if you put them into the music folder, you need to add music/ before audios file name.
So for further ado, may I present the code for browsers default audio player

<audio controls >
 <source src="music/some_audio_file.mp3" type="audio/mpeg">
 <source src="music/some_audio_file.aac" type="audio/mpeg">
 <source src="music/some_audio_file.wav" type="audio/x-wav">
 <source src="music/some_audio_file.ogg" type="audio/ogg">
 Your browser does not support audio element or you have missing plug-in
 </audio>

And it should look like this in Opera Browser.

Opera audio player

Opera audio player

Other commands

These are the other commands for using audio player. Recommend using some of these carefully because it’s not recommend for auto-playing music. Some might freak out and pull the ethernet caple of because they might thought this is some kind of virus or malware. But here is little list about thinks you should be able to do with it.

  • Autoplay, <autoplay=”autoplay”>
  • Loop, <loop=”loop”>
  • Preload, <preload=”none”> / <preload=”metadata”> or <preload=”auto”>

Conclusion

As you see, making browsers default audio player is quite easy because of HTML5. And if you’re more intellectual than I, you do know that it is possible to make your own media player using flash and using some JavaScript. But even so, making audio player visible is quite achievement so you should be proud of yourself.

**Everyone is permitted to copy and distribute verbatim copies of this license document, but changing it is not allowed. GNU License 3 (link)**

– Tuomas Törmä

Sources

  • Introduction to Web Site Development lectures At Haaga-Helia spring 2013 teacher Mirja Jaakkola.

Leave a comment