Adding Audio to a HTML Webpage
Audio can enhance a user’s experience by invoking a mystic quality to a horoscope-reading application. It can give a notion of nostalgia by playing a TV theme song or add silly and playful aspects to a webpage designed for children. Done incorrectly, however, can turn an impressive flare into a rude annoyance. Below I will overview the simple steps in adding an audio element to your HTML with some notes on styling and etiquette.
- Use an <audio> tag-
An audio tag works just fine for modern day audio on webpages. It is supported on most browsers except Internet Explorer 8 as of 2020. It can play .mp3 files on all browsers, .wav (Not on Internet Explorer) and .ogg (Not on Internet Explorer and Safari.) You can add multiple <source> tags inside the <audio> tag to list multiple file formats. Such is the case if you want to play a .ogg file but are using Internet Explorer so you want to add a backup .mp3 file.
<audio controls>
<source src="sound.ogg">
<source src="sound.mp3">
</audio>2. Attributes -
The audio tag has several attributes you can use to control the audio. The src attribute is the file where you are getting the audio from. Make sure to put the path URL there.
The controls attribute is used to display the audio player on your page.
It is not recommended to have an audio file play upon loading your page without the ability to for the user to pause or turn it down. Modern webpage development is veering away from this as the audio can be seen as an annoyance. You many also find your audio only plays upon load, sometimes. Which is not what you want. If the audio controls are there the user knows they can play it.
The loop attribute will keep the audio file playing over and over again.
For a complete list of all the audio attributes visit. https://www.w3schools.com/tags/tag_audio.asp.
3. Styling -
As of now, styling for the audio player is extremely limited. The only CSS properties you can change are width, box-shadow, border-radius and transform. However, you can implement some more style changes on the player using -webkit-media-controls as a CSS selector.
audio::-webkit-media-controls-panel
audio::-webkit-media-controls-mute-button
audio::-webkit-media-controls-play-button
audio::-webkit-media-controls-timeline-container
audio::-webkit-media-controls-current-time-display
audio::-webkit-media-controls-time-remaining-display
audio::-webkit-media-controls-timeline
audio::-webkit-media-controls-volume-slider-container
audio::-webkit-media-controls-volume-slider
audio::-webkit-media-controls-seek-back-button
audio::-webkit-media-controls-seek-forward-button
audio::-webkit-media-controls-fullscreen-button
audio::-webkit-media-controls-rewind-button
audio::-webkit-media-controls-return-to-realtime-button
audio::-webkit-media-controls-toggle-closed-captions-button
Another option would be to not display the controls on the audio tag and create your own using javascript or js frameworks such as MediaElement.js to build custom looking audio players.
That is all you need to add audio to your HTML webpage. If you would like to dive a bit deeper please visit the links below.
