Introduction
Present chapter demonstrates about the HTML5 Audio. Audio is known as the Acoustic Sound produced in computers. Naturally audio file is record of captured sound that can be played back and following are the concepts covered in HTML5 Audio chapter.
- Audio
- Example of HTML5 Audio
Description
HTML5 Audio is used to insert audio file into the web pages. The web page can contain one or more audio files, which are inserted using the
src element. Following are the types of audio tags as shown below.
<audio>The tag describes the sound content
<source>The tag defines the multiple media resources such as video or audio.
Description
HTML5 Media Player is supported by all the latest browsers.Following are the browser versions supported by HTML5.
- Chrome 4.0
- Internet Explorer 9.0
- Mozilla Firefox 3.5
- Safari 4.0
- Opera 10.5
Description
HTML5 audio have the various types of audio files where each type of audio file have its own quality of sound. Following are some types of audio files .
<MP3>MP3 format file supports audio/mpeg media type files.
<Ogg>Ogg format file supports audio/Ogg media type file.
<Wav>Wav format files support audio/Wav media type files.
Description
HTML Audio element have the different types of attributes to control the functionalities of Audio.Following are some of the attributes.
| Attribute | Description |
|---|---|
| autoplay | By using the auto play attribute, it will play the audio file automatically after the data has been loaded. |
| autobuffer | By using the autobuffer attribute, audio starts the buffering automatically. |
| controals | By using the attribute user can control the audio files. |
| preload | By using the attribute the page and audio file get loaded. |
| src | The src attribute defines the url of the audio file. |
Description
The User can create different audi files using HTML5 Audio elements the code below demonstrate creating an audio player by using HTML5 audio element.
[html]<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
</audio>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output is obtained.
Examples
The code below is used to demonstrate the Custom made audio player by using HTML5 and JavaScript as shown below.
[html]
<!DOCTYPE HTML>
<html>
<style>
body{font-family:Verdana;}
span{background:#0000FF; color:#fff;
border-radius:4px;
padding:6px;
box-shadow: 2px 2px 2px #000000;
}
input {background:#FF0000; color:#fff;
border-radius:4px;
box-shadow: 2px 2px 2px #000000;
}
input[type="range"] {
-webkit-appearance: none;
width: 150px;
height: 2px;
background: aqua;
background-position: center;
background-repeat: no-repeat;
margin:10px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
border-radius: 100%;
background: #7310B1;
position: relative;
border: 3px solid aquamarine;
z-index: 3;
cursor: pointer;
}
</style>
<body>
<audio id="audio_custom">
<source src="horse.ogg" type="audio/ogg" id="ogg" />
<source src="horse.mp3" type="audio/mp3" id="mp3"/>
Your Browser cannot play audio!!. Please Upgrade.
</audio>
<div>
<input id="play" type="button" value="Play>>" />
<input id="pause" type="button" value="Pause[0]" />
<span id="duration"> </span>
</div>
<div>
Volume:
<input id="volume" type="range" min="0" max="10" value="5" />
</div>
<script>
// Get the Audio Source form the DOM
var audio = document.getElementById("audio_custom");
// Select play input and then play when clicked
var play_audio = document.getElementById('play');
play_audio.addEventListener('click', function(){
audio.play();
}, false);
// Select pause input and then pause when clicked
var pause_audio = document.getElementById('pause');
pause_audio.addEventListener('click', function(){ audio.pause();
}, false);
// Change the Volume with Volume Controls on Range Input
var volume_audio = document.getElementById('volume');
volume_audio.addEventListener('change', function(){
audio.volume = parseFloat(this.value / 10);
}, false);
// Display the Time Elapsed or Duration
audio.addEventListener("timeupdate", function() {
var TimeElapsed = document.getElementById('duration');
var seconds = parseInt(audio.currentTime % 60);
var minutes = parseInt((audio.currentTime / 60) % 60);
TimeElapsed.innerHTML = minutes + '.' + seconds + 'sec';
}, false);
</script>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser following output is obtained.
Points
- Audio files are available in various formats.
- All formats are not supported by all the browsers.
- The src attribute is optional which may use or not.