使用 jQuery 1.4 跨平台、跨浏览器播放声音的方式？答案

【问题标题】：Cross-platform, cross-browser way to play sound using jQuery 1.4?使用 jQuery 1.4 跨平台、跨浏览器播放声音的方式？
【发布时间】：2011-02-15 16:18:21
【问题描述】：

我正在尝试让 jQuery 在元素悬停/单击时播放声音。（就像没有flash的flash网站）

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

有人有什么建议吗？

【问题讨论】：

你可以在dev.jquery.com/browser/trunk/plugins/sound/jquery.sound.js找到jQuery声音插件
你能用这个jQuery声音插件（happyworm.com/jquery/jplayer）吗？
我看了一眼，但觉得它对于我想要的东西来说有点太重了。我再看一遍。谢谢！
你试过schillmania.com/projects/soundmanager2 吗？您可以尝试在 jquery 悬停函数中插入其播放命令
试试：jQuery('#resource_audio').attr("src",srclink)[0].play();发现自：css-tricks.com/play-sound-on-hover

标签： jquery audio

【解决方案1】：

这些都不需要。 HTML 标记与 JavaScript 结合使用即可。

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

【讨论】：

@Erin: Javascript != Java，这是纯 Javascript。但是请注意，这根本不是跨浏览器，因为它使用 HTML5 <audio> 元素（根本不适用于 IE，不同的浏览器支持不同的格式/编解码器等）。请参阅：html5doctor.com/native-audio-in-the-browser。
为什么这被否决了？这应该是要走的路。是的，它不是跨浏览器（目前），但很快就会实现，这是标准。实际上，目前唯一不支持它的浏览器是 Internet Explorer。来源：caniuse.com/#feat=audio
不，有更多的浏览器不支持它，尤其是在移动领域。加上问题强调跨浏览器和跨平台兼容性。当解决方案适用于不到 50% 的市场时，它就不能满足这一要求。
请注意这里只使用一个声道，也就是说可以同时播放一种声音。多通道版本见storiesinflight.com/html5/audio.html
我不知道为什么，当我试图实现这个时，我无法让它工作，直到我添加了soundHandle.load(); 缺少什么？

【解决方案2】：

试试这个：http://swaggplayer.no.de/demos 它使用闪光灯播放声音或者这个 http://www.schillmania.com/projects/soundmanager2/

【讨论】：

iPhone 或 iPad 不支持 Flash

【解决方案3】：

实际上，以真正跨浏览器兼容的方式是不可能的，例如 iPhone 只会在专用播放器“页面”上播放声音。但是，其他答案中的一些插件应该适用于大多数（桌面）浏览器。

【讨论】：

【解决方案4】：

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 等）都支持。

【讨论】：

【解决方案5】：

音频标签在某些浏览器中对我不起作用，所以我是这样完成的：

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

每当我想播放声音（onmouseover、onclick、onload...）时，我都会调用此函数。

【讨论】：

优秀。这甚至可以在兼容模式下的 IE 中使用。