Playing audio on your website, through HTML5, is a lot easier than you may believe. Just like with playing video, you use a few simple commands and make sure that the audio file formats are compatible with your visitors’ browsers. To do this, you should make sure to save your audio file (mp3 or ogg […]
By Joel Holtzman
Your First HTLM5 Audio Player
Below you will notice a basic audio web player. Click ‘play’ to load the audio file.
Below is the code as well as an explanation as to what each line of code does.
What It All Means
Line one:
Complete Code For Looping Audio Files
Your browser does not support the audio element.
These simple lines of code will give you the power to play audio for your visitors, even if they are on a mobile phone or tablet. Just make sure that when you load your audio, assuming you wish to have multiple versions of your audio file, you are including the lines of code needed for the ‘ogg’ format and ‘mp3’ format. The same logic applies to any other format you may wish to load.
Learning More About HTML5 Audio
To learn more about HTMl5 Audio, as well as learning about more advanced audio players you can use for your website, please review the resources listed below.
Personally, I love Jplayer. I think it is a brilliant piece of software and it can load audio and movies for your website. Check it out here.
Summary
Take a moment to get familiar with HTML 5 audio and see how much fun it is to play with. Whether you wish to load simple audio files or use a more advanced solution like Jplayer, you fill find it liberating to be able to deliver content to your visitors, of all platforms, without having to learn any programming in the process.
Should you need assistance in using Jplayer or if you would like to receive a consultation on how to add audio players to your website, please contact us.
Imagine yourself, on a normal day, opening the browser and visiting a website. You will be amazed by its clean layout, cool animations, and impressive visuals. But how does this work and who is behind all this? Simply put, a front-end developer who wrote the CSS/HTML to convert the designs into a beautiful functioning website. […]