javascript - 如何连接声音和图像

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

您可以通过将变量放在更高的范围来记住正确的答案。

然后，您可以检查所单击按钮的ID是否与随机声音相同。

最后，您可以使用音频标签并更改源以播放声音-而不是使用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上尝试工作代码