While attempting to create a blackjack game, I encountered an issue. When I click the hit button, a king card picture should appear along with a sound. However, the sound does not play and the error message Failed to load resource: net::ERR_FILE_NOT_FOUND is displayed. Here is a link to the image that should be loaded: https://i.stack.imgur.com/P5ZoQ.jpg
Here are the paths to the project folder: https://i.stack.imgur.com/CWXuA.png
I have tried changing the source path formats like /statics, ../../statics, but unfortunately, it did not resolve the issue.
Below is the relevant part of my code for better understanding:
HTML section
<div class="playerContainer">
<div class="playerChoice">
<h1 id="playerScore"> You: <span id="playerResult"> 0 </span> </h1>
</div>
<div class="botChoice">
<h1 class="dealerResult"> Computer: <span id="dealerResult"> 0 </span> </h1>
</div>
</div>
<div class="controls">
<button id="standBtn"class="btn-lg btn-warning mr-2">stand</button>
<button id="dealBtn"class="btn-lg btn-danger mr-2">deal</button>
<button id="hitBtn"class="btn-lg btn-primary mr-2">hit</button>
</div>
JS section
let blackJackGame = {
'you' : {'scoreSpan':'#playerResult','div': '.playerChoice', 'score': 0},
'bot' : {'scoreSpan':'#dealerResult','div': '.botChoice', 'score': 0}
};
const YOU = blackJackGame['you'];
const BOT = blackJackGame['bot'];
const hitSound = new Audio('../statics/sounds/Ta Da-SoundBible.com-1884170640');
document.querySelector('#hitBtn').addEventListener('click',blackJackHit);
function blackJackHit() {
let cardImage = document.createElement('img');
cardImage.src = 'B:/Html, CSS & Js/js excersing/photos/KS.png'
document.querySelector(YOU['div']).appendChild(cardImage);
hitSound.play();
}
The error appears in this line of JS code:
const hitSound = new Audio('../statics/sounds/Ta Da-SoundBible.com-1884170640');