#javascript #html #image #audio
#javascript #HTML #изображение #Аудио
Вопрос:
У меня есть задача под рукой, и я не могу понять, как это сделать. Я собираюсь провести тест, в котором игрок получает звук и должен угадать инструмент, щелкнув по его изображению. Для воспроизведения звука вы нажимаете кнопку, которая воспроизводит случайный звук из 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" />";
}
Есть идеи, как это сделать?
А также, если у вас есть какие-либо другие советы, пожалуйста, скажите мне.
Комментарии:
1. Может быть, использовать mapper?
Ответ №1:
Вы можете запомнить правильный ответ, поместив его переменную в более высокую область видимости.
Затем вы можете проверить, совпадает ли идентификатор нажатой кнопки со случайным звуком.
Наконец, вы можете использовать звуковые теги и изменять источник для воспроизведения звука — вместо использования тега 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
Комментарии:
1. Я понял это. Я уверен, что это работает, но я все равно не смог заставить это работать. Думаю, я неправильно вставил это на страницах. Не могли бы вы помочь мне больше? Извините, что я такой нуб
2. Я почистил код и поместил рабочий пример на JSFiddle 🙂
3. большое вам спасибо. Я вставил это. Но не смог заставить это работать. У вас есть время просто проверить, нет ли моих ошибок? Это мое законченное кодирование, и если мне чего-то не хватает, что мне нужно вставить, скажите мне, плиз. Оцените это. Спасибо! Вот ссылка на мою версию: jsfiddle.net/Triotrix/7awq30v6/9 . Если вам нужны файлы, я могу отправить их вам
4. Ваш проект действительно работал, но вы забыли выбрать случайный звук при нажатии кнопки. Я немного почистил ваш код: jsfiddle.net/7vL5ma9q/6