在点击图片时播放声音 - 升级到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>

答

我发现通过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>

等

在点击图片时播放声音 - 升级到html5？

相关推荐