How can play mp3 when click on image between <p> </p> tag (html5 code)

Question

In web source I used, when drafting, everything I wrote (by using CKeditor 3.2) is between <p></p> tag, I can't play mp3 by js. I need to play mp3 (also on mobile device). Formerly, I used <object ... width="20" height="20" > to play mp3, but it does not work in mobile devices. I need to play mp3 file both in PC and mobile device, and I just drafted in <p> </p> tag. Somehow for me to play mp3 when click on image ( put between <p> tag) or how to edit this code to make it width=20, heigh=20

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  Your browser does not support the audio tag.
</audio> 

Answer 1

Try labeling the audio tag with an id, hide the audio player, then attach an onclick event to the

tag which contains the image.

sample javascript:

var audioTagged = document.getElementById('audioID');
    audioTagged.src = 'audio.mp3';
    audioTagged.load();

sample html:

<p onclick="triggerAudio()"><img src="smiley.jpg" /></p>