javascript - 将声音添加到javascript以在输入的单词正确时播放

Question

我正在制作一个基本的 html 和 javascript 应用程序，用户必须在空白处输入单词并按下提交按钮。如果所有单词都正确，我希望播放一些音频并弹出一个警告以表示祝贺。如果它们不正确，我希望播放音频并提示说对不起。

但是，无论我尝试什么，总是弹出警报，直到它消失才播放声音。有没有办法让声音在警报出现之前播放？

HTML:

<pre id="poem">
<b><u>Social Media</b></u></br>
Relax yourself,
As I <span id = "word1" contenteditable>______</span>
through your mind
Scroll down the pages
of your spine
Reading every word 
and thought on
your <span id = "word2" contenteditable>____</span> like a <span id = "word3" contenteditable>____</span>
Stumbled Upon 
you then <span id = "word4" contenteditable>_______</span> onto
your looks--IGuess
I'm <span id = "word5" contenteditable>______</span> into you
You're my one
and only <span id = "word6" contenteditable>________</span>

Will you <span id = "word7" contenteditable>______</span> me?
</pre>

<button id = "submit" onclick = "isCorrect()"> submit </button>

JS:

function isCorrect(){
    var word1 = document.getElementById("word1");
    var word2 = document.getElementById("word2");
    var word3 = document.getElementById("word3");
    var word4 = document.getElementById("word4");
    var word5 = document.getElementById("word5");
    var word6 = document.getElementById("word6");
    var word7 = document.getElementById("word7");
    var audio = new Audio('sound_files/success.mp3');

    font(word1, word2, word3, word4, word5, word6, word7);


    if (word1.innerHTML == "digg" && word2.innerHTML == "face" && word3.innerHTML == "book" && word4.innerHTML == "tumbled" && word5.innerHTML == "linked" && word6.innerHTML == "interest" && word7.innerHTML == "follow")
    {
        audio.play();
        alert("Congratulations! You got all of the words right.");
    }
    else
    {
        audio.play();
        alert("Sorry! Please check the red coloured words as these are still incorrect. Also make sure you have entered words into all of the spaces.");
    }
}

Answer 1

你可以做类似的事情(这就是我刚才使用的)

<!-- HTML -->
<audio id="music" src="mymusic.mp3" preload="auto"></audio>


//Javascript
if (word1.innerHTML == "digg" && word2.innerHTML == "face" && word3.innerHTML == "book" && word4.innerHTML == "tumbled" && word5.innerHTML == "linked" && word6.innerHTML == "interest" && word7.innerHTML == "follow")
{
    document.getElementById('music').play();
    alert("Congratulations! You got all of the words right.");
}
else
{
    document.getElementById('music').play();
    alert("Sorry! Please check the red coloured words as these are still incorrect. Also make sure you have entered words into all of the spaces.");
}

如评论中所述，您可能需要查看一些库，其中一些可以帮助您。