My SoundBoard doesnt work! Help!

Question

Hello I stuck making a soundboard, the buttons do not make any sound. How can I fix it?

https://github.com/El-lobo-cimarron/Gay-SoundBoard

Im also new to GitHub, so let me know if you cannot access my file

Answer 1

Good question.

1. First of all, if you use DevTools, to open your index.html, you should see error "unexpected end of input (index.js line 52).

Reason is poor indentation of code block, the }); at line 51 corresponds to addEventListener at line 7, and you have not close the for loop at line 5.

You need to add one more } to close the for loop.

2. After the first fix, console log blank at img click, because of line 47:

default: console.log(buttonByClass);

where buttonByClass is at line 9:

var buttonByClass = this.innerHTML;

Here, don't use this.innerHTML, use event.target.matches(".classname") where classname is the classification added in class of the img element.

3. Lastly, new Audio is asynchronous, you should load them before the user are allowed to interact (add a loading), and in the switch in click event listener, you use the play() method only.

Answer 2

For point 3, you need to use onload properties of Audio object, in another function which runs at window.onload, and stores them into a global object.

Answer 3

You could also use classList.item(2), due to the fact that there is three class items for each image and the last for each is the image name/title.

<img class="col-lg-3 bn happy" alt="happy" src="images/hap-1.png">happy</img>
In this case the classList is
col-lg-3,
bn,
happy

var buttonByClass = this.classList.item(2)

Answer 4

I have created a Pull Request with amendments based on point 1 and point 2.

Answer 5

I see that your updated version is using this.matches(".bn")

You will need to use matches on event.target where event is mouseClickEvent
function (event) {
}

and the argument to matches() is not ".bn", it should be each individual emotion one by one (let go of the switch).

See the code snippet in my pull request above. You can commit it to master branch to see.

Answer 6

Solved, thank you Gordon!