使用Javascript在跨平台、跨浏览器的方式中播放声音？

Question

使用Javascript在跨平台、跨浏览器的方式中播放声音？

javascriptaudiocross-browsercross-platformdhtml

79

我正在编写一款DHTML应用程序，创建一个系统的交互式模拟。该模拟的数据来自另一个工具，并且已经有大量的遗留数据。

模拟中的某些步骤需要播放音频“配音”片段。但我无法找到一种易于跨多个浏览器实现的方法。

Soundmanager2 已经非常接近我所需的功能，但它只能播放mp3文件，而遗留数据可能也包含一些.wav文件。

是否有其他库可以帮助解决问题？

- Jake Stevenson

5

很高兴你找到了解决方案，但不管怎样，你可能想考虑将那些.wav文件转换成.mp3文件。只要稍微降低一点音质，你就可以将文件大小从原来的三分之一到十分之一。这可能会使播放声音时更加响应快捷。 - infocyde

10个回答

9

如果你正在使用Prototype，那么Scriptaculous库有一个声音API。jQuery 似乎也有一个插件。

- ceejayoz

5

jQuery插件链接返回403。 - Arion

答案中的第二个链接已经失效 - “无法访问该网站”。 - Pang

@Pang，这个问题的每一个答案都已经过时了。现在，您应该使用普遍支持的HTML5音频API。我将关闭此问题，并将其作为更为实时的问题的重复提出。 - ceejayoz

8

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则保持正常。

- joshoreefe

7

我认为最简单、最方便的方法是使用小型Flash剪辑播放声音。虽然这不是JavaScript解决方案，但这是实现你的目标最容易的方法。

一些来自前一个类似问题的额外链接：

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

- Ilya Kochetov

1

但是我找不到任何可以播放WAV文件的Flash解决方案。看起来Flash只支持MP3。我会查看scriptaculous的插件，但我不想为了这一点功能而包含整个额外的库。 - Jake Stevenson

5

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

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

- Howard

5

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

- Alon Gubkin

该问题特别要求一个“跨平台，跨浏览器”的解决方案。HTML5的<audio>标签在IE8-、Android 2.2-、iOS Safari 3.2-或Opera Mini中无法工作：http://caniuse.com/#feat=audio - Jasdeep Khalsa

注意：在2018年，除了Opera浏览器外，所有浏览器都支持HTML5音频。 - Aidan Connelly

4

<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了解更多详情。

- Andrew Mackenzie

3

如果您正在使用Mootools，那么有一个名为MooSound插件的工具可供使用。您可以通过此链接了解更多信息。

- cheeaun

1

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

- Andrew Howard

你的解决方案看起来很有趣，我会试一试。请注意，您链接的页面上有一条评论指出，在IE11中，音频正在无限循环播放。这仍然是一个问题吗？有没有办法避免它？ - Kevin Fegan

0

对于具有wav文件的跨浏览器解决方案，我建议将<audio>标签设置为默认，并使用@dacracot之前在here提出的<embed>解决方案，如果用户使用IE，则可以在此处轻松搜索进行检查。

- Hugo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dacracot · Accepted Answer

您将需要包含像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);
    }
//======================================================================