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.
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.