Добавление звука в JavaScript для воспроизведения, когда введенное слово является правильным

Question

Я делаю простое приложение html и javascript, в котором пользователь должен вводить слова в пустые места и нажимать кнопку отправки. Если все слова верны, я хочу воспроизвести звук и всплыть предупреждение, чтобы поздравить меня. Если они неверны, я хочу, чтобы звук воспроизводился, а в извещении извинялись.

Однако, независимо от того, что я пытаюсь, всегда выскакивает предупреждение и звук не воспроизводится, пока не исчезнет. Можно ли воспроизвести звук до того, как появится оповещение?

HTML:

<code><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?

submit

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

И, как сказано в комментариях, вы можете проверить некоторые библиотеки, некоторые из них могут помочь вам в этом.