3

我有一个简单的设置：单击图像后，我想要播放 mp3 文件。

从我记得的大多数来源中，建议是创建一个虚拟跨度元素，可以在其中嵌入音频播放器以在单击图像时自动启动。

这是执行此类操作的函数：

<script language="javascript" type="text/javascript">
  function playSound(soundfile,evt) {
    document.getElementById("dummy").innerHTML = "<embed src=\""+soundfile+"\" hidden=\"true\" autostart=\"true\" loop=\"false\" />";
    evt.preventDefault(); // this doesnt do anything
    return false; // neither does this
  }
</script>

图片的 HTML 代码：

<a href="#" onclick="playSound('aud.mp3'); return false;">

我将“虚拟”跨度放在页面的最底部。单击图像时，会播放声音，但令人难以置信的是页面会自动向下滚动到此 span 元素的位置。

我在 IE 和 Firefox 上试过这个：这个问题没有发生。仅在最新版本的 Chrome (24.0.1312.56 m) 中才会发生这种情况。我在两台电脑上试过这个。

有谁知道怎么回事？你如何摆脱这个烦人的滚动？

return false;没有帮助（它们都没有；第二个只是通过属性滚动到顶部）#。也没有preventDefault()。也不会将 ahref属性从更改#为javascript:void(0)。

4

2 回答 2

5

我没有使用虚拟span元素，而是发现play()Javascript 中有一个用于audio和videoDOM 元素的方法，所以我只是重写了代码以避免 Chrome 错误。显然，IE8 或更早版本不支持它，但这是一个值得权衡的选择。

<audio id="aud">
    <source src="aud.ogg" type="audio/ogg" />
    <source src="aud.mp3" type="audio/mpeg" />
</audio>
<a href="#" onClick="document.getElementById('aud').play(); return false;">
  Link
</a>
于 2013-02-02T01:54:55.303 回答
0

好的，我遇到了类似的问题并发现了这个，但它对我没有帮助，我想出了一个解决方法，所以我决定在这里发布它来帮助其他有同样问题的人。问题是浏览器会显示，因为这是对用户单击某些内容的响应，它应该滚动以自动显示新的 html 内容。我想出的解决方法是这样的 -

setTimeout(function(){
    document.getElementById('dummy').innerHTML += "THE STUFF";
}, 0);

它只是简单地执行 0 毫秒的 setTimeout，然后添加 html 代码，这样它就与点击事件解除关联。

于 2013-07-17T07:04:35.913 回答