This post shows how to toggle (play/pause) sound by JavaScript manipulation ofonclick event of a DOM element. Browser support of HTML5 audio tag is a must inthis example.

1. Html Play Audio On Image Click Check
2. Html Play Audio On Image Click

Definition and Usage. The play method starts playing the current audio. Tip: This method is often used together with the pause method. Tip: Use the controls property to display audio controls (like play, pause, seeking, volume, etc, attached on the audio). HTML5 is likely to put an end to audio plug-in such as Microsoft Windows Media player, Microsoft Silverlight, Apple QuickTime and the infamous Adobe Flash. If you don't see a audio player control in the dotted box above, your web browser probably don't support the audio tag. Above is a gallery of audio players by major web browsers.

Source Code for Demo:

When you click on the button element, the sound will be played. If the elementis clicked again, the sound will be paused. To toggle sound like this, a HTML5audio element is embedded in the HTML document, and not displayed on screen.Every time the button element is clicked, the toggleSound function will beexecuted. The toggleSound function checks if the audio element is paused.If the audio element is paused, call play() to play sound. Otherwise callpause() to stop playing.

References:

What are HTML5 audio and HTML5 video

With the release of HTML5 A whole bunch of new elements where introduced including the audio and video elements. The huge advantage of these new elements is that most browsers today can understand these new HTML5 elements, this is great since Adobe is no longer supporting flash for mobile. Also since the audio and video are now a real element on the page and not some flash addon, you have an even greater level of control over these media elements.

For those of you saying “what about browsers that don’t support the audio or video element?” these browsers treat them like a div, and most of the information is lost, however since it reads it like a div, you can specify a fallback inside the tag. Below is an example of how to mark up an html5 audio or html5 video element. I’m only going to show the audio element, however the process is identical for both elements. Below is a simple example of how to markup an audio or video element.

Most commonly the fallback is a flash version of the video or audio. One of the nice things about the audio and video element is that if it sees a valid source, then it will ignore the fallback content, it only triggers in older browsers. You can also specify multiple sources (more for the video element where there are still a few competing standards). and the browser will select the first one that it can understand.

The HTML for the Playlists

In addition to the code above, we need to add a list of songs. We like to do it by using an unordered list, although you could equally use an ordered list to get track numbers. You could go into more detail with the track length, or more detailed information, however for the purposes of this tutorial, I’m keeping it simple.

As for HTML, that’s it. Add a bit of CSS to get it styled

And now for the big part, the javascript. The Javascript for HTML5 Playlists Now that we have the base, lets talk about the javascript. HTML5 Audio and HTML5 Video have an API that you can hook into with javascript that lets you manipulate the video (or use the video to manipulate your html). In this particular instance, we are going to use the ENDED event as well as play() and volume() as well as load().

Html Play Audio On Image Click Check

So what does all that do?

Html Play Audio On Image Click

Well we start off by declaring our global variables, and than initialize the audio element. We set the current index to 0, and using jquery (though you could use getElementByID as well) get the audio (or video) element we want to control, the playlist find the tracks, get the total number of tracks (-1 because the tracks are a 0 index array). We set the volume to 10% (so that the sound doesn’t blast our visitors), and than start playing our audio or video. Note that automatically paying audio and video is not really a good practice (unless for video you have volume at 0) as people don’t like getting surprised with sound and than have to hunt it down to mute it. Next we set up our listeners, we listen for clicks in our playlist, as well as for when our track is ended (using the new ended event) so that we can play the next track. In this example we have it looping, so when it gets to the end of the play list, it goes back to the beginning. finally we have a function that actually loads up and plays the song on the playlist. It gets the source from the link, changes the class to active (for css styling), loads the file (.load() is not to be confused with the jquery .load() method, the html5 .load() api hook is so that the html5 audio or video element knows to start loading a new resource) and than play the newly loaded resource. And that is it for HTML5 Audio and HTML5 Video Playlists. You can see the example here