I'm trying to create an onclick soundboard but I can't seem to get anything to work. I'm new to javascript. I also am unsure if my audio files are actually being linked in the function because VSCode is not even attempting to autofill the file location. the mp3s are located in the project file inside of the assets folder.
<body>
<ul>
<li onclick="playBeat1()"></li>
</ul>
<script type="text/javascript" src="js/main.js"></script>
</body>
///JS FILE///
function playBeat1() {
var audio = new Audio("tone1.mp3");
audio.play();
}
(can't comment) well for starters you need to show the code where your playBeat1() function is being called so that we can help you further. But if that function is the only thing in your code then you need to run the function when an event listener is fired. For example:
document.getElementById("elementNameHere").addEventListener("clicK",function() {
playBeat1();
});
But please note that your audio will not play right away. The user needs to click something before you can start playing audio with javascript. To get around this just place a start button that will reveal the rest of the page.
Also, I noticed your html file is sort of...not right. You need to wright:
<!DOCTYPE html>
<html>
<head>
<title>title here</title>
</head>
<!-- body element here -->
</html>
(just noticed your js file location) assuming that only js files go into the "js" folder, you need to write:
var audio = new Audio("../audioFolder/tone1.mp3");
the ../ will give you access to the folder that your js folder is inside of.