HTML5 Audio

Prev
Next

HTML Audio Tag

Using HTML5, you can use the audio files like MP3, OGG or WAV files without using a flash.

Now, to embed the audio sound, you just need to embed the HTML5 <audio> element which is introduced as part of HTML5. This element comes with controls attribute which adds other audio control features like play button, pause button, time-frame, volume button, download button etc.

You need to set the path of the file using the <source> element and src attribute where the audio file will reside.

HTML5 Audio tag

Syntax:
<audio controls>
   <source  src=”path_url/file.type”  type=”audio/file_type”>
</audio>;

Basic example of HTML Audio Tag

<audio controls>
  <source src="html-audio.mp3" type="audio/mpeg">
</audio>
Run the Code

Audio Autoplay

Although, we do not recommend to use the autoplay feature of HTML5 as on fewer occasions, it will annoy the users but you can still use it based on your requirement. 

Just code the autoplay attribute along with the controls attribute when you use the <audio> element to automatically play the audio file when the user comes to the web page which embeds the audio file.

Example

<audio controls autoplay>
  <source src="html-audio.mp3" type="audio/mpeg">
</audio>
Run the Code

HTML5 Audio Auto Loop

Code the loop attribute along with the <audio> element to start the audio sound again and again in a loop.

Example of Audio Auto Loop

<audio controls loop>
  <source src="html-audio.mp3" type="audio/mpeg">
</audio>
Run the Code

HTML5 Audio Controls Style

If you are familiar with CSS(Cascading Style sheets), then it is better to style your audio in your HTML document. 

In the example below, we are setting styles like background color, margin, hover effects, box shadow and linear gradients on the <audio> element using CSS.

If you are an absolute beginner and have no idea about CSS, then click on this link to master CSS.

Example

audio {
 background:linear-gradient(to top left, cyan, hotpink, gold);
 margin-top:20px;
 margin-left:20px;
}

audio:hover {
 -webkit-box-shadow: 0px 0px 9px 5px rgba(5,4,5,1);
 -moz-box-shadow: 0px 0px 9px 5px rgba(5,4,5,1);
 box-shadow: 0px 0px 9px 5px rgba(5,4,5,1);
}

.styleit audio::-webkit-media-controls-panel {
 background:linear-gradient(to top left, cyan, hotpink, gold);
}
Run the Code

Audio Autoplay Hidden

The property autoplay=”true” enables the audio sound to play automatically & we are not coding any controls attribute, hence the audio is hidden as well.

If the audio sound does not play automatically in your browser, then click on the lock icon which is at the left side of the url window. Click on the dropdown next to “sound” and select “Automatic (default)” or “allow”.

HTML Audio autoplay Hidden

Example of Audio Autoplay Hidden

<audio autoplay="true" src="html-audio.mp3"></audio>
Run the Code

HTML Audio Volume

To set a particular level of volume at the start, you can simply use JavaScript and set the volume of the audio sound.

The idea is to set an id attribute on the HTML5 <audio> element and use this id as a parameter in the JavaScript function.

Example

<audio controls autoplay id="volumeset">
 <source src="html-audio.mp3" type="audio/mpeg">
 Update your browser. Your browser does not support HTML audio
</audio>
<script>
 var audio = document.getElementById("volumeset");
 audio.volume = 0.6;
</script>
Run the Code

Audio Play and Pause Button

There is a play/pause button which is already present for the audio sound when we use the controls attribute but you can create your own set of play/pause button using JavaScript.

In the example below, we are using a single play/pause button. You can change this to create 2 different buttons for play and pause each. You can also use CSS to style it as well.

Example of Audio Play and Pause Button

<button type="button" onClick="Play()">Play|Pause</button>
<audio controls id="audioval">
  <source src="bensound-guitar.mp3" type="audio/mp3">
</audio>
<script type="text/javascript">
  function Play()
  {
      var myAudio = document.getElementById("audioval");
      if(myAudio.paused)
      {
          myAudio.play();
      }
      else
      {
         myAudio.pause();
      }
  }
</script>
Run the Code

Audio JavaScript

Another way to play audio is by only using JavaScript.

In the example below, the audio automatically plays when you load the web page and this uses simple play() function.

Example

<script>
 var audio = new Audio('html-audio.mp3');
 audio.play();
</script>
Run the Code
Prev
Next
Facebook Twitter Google-plus

Tutorials for all brains!