title: multiple and dynamic audio players applied for a dictionary in HTML/JavaScript
body: <p>I would like to extend a question which I've asked not long time ago:
  <a href="https://stackoverflow.com/questions/31915516/how-to-play-an-audio-file-that-reacts-to-an-input-variable-in-html-javascript">enter link description here</a></p>
  
  <p>As before, I'm also trying to write an HTML/JavaScript file which would play an animal sound (.mp3) according to the given name of an animal. </p>
  
  <p><strong>Only here, if the user enters the name of a certain animal that has numerous sounds, then the result would be multiple audio players (tags) to choose from.</strong></p>
  
  <p>For example,  If there is only one result for the input, like the "cow" example, then it's not a problem, it only prints cow and enables the sound just for cow. So far, all the above mentioned works!</p>
  
  <p>But if the user enters "Bird" in the field, the program searches it in the array (dictionary). If it exists in the array, it prints different kinds of birds ("Blackbird", "Sparrow", "Cuckoo") and enables the audio for each of them in different audio players. Of course it should be dynamic and fit to 2, 4, 5 or any other number of value results.  </p>
  
  <p><strong>So this is what I'm trying to figure out - how to allow multiple audio tags for each element (value) attributed to the same key. That is, if there are 3 values for "Bird": "Blackbird", "Sparrow" and "Cuckoo" then for each should appear a separate audio player tag.</strong> </p>
  
  <p>as in this example:</p>
  
  <p>-Blackbird  --> audio player tag1 (plays Blackbird.mp3)</p>
  
  <p>-Cuckoo     --> audio player tag2 (plays Cuckoo.mp3)</p>
  
  <p>-Sparrow    --> audio player tag3 (plays Sparrow.mp3)</p>
  
  <p>/</p>
  
  <p>Here is again a simplified picture (but with only one audio tag..)for this example and the JavaScript/HTML below:</p>
  
  <p>I would very appreciate any help! Thanks in advance!</p>
  
  <p><a href="https://i.stack.imgur.com/5Ci0N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Ci0N.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var animal_sub = {"Bird":"- (Blackbird) "+"\n "+"- (Cuckoo) "+ "\n "+"- (Sparrow) "
   };
  
  function animalVoice(){
      // Get the names from the text field
      theAnimal=document.animals.newAnimal.value; 
      if(theAnimal in animal_sub) { 
          document.animals.outAnimal.value=animal_sub[theAnimal];  //printing the word in the textarea
          var line=animal_sub[theAnimal];                     
          regex=line.match(/\(([^\)]*)\)/g);               //finds what's in the () and puts it in ARRAY using regular ex. 
          document.getElementById("myPlayer").src = "audio/animals/" + regex[0].substring(1,regex[0].length-1) + ".mp3"; //executes audio for the first appeared index (regex[0])
          }
      else if(!(theAnimal in animal_sub)) {
      theAnimal=document.animals.newAnimal.value;
      document.animals.outAnimal.value=theAnimal;
      document.getElementById("myPlayer").src = "audio/animals/" + theAnimal + ".mp3"; //if the animal is NOT in the array, it simply prints it and plays the audio
      }
          
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html 
      &lt;head&gt;
      &lt;script type="text/javascript" src="animal_voices.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;  
          &lt;p&gt;please enter the animal's name here: &lt;/p&gt;
          &lt;form name="animals"&gt;
          &lt;input type="text" name="newAnimal" size ="30" /&gt;
          &lt;input type="button" name="animal" value="find the sound"
          onclick="animalVoice();"&gt;
          &lt;br/&gt;
          &lt;h4&gt;output:&lt;/h4&gt;
          &lt;textarea cols = "31" rows = "4" name="outAnimal"&gt; 
          &lt;/textarea&gt;
          &lt;audio
              src="audio/animals/"
              id="myPlayer"
              preload="auto"
              controls&gt;      
          &lt;/audio&gt;    
          &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>