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

functionanimalVoice(){
    var multiAud = document.querySelectorAll('.multiple_audio');
    // remove the added audio playersfor(var i=0; i<multiAud.length; i++){
        multiAud[i].parentNode.removeChild(multiAud[i]);
      }
    // Keep some references of our elementsvar player = document.getElementById("myPlayer");
    var output = document.animals.outAnimal;
    var theAnimal=document.animals.newAnimal.value; 
    // if the input value is in the Dictionnaryif(theAnimal in animal_sub) {
      var animal = animal_sub[theAnimal];
      // reset the textArea
      output.value='';
      // if our object is an Arrayif(Array.isArray(animal)){
        
        for(var i=0; i<animal.length; i++){
          output.value+=animal[i]+'\n';
          // if it's the first in the arrayif(i<1){
            player.src= "audio/animals/" + animal[i] + ".mp3";
            }
          else {
            // create a new Audiovar audio = newAudio("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 Arrayelseif(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><scripttype="text/javascript"src="animal_voices.js"></script></head><body><p>please enter the animal's name here: </p><formname="animals"><inputtype="text"name="newAnimal"size ="30" /><inputtype="button"name="animal"value="find the sound"onclick="animalVoice();"><br/><h4>output:</h4><textareacols = "31"rows = "4"name="outAnimal"></textarea><audiosrc="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'
    ]
}

functionanimalVoice(){
    // 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 textareafor(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><formname="animals"><inputtype="text"name="newAnimal"size ="30"value="bird" /><inputtype="button"name="animal"value="find the sound"onclick="animalVoice();"><br/><h4>output:</h4><textareacols = "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"