Skip to content Skip to sidebar Skip to footer
Home / Audio / Html / Javascript

Multiple And Dynamic Audio Players Applied For A Dictionary In HTML/JavaScript

Post a Comment
I would like to extend a question which I've asked not long time ago: enter link description here As before, I'm also trying to write an HTML/JavaScript file which would play an an

Solution 1:

You will need to insert Arrays into your dictionnary (animal_sub object).
Then if the object returned is an Array, iterate over all its keys and append as much new Audios as needed.
Note: to detect if the object is an Array, I do use Array.isArray() method, which was unfortunately not supported by older browsers (IE8-). You can find some polyfills out-there.

var animal_sub = {"Bird":["Blackbird", "Cuckoo","Sparrow"], "Fish":"Sardine"};

function animalVoice(){
    var multiAud = document.querySelectorAll('.multiple_audio');
    // remove the added audio players
    for(var i=0; i<multiAud.length; i++){
        multiAud[i].parentNode.removeChild(multiAud[i]);
      }
    // Keep some references of our elements
    var player = document.getElementById("myPlayer");
    var output = document.animals.outAnimal;
    var theAnimal=document.animals.newAnimal.value; 
    // if the input value is in the Dictionnary
    if(theAnimal in animal_sub) {
      var animal = animal_sub[theAnimal];
      // reset the textArea
      output.value='';
      // if our object is an Array
      if(Array.isArray(animal)){
        
        for(var i=0; i<animal.length; i++){
          output.value+=animal[i]+'\n';
          // if it's the first in the array
          if(i<1){
            player.src= "audio/animals/" + animal[i] + ".mp3";
            }
          else {
            // create a new Audio
            var audio = new Audio("audio/animals/" + animal[i] + ".mp3");
            // add a class so that we can delete it on next call
            audio.className = 'multiple_audio';
            audio.controls=true;
            // insert it in the document
            player.parentNode.insertBefore(audio, player.nextNode);
            }
          }
        }
      // it's not an Array
      else if(typeof animal === 'string'){
        output.value = animal;
        player.src = "audio/animals/" + animal + ".mp3";
        }
      }
    else { // if (!(theAnimal in animal_sub)) {
      output.value = theAnimal;
      // are you sure you want to do it ?
      player.src = "audio/animals/" + theAnimal + ".mp3";
    }
        
};
<!DOCTYPE html>
<html 
    <head>
    <script type="text/javascript" src="animal_voices.js"></script>
    </head>
    <body>  
        <p>please enter the animal's name here: </p>
        <form name="animals">
        <input type="text" name="newAnimal" size ="30" />
        <input type="button" name="animal" value="find the sound"
        onclick="animalVoice();">
        <br/>
        <h4>output:</h4>
        <textarea cols = "31" rows = "4" name="outAnimal"> 
        </textarea>
        <audio
            src="audio/animals/"
            id="myPlayer"
            preload="auto"
            controls>      
        </audio>    
        </form>
</body>
</html>

Solution 2:

If I understand your question correctly:

//var animal_sub = {"Bird":"- (Blackbird) "+"\n "+"- (Cuckoo) "+ "\n "+"- (Sparrow) "
// };

var animal_sub = {
    bird: [
      'Blackbird', 'Cuckoo', 'Sparrow'
    ]
}

function animalVoice(){
    // Get the names from the text field
    theAnimal=document.animals.newAnimal.value; 
    
    if(theAnimal in animal_sub) { 
      var result = animal_sub[theAnimal];
      document.animals.outAnimal.value=result.join(',');  //printing the word in the textarea
      for(var i = 0; i < result.length; i++) {
        var a = document.createElement('audio');
        document.body.appendChild(a);
        a.setAttribute('src', 'audio/animals/' + result[i]);
        a.setAttribute('controls', 'controls');
      }
    }
};
<p>please enter the animal's name here: </p>
<form name="animals">
<input type="text" name="newAnimal" size ="30" value="bird" />
<input type="button" name="animal" value="find the sound"
onclick="animalVoice();">
<br/>
<h4>output:</h4>
<textarea cols = "31" rows = "4" name="outAnimal"> 
</textarea>
<!--<audio
    src="audio/animals/"
    id="myPlayer"
    preload="auto"
    controls>      
</audio>-->
</form>

Post a Comment for "Multiple And Dynamic Audio Players Applied For A Dictionary In HTML/JavaScript"