title: Playing sounds on clicking within image - upgrading to html5?
body: <p>Sorry - I'm probably too low a level for this site.  My wordpress posts sometimes feature images where clicking in different places plays different sounds. My current method (cannibalized a while back from searches) is shown below.  Now I find they don't play on iPads etc, so I need html5. I have tried to follow various methods online and can't get them to work, or I just don't understand the solution, e.g. this one <a href="https://stackoverflow.com/questions/15955183/play-mp3-with-javascript-html5">Play MP3 with when an image is clicked</a>.  If anyone can help, please be as explicit as possible about where I put various bits of code, whether in posts or in .php files etc. 
  If I need more basic tutorials first, perhaps someone could suggest?  Many thanks.</p>
  
  <p>I put this at the top of the post</p>
  
  <pre><code>&lt;script language="javascript" type="text/javascript"&gt;
  function playSound(soundfile) {
  document.getElementById("dummy").innerHTML="&lt;embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" /&gt;";
  }
  &lt;/script&gt;
  &lt;span id="dummy"&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>then at the right point inside the post</p>
  
  <pre><code>&lt;img src="http://website_path/image.jpg"  width="350" height="312" usemap="#my_image" /&gt;
  &lt;map name="my_image"&gt;
  &lt;area shape="rect" coords="20,65,50,95" onclick="playSound('http://website_path/sound.mp3');"  /&gt;
  &lt;/map&gt;
  </code></pre>