Question

对不起 - 我这个网站的关卡可能太低了。我的wordpress帖子有时会显示图像，在不同的地方点击会播放不同的声音。我目前的方法（从搜索中蚕食一段时间）如下所示。现在我发现他们不玩iPad等，所以我需要html5。我试图在线跟踪各种方法，无法让它们工作，或者我只是不理解解决方案，例如这一个Play MP3 with when an image is clicked。如果有人可以提供帮助，请尽可能明确我放置各种代码的位置，无论是在帖子中还是在.php文件中。如果我首先需要更多基础教程，也许有人会建议？非常感谢。

我把它放在帖子的顶部

<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>

Answer 1

我在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？

1 个答案: