單擊之間的圖像時如何播放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>