Html Play Audio On Image Click

Sun, May 4, 2014

This tutorial details how JavaScriptpt, HTML, and CSS can be used to make a custom HTML5 audio interface. It is divided into three sections.

Definition and Usage. The autoplay attribute is a boolean attribute. When present, the audio will automatically start playing as soon as it can do so without stopping. In this example we will demonstrate how to play a 'click' sound when a link or other element is clicked in HTML pages. A sample code for jQueryMobile is also provided. An MP3 audio file is used play the actual sound. You have to have jQuery in your page for this to work.

1. The Play Button
2. Track Progress
3. Changing Track Position

Here is the code for the audio element that we will be controlling.

PLAY BUTTON

First we will use HTML to create the play button.We will make two CSS classes, play and pause.

1. Play – the background property is a play icon
2. Pause – the background property is a pause icon

CODE FOR CLASSES AND BUTTON

To make our play button function, we write onclick=“playAudio” inside the button’s opening tag. This means the playAudio function is called whenever pButton is clicked. The function toggles between the .play and .pause classes and plays and pauses the audio.

The playAudio function checks if the audio is paused. If the audio is paused we call the audio element’s play function. We clear pButton’s classes and add the pause class.If the audio is playing we pause it and change pButton’s class to play.

That is all the code you need to make a play button that targets the audio element.

Functions like play and pause are part of the HTMLMediaElement’s interface. If you are interested the API is here.

TRACK PROGRESS

Before we can start tracking the progress of the audio, we should modify our HTML. Instead of just having a play button, we will create an audio player. We will nest the button, a timeline, and a playhead inside of a div whose id will be audioplayer.

Here is the HTML and CSS. You should also add the float:left property to the play button.

The audio player should look something like this

The next step is to write JavaScript that will move the playhead as the track advances. This is accomplished by adding an event listener for timeupdate that triggers a function that moves the playhead the appropriate amount. In order for time update to work we will also need to get the duration of the audio file. The code is also below.

CHANGING TRACK POSITION

There are two ways that we will allow users to change the track position.

• Clicking on the timeline
• Dragging the playhead

Html Play Audio On Image Click Check

The first method is accomplished by listening for clicks on the timeline, calculating the click’s position as a percent of the timeline’s width, and updating the playhead and track positions.

The code above adds an event listener to the timeline. If the timeline is clicked, this function fires which moves the playhead to the click position and updates the track’s current time.

The moveplayhead function works by changing the playhead’s left margin. The left margin controls the space between the left side of the timeline and the playhead. To calculate the correct left margin value, the x-coordinate of the click event is subtracted by the timeline’s left offset. The left offset is calculated with getPosition.

The conditionals are necessary if the you want to support playhead dragging. If you don’t, just set the playhead’s left margin to newMarginLeft, as any click will be inside the timeline.

The codepen below puts everything together.

See the Pen HTML5 Audio Player by Alex Katz (@katzkode) on CodePen.

If you are interested in using multiple audio players on the same page, you can check out my code here – Multiple HTML5 Audio Players.

Description: This script uses HTML5's new audio element to allow you to easily add sound effects to any action on the page, such as when the user clicks or rolls over a link. The script works in all browsers that support HTML5, which currently are IE9+, FF3.5+, Chrome/Safari 3+, and Opera 10.5+. And since it uses HTML5 to play the audio, the entire process is completely native and highly optimized in browsers that support it. Never worry about whether the user has the proper plugin installed again!

Examples:

Moveover any of the links below to hear a sound effect:

Click on the following links to hear a sound effect:

Directions:

Step 1: Add the followingto the <head> section of your page:

It The above code references the following sample sound files, which you can download below:

• whistle.ogg, whistle.mp3
• click.ogg, click.mp3

Html Play Audio On Image Click

Different browsers support different file formats, so it's important to specify multiple versions of the same audio file to cover your bases. For example, Firefox/Chrome/Opera supports the .ogg format while IE9+/Safari supports the mp3 format instead. More information on this below.

Step 2: Add the below sample HTML to your site, which demonstrates adding a sound effect to two groups of links, one group when the mouse rolls over the links, and the other, onclick:

And that's it for installation at least!

More information

Html Play Audio On Image Click Test

To initialize a sound effect for use on your page, at the end of the code of Step 1, call the function createsoundbite():

var uniquevar=createsoundbite('soundfile1', 'fallbacksound', 'fallbacksound2', etc)

Enter a list of sound files that the script should try and play, in that order, depending on what file type the browser supports. uniquevar should be an arbitrary but unique variable name for each new sound effect you define.

The following chart shows which file types the different major browsers support:

In other words, by specifying both a '.ogg' and '.mp3' file inside function createsoundbite(), you should have covered all the major browsers. To convert one audio format to another, you can use an online audio converter such as this one. For more free 'click' related sound clips, check out this site.

Once you've initialized a sound, call the function playclip() to actually play the sound, such as when the mouse rolls over a link:

<a href='#' onMouseover='uniquevar.playclip()'>Mouse over me!</a>