CODEWITHSUNDEEP
javascriptarraysaudiorandom
MikeMichaels
MikeMichaels

Reputation: 494

Javascript - Play sound along with random values from an array

I am trying to make a quizz with random questions. I would like each question to be accompanied by a sound clip that plays automatically as soon as the question is shown. I would also like to have a button that makes it possible for the user to replay the sound clip. How can I achieve this, exactly?

I know how to play individual audio clips with audioClips.play();. But how about playing audio clips from an array, "synchronized" with the questions?

This is what I have so far:

var country = ["Italy", "Spain", "Portugal", "France", "Greece", "Ireland", "Germany"];
var audioClips = ["italy.mp3", "spain.mp3", "portugal.mp3", "france.mp3", "greece.mp3", "ireland.mp3", "germany.mp3"];
var capital = ["rome", "madrid", "lisbon", "paris", "athens", "dublin", "berlin"];
var random001 = Math.floor(Math.random() * country.length);

document.getElementById("country").textContent = country[random001];

function submit001() {
    var b = input001.value.toLowerCase();
    var text;
    if (b === capital[random001]) {
    goToNextQuestion();
        text = "Correct!";
    } else {
        text = input001.value.bold() + " is not correct!";
    }
    document.getElementById("input001").value = "";
    document.getElementById("answer001").innerHTML = text;
}

function goToNextQuestion() {
    document.getElementById("answer001").innerHTML = "";
    random001 = Math.floor(Math.random() * country.length);
    document.getElementById("country").innerHTML = country[random001];
    document.getElementById("input001").focus();
}
<p id="message001">What is the capital of <text id="country"></text>?</p>
    <input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) submit001()">
<p id="answer001"></p>
<button onclick="playAudio()" type="button">Replay Audio</button>

Upvotes: 0

Views: 711

Answers (2)

holaymolay
holaymolay

Reputation: 580

With this problem you're thinking in terms of Arrays and you need to think in terms of Objects. Combine the related information into an Object and you can accomplish your goal with clear, easy-to-read code.

To make this work I had to extensively refactor your code. Here's what I came up with.

HTML

<head>
  <style>
    #startButton {
      display: block;
    }

    #quiz {
      display: none;
    }
  </style>
</head>
<body>
  <div id="startButton">
    <button type="button" onclick="startQuiz()">Start Quiz</button>
  </div>
  <div id="quiz">
    <p id="message001">What is the capital of <text id="country"></text>?</p>
    <input type="text" id="input001" autofocus onKeyDown="if(event.keyCode==13) checkAnswer()" value="">
    <p id="answer001"></p>
    <button id="replayButton" type="button" onclick="setAudio()">Replay Audio</button>
  </div>
</body>

Javascript

<script>
  var country = {
    "Italy": {
      "audio": "italy.mp3",
      "capital": "rome"
    },
    "Spain": {
      "audio": "spain.mp3",
      "capital": "madrid"
    },
    "Portugal": {
      "audio": "portugal.mp3",
      "capital": "lisbon"
    },
    "France": {
      "audio": "france.mp3",
      "capital": "paris"
    },
    "Greece": {
      "audio": "greece.mp3",
      "capital": "athens"
    },
    "Ireland": {
      "audio": "ireland.mp3",
      "capital": "dublin"
    },
    "Germany": {
      "audio": "germany.mp3",
      "capital": "berlin"
    }
  };

  var countryArray = Object.keys(country);

  function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;

  }

  function nextCountryName(){
    let randIndex = getRandomInt(1, countryArray.length) - 1;
    return countryArray[randIndex];
  };

  function playAudio(file){
    let playFile = new Audio(file);
    playFile.play();
  }

  function newCountry(newCountryName) {

    document.getElementById("country").textContent = newCountryName;
    document.getElementById("input001").value = "";
  }

  function isAnswerCorrect(answer, useCountry) {
    let answerId = document.getElementById("answer001");
    let ans = answer.toLowerCase();
    let text;

    if(ans == country[useCountry].capital){
      answerId.innerHTML = "Correct!";
      return true;
    } else {
      answerId.innerHTML = ans.bold() + " is not correct!";
      return false;
    }
  };

  function setAudio(){
    let thisCountry = document.getElementById("country").textContent;
    let audioFile = country[thisCountry].audio;
    let callStr = "playAudio(\'" + audioFile + "\')";
    document.getElementById('replayButton').setAttribute('onclick', callStr);
  }

  function checkAnswer(){
    let inputId = document.getElementById('input001');
    let answer = inputId.value;
    let thisCountry = document.getElementById("country").textContent;
    let audioFile = country[thisCountry].audio;
    let result = isAnswerCorrect(answer, thisCountry);

    if(result) {
      let cntryName = nextCountryName();
      newCountry(cntryName);
      playAudio(country[cntryName].audio);
    }
  };

  function startQuiz(){
    let startingCountry = nextCountryName();
    newCountry(startingCountry);

    document.getElementById('startButton').style.display = "none";
    document.getElementById('quiz').style.display = "block";

    playAudio(country[startingCountry].audio);
  };    
</script>
  • I converted var country, var audioClips, and var capital arrays into a single Object named var country. This way you can use country.capital or country.audio to get the value you're looking for.
  • According to this answer it is suggested that you set the audio file type new Audio("file_name") before calling the .play() method.

While answer002, answer003, input002, input003, etc is beyond the scope of your question this code could be easily modified accept such parameters to account for a more extensive quiz.

Upvotes: 1

Mean Coder
Mean Coder

Reputation: 304

function playAudio() {
  // if you know how to play audio then follow these step
  //1. get file name from audioClips array at index randome001 like
  audioClip = audioClips[random001]
  // do whatever you need to do before playing audio like loading audio file or whatever
  //2. play audioClip.
}`

Upvotes: 0

Related Questions