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.\u00a0 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.\u00a0 Completely unacceptable and he never had bothered to notify me, so I had no clue.<\/p>\n
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.\u00a0 I used inline event handling that was hard-coded into the HTML.\u00a0 This is not the best way to handle JavaScript anymore, so I decided to rewrite the code with a slightly better method.\u00a0 It ended out being pretty simple but did have a trick that needed to be solved.<\/p>\n
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.\u00a0 Here is the code I used to play each clip and stop the previous clips.<\/p>\n
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.\u00a0 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.\u00a0 For some reason, every time I added a function to stop audio, it would stop all audio and the buttons would quit working.\u00a0 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.\u00a0 Not the most elegant solution but it did what I wanted and used the same code that was already working.<\/p>\n
<audio id=”sound1″ src=”sound\/clientIntheShop_f.mp3″ preload=”auto” autobuffer><\/audio>
\n<audio id=”sound2″ src=”sound\/generations_sb_f.mp3″ preload=”auto” autobuffer><\/audio>
\n<audio id=”sound3″ src=”sound\/lifeToProject.mp3″ preload=”auto” autobuffer><\/audio>
\n<audio id=”sound4″ src=”sound\/listenToWood_f.mp3″ preload=”auto” autobuffer><\/audio>
\n<audio id=”sound5″ src=”sound\/makingCustomPiece_f.mp3″ preload=”auto” autobuffer><\/audio>
\n<audio id=”sound6″ src=”sound\/silence.mp3″ preload=”auto” autobuffer><\/audio><\/p>\n<div id=”sounds”>
\n<form width=”50px”>
\n<input type=”button” id=”soundbtn1″ value=” “>
\n<input type=”button” id=”soundbtn2″ value=” “>
\n<input type=”button” id=”soundbtn3″ value=” “>
\n<input type=”button” id=”soundbtn4″ value=” “>
\n<input type=”button” id=”soundbtn5″ value=” “>
\n<\/form>
\n<\/div><\/p>\nvar audio1;
\nvar audio2;
\nvar audio3;
\nvar audio4;
\nvar audio5;
\nvar audio6;<\/p>\ndocument.getElementById(“soundbtn1”).onclick = function() {playAudio1()};
\ndocument.getElementById(“soundbtn2”).onclick = function() {playAudio2()};
\ndocument.getElementById(“soundbtn3”).onclick = function() {playAudio3()};
\ndocument.getElementById(“soundbtn4”).onclick = function() {playAudio4()};
\ndocument.getElementById(“soundbtn5”).onclick = function() {playAudio5()};
\ndocument.getElementById(“soundbtn6”).onclick = function() {playAudio6()};<\/p>\n\/* 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. *\/<\/p>\n
document.addEventListener(‘play’, function(e){
\nvar audios = document.getElementsByTagName(‘audio’);
\nfor(var i = 0, len = audios.length; i < len;i++){
\nif(audios[i] != e.target){
\naudios[i].pause();
\naudios[i].currentTime = 0;
\n}
\n}
\n}, true);<\/p>\n\/* These functions play the associated audio clips that are called by the buttons identified with their unique ID’s\u00a0 *\/<\/p>\n
function playAudio1(){
\naudio1 = document.getElementById(‘sound1’);
\naudio1.play();
\n}
\nfunction playAudio2(){
\naudio2 = document.getElementById(‘sound2’);
\naudio2.play();
\n}
\nfunction playAudio3(){
\naudio3 = document.getElementById(‘sound3’);
\naudio3.play();
\n}
\nfunction playAudio4(){
\naudio4 = document.getElementById(‘sound4’);
\naudio4.play();
\n}
\nfunction playAudio5(){
\naudio5 = document.getElementById(‘sound5’);
\naudio5.play();
\n}
\nfunction playAudio6(){
\naudio6 = document.getElementById(‘sound6’);
\naudio6.play();
\n}<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"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.\u00a0 Somewhere along the line, the code became deprecated and now instead of playing each singularly as the button was clicked, all the sounds were … <\/p>\n