在點擊圖片時播放聲音 - 升級到html5？

對不起 - 我對這個網站的等級可能太低了。我的wordpress帖子有時會在不同的地方點擊播放不同的聲音。下面顯示了我目前的方法（從搜索退回一段時間）。現在我發現他們不會在iPad上玩，所以我需要html5。我試圖在網上遵循各種方法，無法讓他們工作，或者我只是不理解解決方案，例如這一個Play MP3 with when an image is clicked。如果任何人都可以提供幫助，請儘可能明確地說明我在哪裏放置各種代碼，無論是在帖子還是在.php文件等。如果我首先需要更多的基本教程，也許有人可以建議？非常感謝。在點擊圖片時播放聲音 - 升級到html5？

我把這個在後上方

<script language="javascript" type="text/javascript"> 
function playSound(soundfile) { 
document.getElementById("dummy").innerHTML="<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />"; 
} 
</script> 
<span id="dummy"> 
</span>

然後在合適的點門柱內側

<img src="http://website_path/image.jpg" width="350" height="312" usemap="#my_image" /> 
<map name="my_image"> 
<area shape="rect" coords="20,65,50,95" onclick="playSound('http://website_path/sound.mp3');" /> 
</map>

來源

2013-05-07 user2356507

我發現通過ERGO在這種自我回答瞭解決方案： innerHTML causes unwanted scroll in Chrome

我的第一部分代碼應該替換爲：

<audio id="1st_sound"> 
<source src="1st_sound.ogg" type="audio/ogg" /> 
<source src="1st_sound.mp3" type="audio/mpeg" /> 
</audio> 
<audio id="2nd_sound"> 
<source src=2nd_sound.ogg" type="audio/ogg" /> 
<source src="2nd_sound.mp3" type="audio/mpeg" /> 
</audio>

等

第二位應被替換爲：

<img src="http://website_path/image.jpg" width="350" height="312" usemap="#my_image" /> 
<map name="my_image"> <area shape="rect" coords="20,65,50,95" onClick="document.getElementById('1st_sound').play(); return false;" /> 
</map>

等

來源

2013-05-12 11:58:09 user2356507

在點擊圖片時播放聲音 - 升級到html5？

回答

相關問題