Can't change variable for playing audio

Question

I am trying to build my site, with lots of sounds in it, for when clicking buttons etc. Up until now I had those audio playing scripts all over the place, and I needed to put them inside 1 script/file, because some of the audio files could overlap, thus hearing no audio.

Here is my test script: HTML code for test buttons

<a href="#" onclick="playSound('moveArrowSnd');">Sound 1</a><br>
<a href="#" onclick="playSound('arcingSnd');">Sound 2</a><br>
<a href="#" onclick="playSound('newMsgSnd');">Sound 3</a><br>
<a href="#" onclick="playSound('openChatSnd');">Sound 4</a><br>
<a href="#" onclick="playSound('closeChatSnd');">Sound 5</a><br>
<div id="soundText">Test</div>

My javascript:

<script>
// Sound index:
playCurrent = new Audio("sounds/startup_complete.wav"); // Sound for when page has loaded

// Source: somefile.js
moveArrowSnd = new Audio("sounds/arrow_slide.mp3");     // Sound for when moving the bottom arrow
arcingSnd = new Audio("sounds/lights_arcing.mp3");      // Sound for showing 5 blue buttons under arrow

// Source: someotherfile.js
newMsgSnd = new Audio("sounds/chat_alert.wav");
openChatSnd = new Audio("sounds/open_chat.wav");
closeChatSnd = new Audio("sounds/close_chat.wav");

function playSound(sound) {
playCurrent.pause();
playCurrent.currentTime = 0;
playCurrent = sound;
playCurrent.play();
document.getElementById("soundText").innerHTML = sound;
}

</script>

-What I am trying to do here, is first of all: stop the last sound from playing. (no problem if it gets cut off in the middle)

-Then I reset the time, but I think I can remove that line, since I want to change the playCurrent value.

-Here my script fails, and where I need help. The "sound" argument/parameter send to this function, contains the variable name, which should be played. But it just doesn't work. If I try to store this argument/parameter in some other variable, it does continue.

-Trying to play the updated sound.

-Change the innerHTML div, just for testing purposes. It doesn't get changed, because there is some kind of error in the problem line.

Question: can someone tell me how I can fix all this? I could do this with alot of if statements, and just stop all possible sounds, and play the correct one. But adding a new sound would mean alot more code, and I think something like this should be able to work... So at the third line of the function, (playCurrent = sound;) I need the playCurrent variable to change to for example "new Audio("sounds/arrow_slide.mp3");". Please help...

Answer 1

Learned a few things about the new Audio part... Fixed problem myself, thnx for helping me out.

<a href="#" onclick="playSnd('sounds/startup_complete.wav');">Sound 1</a><br>
<a href="#" onclick="playSnd('sounds/arrow_slide.mp3');">Sound 2</a><br>
<a href="#" onclick="playSnd('sounds/lights_arcing.mp3');">Sound 3</a><br>
<a href="#" onclick="playSnd('sounds/chat_alert.wav');">Sound 4</a><br>
<a href="#" onclick="playSnd('sounds/open_chat.wav');">Sound 5</a><br>
<a href="#" onclick="playSnd('sounds/close_chat.wav');">Sound 6</a><br>

<script>

sound = new Audio();

function playSnd(soundSrc) {
sound.src = soundSrc;
sound.play();
}
</script>

Answer 2

A better solution for me is using an array in the script part. The HTML has test buttons, but those buttons get placed in different files, so keeping track of them all, could become difficult. Thats why I changed it to this:

<a href="#" onclick="playSound('moveArrowSnd');">Sound 1</a><br>
<a href="#" onclick="playSound('arcingSnd');">Sound 2</a><br>
<a href="#" onclick="playSound('newMsgSnd');">Sound 3</a><br>
<a href="#" onclick="playSound('openChatSnd');">Sound 4</a><br>
<a href="#" onclick="playSound('closeChatSnd');">Sound 5</a><br>

<script>

playCurrent = new Audio(); // Blanc, starting an audio element

// Sound index/array:
soundArray = {
// Source: somefile.js
moveArrowSnd:"sounds/arrow_slide.mp3",      // Sound for when moving the bottom arrow
arcingSnd:"sounds/lights_arcing.mp3",       // Sound for showing 5 blue buttons under arrow

// Source: someotherfile.js
newMsgSnd:"sounds/chat_alert.wav",
openChatSnd:"sounds/open_chat.wav",
closeChatSnd:"sounds/close_chat.wav",
};

function playSound(sound) {
playCurrent.src = soundArray[sound];
playCurrent.play();
}

</script>