Как соединить звук и картинку

Question

У меня есть задача, и я не могу понять, как это сделать.Я собираюсь сделать викторину, где игрок получает звук и должен угадать инструмент, щелкнув его изображение.Для воспроизведения звука вы нажимаете кнопку, которая воспроизводит случайный звук из выбора из 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\" />";
}

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

Answer 1

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

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

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

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