title: Play different audio by clicking on class element
body: <p>after many hours looking for a solution by myself, I'm asking for your help.</p>
  
  <p>I'd like to play audio by clicking on an img and this is how I organised my code in HTML, audio will be different for each class : a_ru.mp3, b_ru.mp3 etc. </p>
  
  <pre><code>    &lt;span class="btn-audio-lexique"&gt;
          &lt;audio src="http://localhost/linguami-offline/fr/mp3/a_ru.mp3"&gt;&lt;/audio&gt;
          &lt;img src="http://localhost/linguami-offline/img/circled-play.png"&gt;
      &lt;/span&gt;
  
      &lt;span class="btn-audio-lexique"&gt;
          &lt;audio src="http://localhost/linguami-offline/fr/mp3/b_ru.mp3"&gt;&lt;/audio&gt;
          &lt;img src="http://localhost/linguami-offline/img/circled-play.png"&gt;
      &lt;/span&gt;
  </code></pre>
  
  <p>JS part which is unfortunately not workings looks like that</p>
  
  <pre><code>    var classname = document.getElementsByClassName("btn-audio-lexique");
  
  function playSound() {
      var audio = classname.firstElementChild;
      audio.play();
  };
  
  Array.from(classname).forEach(function(element) {
      element.addEventListener('click', playSound);
  });
  </code></pre>
  
  <p>I also tried with a for loop</p>
  
  <pre><code>    for (var i = 0; i &lt; classname.length; i++) {
      classname[i].addEventListener('click', playSound);
  }
  </code></pre>
  
  <p>console returns me a "audio is undefined error".</p>
  
  <p>I would like to avoid creating a different id for all the audio in my page.</p>
  
  <p>does anyone have an idea how should I organise my code for this works?</p>
  
  <p>Thanks in advance !</p>