跨平台、跨浏览器从 Javascript 播放声音的方式？ [复制]

Posted 2023-02-25

【中文标题】跨平台、跨浏览器从 Javascript 播放声音的方式？ [复制]

【英文标题】：Cross-platform, cross-browser way to play sound from Javascript? [duplicate]

【发布时间】：2008-10-09 12:47:30

【问题描述】：

我正在编写一个 dhtml 应用程序，用于创建系统的交互式模拟。用于模拟的数据是从另一个工具生成的，并且已经有非常大量的遗留数据。

模拟中的某些步骤要求我们播放“画外音”音频片段。我一直无法找到一种简单的方法来跨多个浏览器完成此操作。

Soundmanager2 非常接近我的需要，但它只会播放 mp3 文件，并且旧数据可能还包含一些 .wav 文件。

有没有其他图书馆可以提供帮助？

【问题讨论】：

很高兴您找到了解决方案，但除此之外，您可能需要考虑将这些 .wav 文件转换为 .mp3 文件。如果稍微降低声音质量，您可以将文件大小从波形文件大小的 1/3 到 1/10 缩小。可能会使播放声音的反应更加灵敏。

【参考方案1】：

您必须包含一个像 Real Audio 或 QuickTime 这样的插件来处理 .wav 文件，但这应该可以工作...

//======================================================================
var soundEmbed = null;
//======================================================================
function soundPlay(which)
    
    if (!soundEmbed)
        
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        
    else
        
        document.body.removeChild(soundEmbed);
        soundEmbed.removed = true;
        soundEmbed = null;
        soundEmbed = document.createElement("embed");
        soundEmbed.setAttribute("src", "/snd/"+which+".wav");
        soundEmbed.setAttribute("hidden", true);
        soundEmbed.setAttribute("autostart", true);
        
    soundEmbed.removed = false;
    document.body.appendChild(soundEmbed);
    
//======================================================================

【讨论】：

我从不理解否决票。这行得通。我已将其部署在我的应用程序中。为什么它应该投反对票？

我不知道你为什么被否决，可能是因为使用了“真实音频”或“快速时间”这两个词......？？也许投反对票的人不知道它是如何完成的？至于我，+1，您的代码与最接受的答案中所述的 jQuery 插件中使用的代码几乎相同......

有时我认为这是因为我编写了代码而不是调用当前流行的 API，正如您所说，它做的事情完全相同。

也很好地解决了我的问题。 +1。

但是在FF3.0中似乎无法播放声音文件。适用于 Chrome 3、IE7。

【参考方案2】：

如果您使用 Prototype，请使用 Scriptaculous 库 has a sound API。 jQuery appears to have a plugin 也是。

【讨论】：

jQuery 插件链接以 403 响应。

答案中的第二个链接已失效 - “无法访问此站点”。

@Pang 在这一点上，关于这个问题的每个答案都已经过时了。这些天来，您希望使用普遍支持的 HTML5 音频 API。我已将此问题作为更新问题的副本关闭。

【参考方案3】：

dacracots 代码是干净的基本 dom，但也许是不假思索地编写的？ 当然，您首先检查早期嵌入的存在，然后保存副本 嵌入创作线。

var soundEmbed = null;
//=====================================================================

function soundPlay(which)

    if (soundEmbed)
       document.body.removeChild(soundEmbed);
    soundEmbed = document.createElement("embed");
    soundEmbed.setAttribute("src", "/snd/"+which+".wav");
    soundEmbed.setAttribute("hidden", true);
    soundEmbed.setAttribute("autostart", true);
    document.body.appendChild(soundEmbed);

在寻找类似情况的解决方案时想到了这里。不幸的是，我的浏览器 Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.15) Gecko/2009102814 Ubuntu/8.04 (hardy) Firefox/3.0.15 在尝试这个时死掉了。

安装最新更新后，firefox 仍然崩溃，opera 保持活力。

【参考方案4】：

我相信最简单、最方便的方法是使用一个小的 Flash 剪辑播放声音。我很欣赏它不是 javascript 解决方案，但它是实现目标的最简单方法

之前similar question的一些额外链接：

Scriptaculous，一个 Javascript 库：http://github.com/madrobby/scriptaculous/wikis/sound 一个开源 Flash 项目：Easy Musicplayer For Flash http://emff.sourceforge.net/

【讨论】：

但我找不到任何可以播放 WAV 文件的闪存解决方案。看来flash只支持MP3。我会看看 scriptaculous 的插件，但我不想为这一功能包含一个完整的额外库。

【参考方案5】：

您可以使用 HTML5 <audio> 标签。

【讨论】：

该问题专门要求提供“跨平台、跨浏览器”的解决方案。 HTML5 <audio> 标签在 IE8-、android 2.2-、ios Safari 3.2- 或 Opera Mini 中不起作用：caniuse.com/#feat=audio

NB 在 2018 年除 Opera 外，其他所有人都支持 HTML5 音频。

【参考方案6】：

我喜欢 dacracot 的回答...这是 jQuery 中类似的解决方案：

function Play(sound) 
    $("#sound_").remove()
    $('body').append('<embed id="sound_" autostart="true" hidden="true" src="/static/sound/' + sound + '.wav" />');

【参考方案7】：

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

更多详情请见http://www.w3schools.com/html/html5_audio.asp。

【参考方案8】：

如果您使用的是 Mootools，则有 MooSound plugin。

【参考方案9】：

有一个更简单的解决方案，而不必求助于插件。 IE 有它自己的 bgsound 属性，还有另一种方法可以使它适用于所有其他浏览器。在这里查看我的教程 = http://www.andy-howard.com/how-to-play-sounds-cross-browser-including-ie/index.html

【讨论】：

您的解决方案看起来很有趣，我会尝试一下。请注意，您链接到的页面上有一条评论表明在 IE11 中，音频正在无限循环中运行。这仍然是一个问题吗？有办法避免吗？

【参考方案10】：

对于带有 wav 文件的跨浏览器解决方案，我建议将 <audio> 标签设为默认值，然后使用 @dacracot 在 here 之前建议的 <embed> 解决方案，如果用户在 IE 中，您可以查看它在 SO 中稍作搜索即可轻松完成。