How To Make A Custom Audio Player Using Javascript
Introduction:
In our previous articles we discussed how to add a basic audio player to to a webpage using the HTML5 audio API incorporating the use of the audio tag. See here. This is all well and good but customizing the player is very limited.
The above player image is an example of what we will achieve at the end of this series.You will be able to syle the player in any way that you choose by using your own designed unique skin with different colors etc. or even Different buttons.
Importantly the player should work in on all recent major browsers I have tested the player with Internet explorer,firefox,Google Chrome and Opera. Our code will automatically allow the correct audio file type to be used for specific browsers that do not support the default file type.
Using some Javascript we can call the audio object to play our audio and control the audio, also by tapping in to the new powerful Audio API we can add some great customised properties such as playlists timers visualizers etc. just to name a few, basically we can style our player to look just the way we want.
In this section we will be making our own custom audio player over the next few weeks if you follow all of the stages you will be able to make your own unique custom player by using Javascript for the dynamics, CSS for some styling, we will be creating our own images for the buttons and our own custom player skin. It should be playable across all main browsers.
In this first part we will learn how we can call an audio object to our document and play the audio using simple bare bones Javascript. I will probably provide the complete Javascript code for you to download when I have finaly completed this section.
We can add audio to our Html 5 document by using basic bare bones Javascript to call the audio object. Go straight to the next part of this section to see the code and an explanation of what the code does. Later we will expand on this to add functions to the audio object using Javascript and some CSS, like adding a play/pause button, a mute button a volume control button and a seek bar even a timer etc.
Give this a try. Copy and paste the code to your favorite editor and remember to replace the audio source for your own audio with the correct path save the document and fire up your favorite browser to test. Remember to add the audio file that will play in your browser because certain browsers only support certain audio file types See here for more information about browser file types support. Later on I will also explain how we can add other file type extentions to this script so that you are not limited to just one file type.
Was this helpful?
Please let us know if you require any help or information regarding this subject.
Thanks for viewing.