0

对不起 - 我可能对这个网站的水平太低了。我的 wordpress 帖子有时会显示在不同位置单击会播放不同声音的图像。我当前的方法（从搜索中蚕食了一段时间）如下所示。现在我发现它们不能在 iPad 等设备上播放，所以我需要 html5。我曾尝试在网上遵循各种方法，但无法让它们起作用，或者我只是不明白解决方案，例如这个Play MP3 with when a 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>
4

1 回答 1

0

我在 ergo 的这个自我回答中找到了解决方案： innerHTML 导致 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-12T11:58:09.390 回答