创建函数以从Javascript中的变量列表创建函数

Question

Apologies if the title is off, I can't possibly think of how to word it.

I am making a chrome web app and It is a sound board of sorts. Right now to define the audio and listen to a button click I have been doing it like this

//Variables for creating audio loads//
var heyboosong = new Audio();
var ricksong = new Audio();
var rapgod = new Audio();

//stopfunction has a button on the html that goes and will pause the sound playing. right now it's a list of every sound. I need to change it to just pause anything that plays//

function stopmusic() {
    heyboosong.pause();
    ricksong.pause();
    rapgod.pause();
//audio functions to listen to the buttons and make sure they are clicked, if so then wohoo sound//

function myboo() {
    heyboosong.src = "mp3/myboo.mp3";
    heyboosong.play();
}
document.getElementById('myboobutton').addEventListener('click', myboo);

    function rickplay() {
    ricksong.src = "mp3/rick.mp3";
    ricksong.play();
}
document.getElementById('rickbutton').addEventListener('click', rickplay);

function rapgodplay() {
    rapgod.src = "mp3/rapgod.mp3";
    rapgod.play();
}

Now this works all fine and dandy but It's a pain in the but. I have over 100 different sounds, not just these three listed. So I have to type everything out each time. Is there anyway I could condense this, with either Jquery or some other method?

Answer 1

I don't know if it will work but it will give you some ideas. If you can store the song title in the variable, I think it will work.

var mySong = new Audio();

function stopmusic() {
  mySong.pause();
}

function getSong(title) {
   mySong.src = "mp3/"+ title +".mp3";
   mySong.play();
}

document.getElementById(title+'button').addEventListener('click', title);