使用jQuery 1.4实现跨平台、跨浏览器的音频播放方法？

Question

我试图让jQuery在元素悬停/点击时播放声音。(就像一个没有Flash的闪存网站)

我尝试了Cross-platform, cross-browser way to play sound from Javascript?、jQuery Sound插件和其他一些教程中推荐的方法，但都没有成功。我认为这是因为它们自2008年以来没有更新。

有没有什么建议？

- Erin

---

您可以在 http://dev.jquery.com/browser/trunk/plugins/sound/jquery.sound.js 找到 jQuery 声音插件。 - Erin

你能使用这个jQuery音频插件吗？（http://www.happyworm.com/jquery/jplayer/） - Mottie

我瞥了一眼，但觉得它对我想要的有点太重了。我会再看一眼的。谢谢！ - Erin

你尝试过http://www.schillmania.com/projects/soundmanager2/吗？你可以尝试将其播放命令插入jquery悬停函数中。 - Adam

尝试使用以下代码：jQuery('#resource_audio').attr("src",srclink)[0].play(); 该代码来源于：http://css-tricks.com/play-sound-on-hover/ - ShaunOReilly

Answer 1

不需要那些。HTML 的 <a> 标签，与 JavaScript 结合使用，就可以实现你想要的效果。

<audio id="soundHandle" style="display: none;"></audio>
<script>
  soundHandle = document.getElementById('soundHandle');
  soundHandle.src = '/blah/blah.mp3';
  soundHandle.play();
</script>

- Delan Azabani

---

@Erin：Javascript 不等于 Java，这是纯粹的 Javascript。需要注意的是，这并不是跨浏览器的，因为它使用了 HTML5 的 <audio> 元素（在 IE 上根本无法工作，不同浏览器支持不同的格式/编解码器等）。请参考：http://html5doctor.com/native-audio-in-the-browser/。 - Max Shawabkeh

为什么这个被踩了？这应该是正确的方法。是的，它还不是跨浏览器（尚未），但很快就会有，并且这是标准。实际上，目前唯一不支持它的浏览器是Internet Explorer。来源：http://caniuse.com/#feat=audio - Felix

不，还有更多的浏览器不支持它，特别是在移动领域。此外，该问题强调跨浏览器和跨平台兼容性。当解决方案只适用于市场低于50％的情况时，它无法满足此要求。 - Jakub Hampl

请注意，这只使用一个通道，这意味着同时只能播放一个声音。请访问http://www.storiesinflight.com/html5/audio.html以获取多通道版本。 - TiansHUo

我不知道为什么，在我尝试实现这个时，直到我添加了soundHandle.load();才能使其正常工作。缺少了什么？ - Damon Aw

Answer 2

实际上，在真正符合跨浏览器标准的情况下，这是不可能做到的，例如iPhone只会在专用播放器“页面”上播放声音。但是，其他答案中的一些插件应该能够适用于大多数（桌面）浏览器。

- Jakub Hampl

Answer 3

在某些浏览器中，音频标签无法正常工作，因此我通过以下方式完成了操作：

function playBuzzer(){
        $("body").append("<embed src='/web/sounds/Buzz.mp3' autostart='true' loop='false' width='2' height='0'></embed>");
}

每当我想播放声音（在鼠标悬停、单击、加载等事件上），我都会调用这个函数。

- ThinkFloyd

---

太好了。这甚至在IE的兼容模式下也能运行。 - iliask

Answer 4

尝试这个：http://swaggplayer.no.de/demos，它使用flash播放声音。或者使用这个：http://www.schillmania.com/projects/soundmanager2/。

- FDisk

---

iPhone和iPad不支持Flash。 - n4rzul

Answer 5

http://codecanyon.net/item/fancy-music-player-v20-jquery-plugin/498071?ref=1stwebdesigner

玩家的工作方式如下 - 首先它会检测是否安装了Flash Player 9或更高版本。如果是，则使用隐藏的Flash电影（swf），该电影通过JavaScript与HTML用户界面通信。如果未安装Flash Player，则将使用新的HTML5音频引擎，该引擎受到所有iToys（iPhone、iPad等）的支持。

- FDisk