Question

I am trying to add an audio aspect to a HTML/JavaScript quiz (see JSFiddle: http://jsfiddle.net/55aJt/3/). I have an empty audio tag:

<audio id="myAudio" src="" controls></audio>

which I want to play from my array 'question' property:

var allQuestions = [{
    question: "http://www.w3schools.com/html/horse.mp3",
    choices: ["3rd", "5th", "4th"],
    correctAnswer: 2
},

This isn't working as my audio player doesn't load anything. My function to send the data from the object to the audio player is obviously wrong in some way. Can someone help shed a bit of light on what I'm doing wrong?

Was it helpful?

Solution

This isn't the complete answer but see if it gets you in the right direction.

http://jsfiddle.net/55aJt/9/

Basically you can change the audio.src via javascript. So I just replaced it with an object property that changes when the user clicks the next button. The first src defaults to the initial src of the audio tag. You can modify the code if you like but I figure it might be fine as is.

var allQuestions = [{
    question: "Identify the musical interval",
    choices: ["3rd", "5th", "4th"],
    correctAnswer: 2,
    audioSrc: " defaults to the original .ogg file"

}, {
    question: "Which of the following best describes this chord?",
    choices: ["Major", "Minor", "Diminished"],
    correctAnswer: 0,
    audioSrc:" http://en.wikiaudio.org/images/b/b8/MPC60_626_Cym_da_China_.wav"

}];

Then

function nextQuestion() {
    updateScore();
    questionCount++;
    showScore();
    showQuestion();
    var audio = document.getElementById('myAudio')
    audio.src = ( allQuestions[questionCount].audioSrc);




}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top