HTML5 - SPLessons

HTML5 Audio

Chapter 11

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML5 Audio

HTML5 Audio

shape 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

Audio

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

Browser Support

shape Description

HTML5 Media Player is supported by all the latest browsers.Following are the browser versions supported by HTML5.

HTML5 Audio Types

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

HTML5 Attributes

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

Example of HTML5 Audio

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

<!DOCTYPE html>
<html>
   <body>
      <audio controls>
         <source src="horse.ogg" type="audio/ogg">
         <source src="horse.mp3" type="audio/mpeg">
      </audio>
   </body>
</html>

Result
By running the above code in a preferred browser following output is obtained.

shape Examples

The code below is used to demonstrate the Custom made audio player by using HTML5 and JavaScript as shown below.

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

Result
By running the above code in a preferred browser following output is obtained.


Summary

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