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.");
}

正如评论中所说，你可能想查看一些图书馆，其中一些可以帮助你解决这个问题。

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

1 个答案: