如何在 javascript 上播放每个问题的音频文件

Question

变种问题= []; var images = {} 因此，“questions”数组内部有另一个数组可以调用“images”数组这里的问题是如何调用“音频数组”我已经为音频制作了一个数组但它似乎不起作用 var声音 ={}

我还尝试了另一种方法，将 html 元素放入变量数组中，但仍然无法正常工作

HTML css

<!DOCTYPE html>
<html>
   <head lang="en">
      <meta charset="UTF-8">
      <title>Picture Quiz</title>
      <style>
         body {
         background-color: #eeeeee;
         }
         .grid {
         width: 68%;
         height: 520px;
         margin: 0 auto;
         background-color: #fff;
         padding: 10px 50px 50px 50px;
         border-radius: 50px;
         border: 2px solid #cbcbcb;
         box-shadow: 10px 15px 5px #cbcbcb;
         }
         .buttons img
         {
         width:200px;
         }
         .grid h1 {
         font-family: "sans-serif";
         background-color: #ffc107;
         font-size: 35px;
         text-align: center;
         color: #ffffff;
         padding: 2px 0px;
         border-radius: 50px;
         }
         hr
         {
         margin-top: 50px;
         color: red;
         background-color: #ffc107;
         height: 2px;
         border: none;
         }
         #score {
         color: #ffc107;
         text-align: center;
         font-size: 30px;
         }
         .grid #question {
         font-family: "monospace";
         font-size: 30px;
         color: #ffc107;
         }
         .buttons {
         margin-top: 30px;
         }
         #btn0,
         #btn1,
         #btn2,
         #btn3 {
         padding: 0px;
         font-size: 20px;
         color: #fff;
         border: none;
         margin: 10px 20px 10px 0px;
         }
         #btn0:hover,
         #btn1:hover,
         #btn2:hover,
         #btn3:hover {
         cursor: pointer;
         background-color: #ffc107;
         }
         #btn0:focus,
         #btn1:focus,
         #btn2:focus,
         #btn3:focus {
         outline: 0;
         }
         #progress {
         color: #2b2b2b;
         font-size: 18px;
         }
      </style>
   </head>
   <body>
      <div class="grid">
         <div id="quiz">
            <h1>Picture Quiz</h1>
            <hr style="margin-bottom: 20px">
            <p id="question"></p>
            <p id="audio"></p>
            <div class="buttons">
               <button id="btn0"><span id="choice0"></span></button>
               <button id="btn1"><span id="choice1"></span></button>
               <button id="btn2"><span id="choice2"></span></button>
               <button id="btn3"><span id="choice3"></span></button>
            </div>
            <hr style="margin-top: 50px">
            <footer>
               <p id="progress">Question x of y</p>
            </footer>
         </div>
      </div>
   </body>
</html>

Javascript

var images = {
"dog": "dog.jpg",
"cow": "cow.jpg",
"cat": "cat.jpg",
"goat": "goat.jpg",
"deer": "deer.jpg",
"hen": "hen.jpg",
"lion": "lion.jpg",
"parrot": "parrot.jpg",
"tiger": "tiger.jpg"

}  

var sounds = {
    "audio1" : "grizz.mp3",
    "audio2" : "immortal.mp3",
    "audio3" : "genshoshi.mp3",
    "audio4" : "genshoshi.mp3",
    "audio5" : "immortal.mp3"

}

function populate() {
if (quiz.isEnded()) {
showScores();
} else {
// show question
var element = document.getElementById("question");
element.innerHTML = quiz.getQuestionIndex().text;

// show audio
var audio = document.getElementById("audio");
audio.innerHTML = quiz.getQuestionIndex().audio;



// show options
var choices = quiz.getQuestionIndex().choices;
for (var i = 0; i < choices.length; i++) {
var element = document.getElementById("choice" + i);
element.innerHTML = images[choices[i]]? '<img src="'+images[choices[i]]+'"/>':choices[i];
guess("btn" + i, choices[i]);


}

showProgress();
}
};


function guess(id, guess) {
var button = document.getElementById(id);
button.onclick = function() {
quiz.guess(guess);
populate();
}
};

function showProgress() {
var currentQuestionNumber = quiz.questionIndex + 1;
var element = document.getElementById("progress");
element.innerHTML = "Question " + currentQuestionNumber + " of " + quiz.questions.length;
};

function showScores() {
var gameOverHTML = "<h1>Result</h1>";
gameOverHTML += "<h2 id='score'> Your scores: " + quiz.score + "</h2>";
var element = document.getElementById("quiz");
element.innerHTML = gameOverHTML;
};

// create questions
var questions = [
new Question(["Which one is dog?"],"audio1",["cow", "goat", "cat", "dog"], "dog"),
new Question(["select tiger below"],"audio2",["parrot", "deer", "tiger", "lion"], "tiger"),
new Question(["choose parrot pls?"],"audio3",["hen", "parrot", "goat",  "dog"], "parrot"),
new Question(["Find cat below?"],"audio4",["parrot", "goat", "cat", "tiger"], "cat"),
new Question(["choose lion pls?"],"audio5",["lion", "goat", "tiger", "dog"], "lion")
];

questions.sort(function(){
    return 0.5 - Math.random();
});

function Question(text, audio , choices, answer) {
this.text = text;
this.audio = audio;
this.choices = choices;
this.answer = answer;
}

Question.prototype.isCorrectAnswer = function(choice) {
return this.answer === choice;
}


function Quiz(questions) {
this.score = 0;
this.questions = questions;
this.questionIndex = 0;
}

Quiz.prototype.getQuestionIndex = function() {
return this.questions[this.questionIndex];
}

Quiz.prototype.guess = function(answer) {
if (this.getQuestionIndex().isCorrectAnswer(answer)) {
this.score++;
}

this.questionIndex++;
}

Quiz.prototype.isEnded = function() {
return this.questionIndex === this.questions.length;
}

// create quiz
var quiz = new Quiz(questions);

// display quiz
populate();

我正在尝试将文本 sound1 变成一个音频按钮，稍后可以作为我的测验播放

Answer 1

对于音频，您必须制作一个 html 元素并使用其 id 获取该元素，音频将仅在用户触发它时播放，就像单击时不会自动播放一样。

您可以参考此站点以获取更多信息。

并且请不要在提问时复制粘贴整个代码，粘贴所需的任何内容。

如何在 javascript 上播放每个问题的音频文件

问题描述

1 个解决方案

解决方案1
0 2022-12-06 17:26:14

如何在 javascript 上播放每个问题的音频文件

问题描述

1 个解决方案

解决方案1 0 2022-12-06 17:26:14

解决方案1
0 2022-12-06 17:26:14