Customizing controls for the <audio> tag

**tonybabb** · 01-04-2015, 12:31 PM

Good morning,

I'm trying to create a short list of sound files, each with a <Play> icon beside it, when pressed the mp3 file plays and the icon changes to a <Pause> icon. I have the beginnings of it working but can't figure out two things:

- how I should change the words play/ pause to be icons or images and
- the code I have only works for a single entry and I'd like to have multiple entries on the same page. Below is the html and below that the js I have working so far

Code:

 <audio id="yourAudio" preload='none'>
    <source src='http://dl.dropbox.com/u/1538714/article_resources/song.m4a' type='audio/mpeg' />
</audio>
<a href="#" id="audioControl">play!</a>&nbsp;Song 1<br />
    &nbsp;Song 2<br />
    &nbsp;Song 3<br />

And here is the js I have

Code:

  <script type="text/javascript">
var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};
</script>

The only controls I'd like are Play/ Pause

I'd really appreciate any suggestions on this.

Thanks

**Beverleyh** · 01-04-2015, 06:42 PM

If you put all the control and audio tags into a parent div with an id, you can target that parent div and add the child tags to an array. Then you can increment through the child tags and apply your function to each. Restructure your markup a little bit and you can also target control/audio parings with the nextSibling property

Code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Audio Controls</title>
</head>
<body>

<div id="audio">

<a href="#">Play!</a> : Song 1 - Takin' It All
<audio preload="none">
    <source src="audio_player/audio/takin_it_all.mp3" type="audio/mpeg" />
</audio><br/>

<a href="#">Play!</a> : Song 2 - Too Close
<audio preload="none">
    <source src="audio_player/audio/too_close.mp3" type="audio/mpeg" />
</audio><br/>

<a href="#">Play!</a> : Song 3 - Gettin' Down To Business
<audio preload="none">
    <source src="audio_player/audio/gettin_down_to_business.mp3" type="audio/mpeg" />
</audio><br/>

</div>


<script>
var ctrl = document.getElementById('audio').getElementsByTagName('a');
for(var i = 0; i < ctrl.length; i++){
         ctrl[i].onclick = function(){
		var audio = this.nextSibling;
		while (audio.nodeType != 1){ audio = audio.nextSibling; }
		var pause = this.innerHTML === 'Pause!';
		this.innerHTML = pause ? 'Play!' : 'Pause!';
		var method = pause ? 'pause' : 'play';
		audio[method]();
		return false;
             }
     }
</script>

</body>
</html>

Demo: http://fofwebdesign.co.uk/template/_...io-control.htm

**tonybabb** · 01-05-2015, 01:57 PM

Thank you Beverly (again)

I think I follow what you were doing but couldn't have written it myself! Could I ask how would I change this so that instead of having text for Play & Pause if I used images for play/ pause buttons?

Thanks so much for your time.

Tony

**Beverleyh** · 01-05-2015, 03:13 PM

OK - A version with icons can be found here: http://fofwebdesign.co.uk/template/_...trol-icons.htm

Note the extra markup for the <img> tags, in both the web page body and as script variables.

I also included some CSS to make the alignment look nicer.

**styxlawyer** · 01-05-2015, 05:01 PM

I noticed that the text collapsed on the first click of one of the "Play" icons. I guess this was because the "Pause" icon hadn't been cached, because it never happened again. This could probably be overcome by including the icon width and height inside the image tags or putting both icons into a single file and using an offset.