Home » Tutorials » HTML5/CSS3 » Insert HTML5 audio in your website

Insert HTML5 audio in your website

html5 audio

Before HTML5, it was very hard to embed audio in your website. In most cases, you had to use flash.

Now thanks to the <audio> element, creating an audio player for your website is much easier.

In this tutorial I will show you how to embed sounds in a web page. We will also take a look at how to toogle play/pause with one button by using simple jQuery.

DEMO

How HTML5 Audio Works

The audio element is simple to use.

<audio src="some-song.mp3"></audio>

Just insert the full url to the sound file between the quotes.

To make the sound start automatically use the autoplay attribute.

<audio autoplay> 
  <source src="sound1.mp3">
</audio>

You can also make the sound repeat again and again by using the loop attribute. It can be useful in creating an online game for example, where you want the music to play endlessly.

Adding controls to our audio player

Sometimes it is nice to add controls, so that user can play,pause or mute the music.

audio player

Advertisement

Keep in mind that the controls will look and behave different in each browser.

This is the code for a looping html5 audio player with controls:

<audio controls loop>
<source src="sound1.mp3">
</audio>

You can also use two more attributes:

  • muted – Specifies that the audio output should be muted
  • preload – Specifies if and how the audio should be loaded when the page loads. For example if you set preload=”none”, the browser will not load the audio file on page load.

Play/pause music with one button using jQuery

All we need is a speaker icon

play sound icon

and some code.

The HTML:

<a id="mtoogle" style="cursor:pointer;">
<img src="http://ftutorials.com/wp-content/uploads/2013/08/speaker.png"></a>
<audio id="playTune" autoplay>
<source src="sound1.mp3">
</audio>

And the jQuery

<script type="text/javascript">
$('#mtoogle').toggle(
function () {
document.getElementById('playTune').pause();
},
function () {
document.getElementById('playTune').play();
}
);
</script>

Tip: Insert the jQuery library in the head section of your website:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
DEMO

And don’t forget. Most of the users don’t like when opening some website to hear some unrelated sound or music. In most cases that is stressful for them. So you must be very careful when embeding music in your website. Especially if you use the autoplay attribute.

Before HTML5, it was very hard to embed audio in your website. In most cases, you had to use flash. Now thanks to the &lt;audio&gt; element, creating an audio player for your website is much easier. In this tutorial I will show you how to embed sounds in a web&hellip;

Review Overview

User Rating: 4.72 ( 3 votes)
0

About Georgi Dyulgerov

Georgi Dyulgerov

Founder of fTutorials.com - the website aiming to keep you in touch with the latest technologies in the brand. Also a Freelance web developer.

Check Also

Change placeholder color

Style HTML5 Placeholder with CSS

In the previous tutorial, I showed you how to create a responsive HTML5 Mail Form. ...

One comment

  1. hey, for anyone out there who can’t get the play/pause button to work: it didin’t work for me because i was pasting the jQuery at the top. When i pasted it at the bottom of the html (but still inside the body tag) it finally worked :) so yeah

Leave a Reply

Your email address will not be published. Required fields are marked *


Loading Facebook Comments ...