5个用于处理HTML5音频的库和API

最新推荐文章于 2021-05-31 04:04:02 发布

dingshi7798

最新推荐文章于 2021-05-31 04:04:02 发布

阅读量196

点赞数

文章标签： javascript ViewUI

在过去的几个月中，我遇到了许多不同的库，它们利用了相对较新的HTML5 Audio API以及更著名的HTML5 Audio Element及其更简单的API。

我以为我会在本文中分享这些库中的一小部分，以向您展示如果选择创建需要操纵声音文件的游戏或应用程序，可能的情况以及有哪些选择。

其中一些库随附的一些演示非常不错，并且每个库的代码都非常干净且易于使用。

1. webaudiox.js

Webaudiox.js并不是一个库，而是一组用于使用Web Audio API的帮助程序。它具有零依赖性，并且可以在任何支持Web Audio API的浏览器中使用。

该文档以样板形式提供了一个简单的代码示例，如下所示：

// after including the webaudiox library
var context = new AudioContext()

// Create lineOut
var lineOut = new WebAudiox.LineOut(context)

// load a sound and play it immediatly
WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){
    // init AudioBufferSourceNode
    var source  = context.createBufferSource();
    source.buffer = buffer
    source.connect(lineOut.destination)

    // start the sound now
    source.start(0);
});

如第一个代码注释中所示，必须首先包含webaudiox.js帮助程序文件才能使其正常工作。

除了它们的语法外观之外，这并不能告诉我们很多有关这些帮助器的信息。要查看其工作原理，请看analyser2canvas Helper 。该帮助程序利用AnalyserNode接口的优势实时显示所播放声音的可视化。

webaudiox.js GitHub存储库还有许多其他示例可以尝试。当然，为了使这些演示正常工作，您的浏览器必须支持Web Audio API（稍后会对此进行更多介绍）。这组帮助程序不是polyfill，因此，如果您需要较旧的浏览器支持，那么除非您计划将其与另一个脚本或库或某种后备方式结合使用，否则这不是一个好选择。

据我所知，webaudiox.js可能是在HTML5游戏中使用的不错选择。

2. Howler.js

Howler.js被简单地吹捧为“现代Web的JavaScript音频库”，默认为Web Audio API，而后退为HTML5 audio 。

该库的功能广泛。一些重点包括：

支持多种文件格式，以更广泛地支持浏览器
Web Audio API和HTML5音频的缓存功能
同时播放多轨
全局和单轨静音/取消静音和音量控制
方法链
3KB gzip，没有依赖项

描述该库的官方博客文章包括许多演示如何执行的页面演示，因此请务必检查一下。

为了演示语法，这是一个很酷的示例，称为“声音精灵”，您可以在一个声音文件中定义不同声音的位置：

var sound = new Howl({
  urls: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 1000],
    laser: [2000, 3000],
    winner: [4000, 7500]
  }
});

// shoot the laser!
sound.play('laser');

我喜欢这种语法，该API外观简洁明了，似乎很容易理解和开始使用。因为这使用了新的Web Audio API并回退到了HTML5音频，所以对浏览器的支持很强。

该库的作者将其描述为“游戏的绝佳之选”，但对于任何其他与音频相关的网络应用程序同样如此。

3. Pedalboard.js

像到目前为止讨论的以前的库一样， Pedalboard.js也使用Web Audio API，但这一次它用于在声源上创建音频效果，尤其是针对吉他效果。简而言之，您可以使用此API创建自己的踏板，通过它可以操纵吉他声音。向您展示此API的强大功能的一个很好的例子是Pedals.io ，“云中的吉他效果”：

API的语法是面向对象的，因此它很干净且易于使用。这是一个例子：

// initialize the stage and get the context
var stage = new pb.Stage();
var ctx = stage.getContext();

// initialize the board and pedals
var board = new pb.Board(ctx);
var od = new pb.stomp.Overdrive(ctx);
var reverb = new pb.stomp.Reverb(ctx);
var vol = new pb.stomp.Volume(ctx);

// add pedals to board
board.addPedals([od, reverb]);
board.addPedalsAt(1, vol);

// tweak pedal settings
od.setDrive(0.7);
od.setLevel(0.7);
reverb.setLevel(0.3);
vol.setLevel(0.2);

// set the board on stage and start playing!
stage.setBoard(board);

上面的代码基于一个“舞台”对象，该对象包含“木板”，而该木板又包含能够创建所需效果的“踏板”。

诚然，这不一定会成为构建游戏或其他应用程序的最有用的库，但是我敢肯定，如果有一些创造性的思考，您可以为此提供一些很棒的东西。该库可在任何支持Web Audio API的浏览器中使用。

附带说明一下，如果您喜欢此库，则可能还需要查看Band.js ，这是一种“音乐作曲家” API，支持节奏，多种乐器，重复部分和复杂的拍号。

4.一团

Wad代表Web Audio DAW（数字音频工作站），它被描述为“耳朵上的jQuery”。它是一个库，可帮助简化使用Web Audio API的音频处理。

这是语法示例，其中介绍了使用“方波”合成的钢琴音轨：

var piano = new Wad({
    source : 'square', 
    env : {
        attack : .01, 
        decay : .005, 
        sustain : .2, 
        hold : .015, 
        release : .3
    }, 
    filter : {
        type : 'lowpass', 
        frequency : 1200, 
        q : 8.5, 
        env : {
            attack : .2, 
            frequency : 600
        }
    }
})

piano.play({ pitch : 'C5' })
piano.play({ pitch : 'Eb5', filter : { q : 15 } })
piano.play({ pitch : 'F5', env : { release : .2 } })

再次，一个非常干净的API具有很多功能。您可以在此演示页面上测试上述代码以及其他示例（军鼓，长笛，踩hi等）。

功能包括平移，3D平移，过滤器（如上面的代码所示），混响，麦克风输入以及从外部库中合并效果的功能。

作者指出，该库中的一个主要缺陷是它似乎无法在Firefox中工作。

5.费弗

Fifer是HTML5音频API的“微型库”，在较旧的浏览器中可以使用轻量级Flash版本。

该语法包括许多用于游戏或其他应用程序的音频的简单可链接方法。

API的功能包括：

预加载并注册文件
播放带有可选循环和结束回调的文件
同时停止或静音单个文件或所有文件

这是语法示例：

Fifer({ swf : '../Fifer.swf' }).loaded(function(files) {
    console.log('loaded');
    this.bang();
}).onAudioProcess(function(arr) {
    console.log(arr);
}).registerAudio('bang','bang.mp3',true)

该库非常简单明了，因此对于想要在Fifer基础上构建更大的项目来说，它可能是一个不错的选择。如上所述，最大的好处是，当Web Audio API不可用时，它将回落到Flash。

并请注意，此API基于HTML5音频，而不是Web Audio API，因此支持返回到HTML5和IE8的IE9，以及Flash后备的早期版本。

该仓库有一个非常简单的示例，可以在此处预览。没什么，只是带有SWF后备的MP3格式的“砰”声。