Toggle Play and Pause on Multiple Audio Files by Clicking Areas on an Image Map
Playing Audio Files Without a Player
There are many solutions available for playing audio, one of my favorites was the Yahoo Media Player. HTML5 introduced the audio tag, which is widely supported. There are also several jQuery media players for websites including jplayer.
I wanted to add a bit of fun to a website by allowing users to play audio by clicking on objects in an image. I know that this is not new, but I have not found any resource that ties up creating an image map linked to multiple areas and audio, controlled using jQuery.
Mapping Areas in an Image - Being Responsive
The fist step was to create defined areas in an image that could be clicked. The co-ordinates of the areas also needed to be recalculated when viewed on different screen sizes, so that the clickable area is correctly updated.
There were four audio samples, each to be mapped to four objects. I tried calculating the co-ordinates of the objects manually, but in the end decided to find an app.
There are several choices available, some are polished and have several functions such as coffee cup, but as I only wanted a basic map I found this simple, effective Online Image Map Editor by Adam Maschek. I chose a simple rectangle shape for the area co-ordinates. Here’s the finished HTML:
There is the image with the usemap=”#my_image”, the four HTML5 audio files along with the map of areas and their co-ordinates.
In order for the image map to be responsive by recalculating the area coordinates to match the actual image size I need an image map re-sizer. Note that some re-sizers are not compatible with Chrome on iOS. I’m using imageMapResizer by David Bradshaw.
In my page scripts, as well as loading the jQuery files, these are included;
Using jQuery to Control the Audio
The controls I wanted to achieve were to play or pause the audio on click of object and pause any other audio that may be playing. This script was placed in a file called audioplay.js:
this was then was called from the page
Thanks to the following resources for their inspiration:
Toggle play pause of multiple audios
Determine which area was clicked
That’s it, the final result can be found at Victorian Carol Singers Hire UK.