Rebuilding Audio Settings

I was recently looking at an older website I had built for a customer and saw that the audio buttons I had built for his site were no longer functioning correctly.  Somewhere along the line, the code became deprecated and now instead of playing each singularly as the button was clicked, all the sounds were playing at once, as the page was loaded.  Completely unacceptable and he never had bothered to notify me, so I had no clue.

This was a site built right at the time the new HTML5 was just coming out, so I built most of the site with older code styles.  I used inline event handling that was hard-coded into the HTML.  This is not the best way to handle JavaScript anymore, so I decided to rewrite the code with a slightly better method.  It ended out being pretty simple but did have a trick that needed to be solved.

Writing the functions to play each audio clip was easy, but figuring out how to stop the previous clip from being played was the tricky part.  Here is the code I used to play each clip and stop the previous clips.

First off, here is the html for the audio files and 5 of the buttons, there is a 6th button that I am not going to show you because it is part of another section and it’s too much code to put here, but it works exactly the same as these ones.  For the 6th button, I wanted it to work as a stop all audio button, but I kept running into problems with calling the stop.  For some reason, every time I added a function to stop audio, it would stop all audio and the buttons would quit working.  It seemed like it was a scope problem, but then I thought about just adding an empty sound file that only lasted a split second and it effectively did what I wanted it to do.  Not the most elegant solution but it did what I wanted and used the same code that was already working.

<audio id=”sound1″ src=”sound/clientIntheShop_f.mp3″ preload=”auto” autobuffer></audio>
<audio id=”sound2″ src=”sound/generations_sb_f.mp3″ preload=”auto” autobuffer></audio>
<audio id=”sound3″ src=”sound/lifeToProject.mp3″ preload=”auto” autobuffer></audio>
<audio id=”sound4″ src=”sound/listenToWood_f.mp3″ preload=”auto” autobuffer></audio>
<audio id=”sound5″ src=”sound/makingCustomPiece_f.mp3″ preload=”auto” autobuffer></audio>
<audio id=”sound6″ src=”sound/silence.mp3″ preload=”auto” autobuffer></audio>

<div id=”sounds”>
<form width=”50px”>
<input type=”button” id=”soundbtn1″ value=” “>
<input type=”button” id=”soundbtn2″ value=” “>
<input type=”button” id=”soundbtn3″ value=” “>
<input type=”button” id=”soundbtn4″ value=” “>
<input type=”button” id=”soundbtn5″ value=” “>
</form>
</div>

var audio1;
var audio2;
var audio3;
var audio4;
var audio5;
var audio6;

document.getElementById(“soundbtn1”).onclick = function() {playAudio1()};
document.getElementById(“soundbtn2”).onclick = function() {playAudio2()};
document.getElementById(“soundbtn3”).onclick = function() {playAudio3()};
document.getElementById(“soundbtn4”).onclick = function() {playAudio4()};
document.getElementById(“soundbtn5”).onclick = function() {playAudio5()};
document.getElementById(“soundbtn6”).onclick = function() {playAudio6()};

/* The following code stops all audio clips from being played by pausing them in their tracks except anything that you physically target by clicking on it. */

document.addEventListener(‘play’, function(e){
var audios = document.getElementsByTagName(‘audio’);
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
audios[i].currentTime = 0;
}
}
}, true);

/* These functions play the associated audio clips that are called by the buttons identified with their unique ID’s  */

function playAudio1(){
audio1 = document.getElementById(‘sound1’);
audio1.play();
}
function playAudio2(){
audio2 = document.getElementById(‘sound2’);
audio2.play();
}
function playAudio3(){
audio3 = document.getElementById(‘sound3’);
audio3.play();
}
function playAudio4(){
audio4 = document.getElementById(‘sound4’);
audio4.play();
}
function playAudio5(){
audio5 = document.getElementById(‘sound5’);
audio5.play();
}
function playAudio6(){
audio6 = document.getElementById(‘sound6’);
audio6.play();
}

Leave a Comment

Your email address will not be published. Required fields are marked *