JavaScript / HTML5中的声音效果

JavaScript HTML

村村伽罗Mandy

2020-03-24

我正在使用HTML5对游戏进行编程;我现在遇到的障碍是如何播放音效。

具体要求数量很少:

  • 播放和混合多种声音,
  • 多次播放同一样本,可能会重复播放,
  • 随时中断样本播放,
  • 最好播放包含(低质量)原始PCM的WAV文件,但是我当然可以转换它们。

我的第一种方法是使用HTML5 <audio>元素并定义页面中的所有声音效果。Firefox只是播放桃花心的WAV文件,但#play多次调用实际上并不会多次播放示例。根据我对HTML5规范的了解,该<audio>元素还跟踪播放状态,因此可以解释原因。

我的直接想法是克隆音频元素,因此我创建了以下微型JavaScript库来为我做这件事(取决于jQuery):

var Snd = {
  init: function() {
    $("audio").each(function() {
      var src = this.getAttribute('src');
      if (src.substring(0, 4) !== "snd/") { return; }
      // Cut out the basename (strip directory and extension)
      var name = src.substring(4, src.length - 4);
      // Create the helper function, which clones the audio object and plays it
      var Constructor = function() {};
      Constructor.prototype = this;
      Snd[name] = function() {
        var clone = new Constructor();
        clone.play();
        // Return the cloned element, so the caller can interrupt the sound effect
        return clone;
      };
    });
  }
};

因此,现在我可以Snd.boom();从Firebug控制台进行播放snd/boom.wav,但仍然不能多次播放相同的样本。似乎该<audio>元素实际上更多是流功能,而不是用来播放声音效果的东西。

有没有一种巧妙的方法可以使我想不到的事情发生,最好仅使用HTML5和JavaScript?

我还应该提到,我的测试环境是Ubuntu 9.10上的Firefox 3.5。我尝试过的其他浏览器-Opera,Midori,Chromium和Epiphany-产生了不同的结果。有些不玩任何东西,有些则抛出异常。

第3248篇《JavaScript / HTML5中的声音效果》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

14个回答
DavaidTony宝儿 2020.03.24

您可以随时尝试AudioContext获得有限的支持,但这是Web音频api工作草案的一部分。如果您计划将来发布某些内容,那可能是值得的。而且,如果您只为chrome和Firefox编程,那您就是无价之宝。

古一村村 2020.03.24

我知道这是一个完全的hack,但是我想我应该添加我之前放在github上的这个示例开源音频库...

https://github.com/run-time/jThump

单击下面的链接后,在主行键上键入以播放蓝调即兴演奏(也可以同时键入多个键等)。

使用jThump库的示例>> http://davealger.com/apps/jthump/

它基本上是通过使不可见的<iframe>元素加载加载在onReady()上播放声音的页面来工作的。

这当然不是理想的选择,但您可以仅基于创造力(以及它是开源的,并且可以在我尝试过的任何浏览器中使用)为此解决方案+1,希望此举至少能使其他人搜索到一些想法。

:)

老丝阿飞 2020.03.24

所选答案将适用于除IE之外的所有内容。我写了一个关于如何使其在跨浏览器中工作的教程= http://www.andy-howard.com/how-to-play-sounds-cross-browser-includes-ie/index.html

这是我写的函数;

function playSomeSounds(soundPath)
 {

 var trident = !!navigator.userAgent.match(/Trident\/7.0/);
 var net = !!navigator.userAgent.match(/.NET4.0E/);
 var IE11 = trident && net
 var IEold = ( navigator.userAgent.match(/MSIE/i) ? true : false );
 if(IE11 || IEold){
 document.all.sound.src = soundPath;
 }
 else
 {
 var snd = new Audio(soundPath); // buffers automatically when created
 snd.play();
 }
 };

您还需要将以下标记添加到html页面:

<bgsound id="sound">

最后,您可以调用该函数并在此处简单地通过路径:

playSomeSounds("sounds/welcome.wav");
蛋蛋Davaid 2020.03.24

我建议使用SoundJS,这是我帮助开发的一个库。它使您可以编写一个适用于任何地方的代码库,SoundJS可以根据需要选择Web音频,html音频或Flash音频。

它可以让您做所有您想做的事情:

  • 播放和混合多种声音,
  • 多次播放相同的样本,可能会重复播放
  • 随时中断样本播放
  • 播放包含的WAV文件(取决于浏览器支持)

希望能有所帮助。

HarryL 2020.03.24

不可能使用单个<audio>元素进行多次射击为此,您需要使用多个元素。

番长樱梅 2020.03.24

我在对音乐盒卡生成器进行编程时遇到了这个问题。从不同的库开始,但每次都会出现故障。常规音频实现的延迟很糟糕,没有多次播放...最终使用lowlag库+ soundmanager结束了:

http://lowlag.alienbill.com/http://www.schillmania.com/projects/soundmanager2/

您可以在此处查看实现:http : //musicbox.grit.it/

我为多个浏览器播放生成了wav + ogg文件。此音乐盒播放器可在ipad,iphone,Nexus,mac,pc等设备上响应。

小胖路易 2020.03.24

http://robert.ocallahan.org/2011/11/latency-of-html5-sounds.html

http://people.mozilla.org/~roc/audio-latency-repeating.html

我可以在Firefox和Chrome中正常运行。

要停止开始的声音,请执行var sound = document.getElementById(“ shot”)。cloneNode(true);。sound.play(); 以及后来的sound.pause();

凯樱Gil 2020.03.24

这是个主意。将特定类别的声音的所有音频加载到单个音频元素中,其中src数据是您在连续音频文件中的所有样本(可能希望保持沉默),这样您就可以以更短的超时捕获和剪切样本出血至下一个样本的风险)。然后,寻找样本并在需要时播放。

如果您需要播放其中一个以上的声音,则可以创建一个具有相同src的附加音频元素,以便对其进行缓存。现在,您实际上有多个“轨道”。您可以使用自己喜欢的资源分配方案(如Round Robin等)利用轨道组。

您还可以指定其他选项,例如在该资源可用时将声音排队到要播放的曲目中或剪切当前正在播放的样本。

西里斯丁 2020.03.24

要多次播放相同的样本,不可能做这样的事情:

e.pause(); // Perhaps optional
e.currentTime = 0;
e.play();

e是音频元素)

也许我完全误解了您的问题,您是否希望声音效果同时播放多次?那么这是完全错误的。

Jim猴子Eva 2020.03.24

看看jai(-> mirror)(javascript音频接口)站点。通过查看其来源,他们似乎在play()反复调用,并且提到它们的库可能适合在基于HTML5的游戏中使用。

您可以同时触发多个音频事件,这些事件可用于创建Javascript游戏或通过某些背景音乐进行语音播放

Davaid小哥 2020.03.24

听起来像您想要的是多声道声音。假设您有4个频道(例如在非常古老的16位游戏中),我还没有完全使用HTML5音频功能,但是您是否只需要4个<audio>元素,并使用了循环播放下一个音效?你有尝试过吗?怎么了?如果有效:要同时播放更多声音,只需添加更多<audio>元素。

我之前没有HTML5 <audio>元素,使用了http://flash-mp3-player.net/中的一个Flash对象来完成此操作-我写了一个音乐测验(http://webdeavour.appspot.com/),当用户单击问题按钮时,用它来播放音乐片段。最初,每个问题只有一个播放器,可以将它们彼此叠加播放,因此我将其更改为只有一个播放器,我指的是不同的音乐片段。

卡卡西Near 2020.03.24

W3C的WebAudio API

自2012年7月起,Chrome现已支持WebAudio API,而Firefox至少已部分支持WebAudio API,并将于版本6起将其添加到IOS。

尽管它足够健壮,可以以编程方式用于基本任务,但Audio元素绝不是要为游戏等提供完整的音频支持。它设计为允许将单个媒体嵌入到页面中,类似于img。标签。尝试在游戏中使用音频标签存在很多问题:

  • 时序图在音频元素中很常见
  • 每个声音实例都需要一个Audio元素
  • 负载事件并不完全可靠
  • 没有通用的音量控制,没有衰减,没有滤镜/效果

我使用这篇WebAudio入门文章来开始使用WebAudio API。炮塔防御WebAudio案例也很好看。

番长樱梅 2020.03.24

这是一种使同时播放相同声音成为可能的方法。与预加载器结合使用,一切就绪。至少可以在Firefox 17.0.1上运行,还没有进行其他测试。

// collection of sounds that are playing
var playing={};
// collection of sounds
var sounds={step:"knock.ogg",throw:"swing.ogg"};

// function that is used to play sounds
function player(x)
{
    var a,b;
    b=new Date();
    a=x+b.getTime();
    playing[a]=new Audio(sounds[x]);
    // with this we prevent playing-object from becoming a memory-monster:
    playing[a].onended=function(){delete playing[a]};
    playing[a].play();
}

将此绑定到键盘键,即可享受:

player("step");
宝儿DavaidL 2020.03.24

HTML5 Audio对象

您无需理会<audio>元素。HTML 5使您可以直接访问Audio对象

var snd = new Audio("file.wav"); // buffers automatically when created
snd.play();

当前版本的规范不支持混合。

要多次播放相同的声音,请创建Audio对象的多个实例您还可以snd.currentTime=0在对象播放完毕后对其进行设置


由于JS构造函数不支持后备<source>元素,因此您应该使用

(new Audio()).canPlayType("audio/ogg; codecs=vorbis")

测试浏览器是否支持Ogg Vorbis。


如果您正在编写游戏或音乐应用程序(不仅仅是播放器),则需要使用更高级的Web Audio API大多数浏览器现在都支持API

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android