单击之间的图像时如何播放mp3 <p></p> 标记（html5代码）

Question

在我使用的网络源中，起草时，我编写的所有内容（通过使用CKeditor 3.2）都在<p></p>标记之间，我无法通过js播放mp3。 我需要播放mp3（也在移动设备上）。 以前，我使用<object ... width="20" height="20" >播放mp3，但在移动设备上无法正常播放。 我需要同时在PC和移动设备上播放mp3文件，而我只是在<p> </p>标签中起草了文件。 单击图像（放在<p>标记之间）时如何以某种方式让我播放mp3，或者如何编辑此代码以使其变为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

尝试用id标记音频标签，隐藏音频播放器，然后将onclick事件附加到

包含图像的标签。

示例javascript：

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

范例html：

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