title: Play audio when hovering image
body: <p>I have a few images on my page and when I hover over them they should each play a certain sound. Also, I don't want audio players to be visible.</p>
  <p>I tried this but it only works when I click on audio player before hovering image:</p>
  <p><strong>HTML</strong></p>
  <pre><code>&lt;a href=&quot;Okokoska.html&quot;&gt;&lt;img src = &quot;Pkokoska.jpg&quot; onmouseover=&quot;playSound1()&quot;&gt;&lt;/a&gt;
  &lt;a href=&quot;Okonj.html&quot;&gt;&lt;img src = &quot;Pkonj.jpg&quot; onmouseover=&quot;playSound2()&quot;&gt;&lt;/a&gt;
  
  &lt;audio controls id=&quot;audio1&quot;&gt;&lt;source src=&quot;Zkokoska.wav&quot; type=&quot;audio/wav&quot;&gt;&lt;/audio&gt;
  &lt;audio controls id=&quot;audio2&quot;&gt;&lt;source src=&quot;Zkonj.wav&quot; type=&quot;audio/wav&quot;&gt;&lt;/audio&gt;
  </code></pre>
  <p><strong>JavaScript</strong></p>
  <pre><code>var sound1 = document.getElementById(&quot;audio1&quot;);
  var sound2 = document.getElementById(&quot;audio2&quot;);
  
  function playSound1() {
  sound1.play();
  }
  
  function playSound2() {
  sound2.play();
  }
  </code></pre>