Блог

У меня есть задача под рукой, и я не могу понять, как это сделать. Я собираюсь провести тест, в котором игрок получает звук и должен угадать инструмент, щелкнув по его изображению. Для воспроизведения звука вы нажимаете кнопку, которая воспроизводит случайный звук из 5 выбранных звуков.

Мне нужна помощь в подключении картинки к звуку, чтобы, когда проигрыватель нажимает на картинку, страница знала, правильно это или нет.

Вот мой HTML:

 <header>
  <h1> Hvilket instrument lager lyden? </h1>
</header>

</br>
</br>
</br>

<div class="images">
  </br>
  </br>
  <img src="Vedlegg_V18/fagott.jpg" alt="Fagott bilde" onclick="">
  <img src="Vedlegg_V18/floyte.gif" alt="Fløyte bilde" onclick="">
  <img src="Vedlegg_V18/klarinett.jpg" alt="Klarinett bilde" onclick="">
  <img src="Vedlegg_V18/obo.jpg" alt="Obo bilde" onclick="">
  <img src="Vedlegg_V18/valthorn.jpg" alt="Valthorn bilde" onclick="">
</div>

</br>
</br>

<nav>
  <input type='button' value='Try Random Sound' onclick='playRandomSound();' />
  <span id='player'></span>
</nav>

<footer>
  <p> Laget av Sondre Hennie
</footer>
  

И вот мой javascript:

 var fagottEl = document.querySelector("#fagott");
var floyteEl = document.querySelector("#floyte");
var klarinettEl = document.querySelector("#klarinett");
var oboEl = document.querySelector("#obo");

var valthornEl = document.querySelector("#valthorn");

fagottEL.addEventListener("click", checkSound);
floyteEL.addEventListener("click", checkSound);
klarinettEL.addEventListener("click", checkSound);
oboEL.addEventListener("click", checkSound);
valthornEL.addEventListener("click", checkSound);


function playRandomSound(){
     var sounds = ["Vedlegg_V18/fagott.mp3",
                    "Vedlegg_V18/floyte.mp3",
                    "Vedlegg_V18/klarinett.mp3",
                    "Vedlegg_V18/obo.mp3",
                    "Vedlegg_V18/valthorn.mp3"];

     var soundFile = sounds[Math.floor(Math.random()*sounds.length)];
     document.getElementById("player").innerHTML="<embed src="" soundFile "" hidden="true" autostart="true" loop="false" />";
}
  

Есть идеи, как это сделать?
А также, если у вас есть какие-либо другие советы, пожалуйста, скажите мне.

Вы можете запомнить правильный ответ, поместив его переменную в более высокую область видимости.

Затем вы можете проверить, совпадает ли идентификатор нажатой кнопки со случайным звуком.

Наконец, вы можете использовать звуковые теги и изменять источник для воспроизведения звука — вместо использования тега embed.

HTML

 <h2 id="feedback">Listen to the sound and click a button</h2>
<div id="fagott">fagott image</div>
<div id="floyte">floyte image</div>
<audio id="player" src="">
  

JS

 let randomSound = ""
let fagottEl = document.querySelector("#fagott")
let floyteEl = document.querySelector("#floyte")
let sounds = ["fagott","floyte","klarinett","obo","valthorn"]
let player = document.getElementById("player")
let feedback = document.getElementById("feedback")

function chooseRandomSound(){
  randomSound = sounds[Math.floor(Math.random()*sounds.length)];

  player.src = "Vedlegg_V18/"   randomSound   ".mp3"
  player.play()
}   

fagottEl.addEventListener("click", function(e) {
  checkSound(e)
});

floyteEl.addEventListener("click", function(e) {
  checkSound(e)
});

function checkSound(e){
  if(e.target.id == randomSound) {
    feedback.innerHTML = "Correct!"
  } else {
    feedback.innerHTML = "Wrong, it was a "   randomSound
  }
}

chooseRandomSound()
  

Вы можете попробовать рабочий код на JSFiddle