Log in

View Full Version : 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


<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


<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
<!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/_testing/audio-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/_testing/audio-control-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.
tonybabb
01-06-2015, 02:12 PM
Thank you so very much, you make it look easy !

Tony
tonybabb
01-06-2015, 02:12 PM
I didn't see this at all. What browser were you using?
molendijk
01-06-2015, 10:52 PM
I didn't see this at all. What browser were you using?
No problem on my machine either.