You could add a property (where you specify the file to be played) and put all buttons in the same class then in the Javascript get all the buttons of that class and then add a eventlistener that plays the file that you get from the property.
If you don't understand i can specify more details! I'm not at the pc right now to test it :(
This code works on the last version of Safari, but I think it should work in any browser:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>soundboard</title>
</head>
<body>
<button class="soundBt" name="xxx.mp3">xxx</button>
<button class="soundBt" name="yyy.mp3">yyy</button>
<script>
window.addEventListener("load", setListeners());
/* this line dinamically adds a method to the String object
* working on the prototype of the object
*/
String.prototype.endsWith = function(suffix) {
return this.indexOf(suffix, this.length - suffix.length) !== -1;
};
var audio = new Audio();
function setListeners(){
var index = 0;
var buttons = document.getElementsByClassName("soundBt");
for (index = 0; index < buttons.length; index++){
var button = buttons[index];
button.addEventListener("click", function(){
var buttons = document.getElementsByClassName("soundBt");
var index = 0;
for (index = 0; index < buttons.length; index++){
buttons[index].style.background = "url(images/play.jpg) no-repeat";
}
if(audio.paused){
var fileToPlay = this.getAttribute("name");
audio.src = fileToPlay;
audio.play();
this.style.background = "url(images/pause.jpg) no-repeat";
}
else{
audio.pause();
this.style.background = "url(images/play.jpg) no-repeat";
}
});
}
}
audio.addEventListener("ended", function(){
var buttons = document.getElementsByClassName("soundBt");
var index = 0;
for (index = 0; index < buttons.length; index++){
var button = buttons[index];
var buttonName = button.getAttribute("name");
var audiosrc = audio.src;
if (audio.src.endsWith(buttonName)){
button.style.background = "url(images/play.jpg) no-repeat";
return;
}
}
});
</script>
</body>
</html>
I tested it in safari, chrome and firefox. I don't use any strange js feature so it should work in any browser that supports the Audio object.
I even tested it against w3c validator and it's valid.
In this way you can add all the buttons you want, specifying the class "soundBt" and setting the filename in the name attribute of the button.
At load the script will look for every button that has class "soundBt" and add a listener to it that plays the file set in the name attribute (you can see the use of the this keyword that works because addEventListener is a method of the button itself). Obviously this code doesn't check if the file exists or if you've set a name attribute in the button. You can do these checks yourself ;)
In this version I added the change background to the play button when the audio is ended, anyway this solution may become really slow if you have a lot of buttons (DOM parsing is heavy). If you have efficiency issues you could try to put all the buttons in a global map where the keys are the filenames (or button names) and the values are the buttons themselves.
Let me know if this works for you!
