0

我正在开发一个脚本，只要将某个元素悬停在上面，它就会播放某个 html5<audio>元素。<div>我正在使用 jQuery 来检测悬停，并通过为音量设置动画来淡入/淡出音频。

这是我的代码：

<head>
<!--  unrelated code removed -->
<script type="text/javascript">
$(document).ready(function(){
    //unrelated code removed
    $("#pog").mouseenter(function() {
        $("#poga").get(0).volume=0;
        $("#poga").get(0).play();
        $("#poga").animate({volume: 1}, 1000);
    });
    $("#pog").mouseleave(function() {
        $("#poga").animate({volume: 0}, 1000, function() {
            $("#poga").get(0).pause();
        });
    });
});
</script>
</head>
<body>
    <audio preload loop controls id="poga">
        <source src="audio/phantogram.mp3"></source>
        <source src="audio/phantogram.ogg"></source>
        Your browser isn't invited for super fun audio time.
    </audio>
    <div id="pog" class="band">Phantogram</div>
</body>

这是一个 jsFiddle：http: //jsfiddle.net/2eG6s/

问题是音量动画真的很不稳定。它每隔一段时间就会淡入淡出（我不知道确切的音量，但大概是 100%、60%、20%）。这真的很奇怪，并且只发生在 Windows 7 的 Firefox 21.0 和 22.0 中（Mac 版本的 Firefox 21.0 和 22.0 工作正常。）

帮助！

4

1 回答 1

1

我认为这是很久以前修复的：https ://bugzilla.mozilla.org/show_bug.cgi?id=487504

问题在于音频缓冲区以及旧libsydneyaudio后端如何使用它。缓冲区未在音量更改时清除，因此仅在当前缓冲的音频播放完毕后才会发生声音变化。

cubeb不知何故，根据https://bugzilla.mozilla.org/show_bug.cgi?id=852401的新后端已经启动并运行，应该已经解决了这个问题，但显然仍然存在问题，对我来说这听起来仍然像一个缓冲问题。

我曾经使用play()在事件中调用该方法的解决方法volumechange，这有助于减少波动，但现在这样做似乎没有区别。

因此，虽然我没有解决这个问题的方法（如果有的话），但我认为这些信息可能有用。

于 2013-07-01T19:23:37.530 回答