在過去的幾個(gè)月中，我遇到了許多不同的庫(kù)，它們利用了相對(duì)較新的HTML5 Audio API以及更著名的HTML5 Audio Element及其更簡(jiǎn)單的API。

我以為我會(huì)在本文中分享這些庫(kù)中的一小部分，以向您展示如果選擇創(chuàng)建需要操縱聲音文件的游戲或應(yīng)用程序，可能的情況以及有哪些選擇。

其中一些庫(kù)隨附的一些演示非常不錯(cuò)，并且每個(gè)庫(kù)的代碼都非常干凈且易于使用。

1. webaudiox.js

Webaudiox.js并不是一個(gè)庫(kù)，而是一組用于使用Web Audio API的幫助程序。 它具有零依賴性，并且可以在任何支持Web Audio API的瀏覽器中使用。

該文檔以樣板形式提供了一個(gè)簡(jiǎn)單的代碼示例，如下所示：

// 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);

});

如第一個(gè)代碼注釋中所示，必須首先包含webaudiox.js幫助程序文件才能使其正常工作。

除了它們的語法外觀之外，這并不能告訴我們很多有關(guān)這些幫助器的信息。 要查看其工作原理，請(qǐng)看analyser2canvas Helper 。 該幫助程序利用AnalyserNode接口的優(yōu)勢(shì)實(shí)時(shí)顯示所播放聲音的可視化。

webaudiox.js GitHub存儲(chǔ)庫(kù)還有許多其他示例可以嘗試。 當(dāng)然，為了使這些演示正常工作，您的瀏覽器必須支持Web Audio API(稍后會(huì)對(duì)此進(jìn)行更多介紹)。 這組幫助程序不是polyfill，因此，如果您需要較舊的瀏覽器支持，那么除非您計(jì)劃將其與另一個(gè)腳本或庫(kù)或某種后備方式結(jié)合使用，否則這不是一個(gè)好選擇。

據(jù)我所知，webaudiox.js可能是在HTML5游戲中使用的不錯(cuò)選擇。

2. Howler.js

Howler.js被簡(jiǎn)單地吹捧為“現(xiàn)代Web的JavaScript音頻庫(kù)”，默認(rèn)為Web Audio API，而后退為HTML5 audio 。

該庫(kù)的功能廣泛。 一些重點(diǎn)包括：

支持多種文件格式，以更廣泛地支持瀏覽器

Web Audio API和HTML5音頻的緩存功能

同時(shí)播放多軌

全局和單軌靜音/取消靜音和音量控制

方法鏈

3KB gzip，沒有依賴項(xiàng)

描述該庫(kù)的官方博客文章包括許多演示如何執(zhí)行的頁面演示，因此請(qǐng)務(wù)必檢查一下。

為了演示語法，這是一個(gè)很酷的示例，稱為“聲音精靈”，您可以在一個(gè)聲音文件中定義不同聲音的位置：

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外觀簡(jiǎn)潔明了，似乎很容易理解和開始使用。 因?yàn)檫@使用了新的Web Audio API并回退到了HTML5音頻，所以對(duì)瀏覽器的支持很強(qiáng)。

該庫(kù)的作者將其描述為“游戲的絕佳之選”，但對(duì)于任何其他與音頻相關(guān)的網(wǎng)絡(luò)應(yīng)用程序同樣如此。

3. Pedalboard.js

像到目前為止討論的以前的庫(kù)一樣， Pedalboard.js也使用Web Audio API，但這一次它用于在聲源上創(chuàng)建音頻效果，尤其是針對(duì)吉他效果。 簡(jiǎn)而言之，您可以使用此API創(chuàng)建自己的踏板，通過它可以操縱吉他聲音。 向您展示此API的強(qiáng)大功能的一個(gè)很好的例子是Pedals.io ，“云中的吉他效果”：

API的語法是面向?qū)ο蟮?#xff0c;因此它很干凈且易于使用。 這是一個(gè)例子：

// 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);

上面的代碼基于一個(gè)“舞臺(tái)”對(duì)象，該對(duì)象包含“木板”，而該木板又包含能夠創(chuàng)建所需效果的“踏板”。

誠(chéng)然，這不一定會(huì)成為構(gòu)建游戲或其他應(yīng)用程序的最有用的庫(kù)，但是我敢肯定，如果有一些創(chuàng)造性的思考，您可以為此提供一些很棒的東西。 該庫(kù)可在任何支持Web Audio API的瀏覽器中使用。

附帶說明一下，如果您喜歡此庫(kù)，則可能還需要查看Band.js ，這是一種“音樂作曲家” API，支持節(jié)奏，多種樂器，重復(fù)部分和復(fù)雜的拍號(hào) 。

4.一團(tuán)

Wad代表Web Audio DAW(數(shù)字音頻工作站)，它被描述為“耳朵上的jQuery”。 它是一個(gè)庫(kù)，可幫助簡(jiǎn)化使用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 } })

再次，一個(gè)非常干凈的API具有很多功能。 您可以在此演示頁面上測(cè)試上述代碼以及其他示例(軍鼓，長(zhǎng)笛，踩hi等)。

功能包括平移，3D平移，過濾器(如上面的代碼所示)，混響，麥克風(fēng)輸入以及從外部庫(kù)中合并效果的功能。

作者指出，該庫(kù)中的一個(gè)主要缺陷是它似乎無法在Firefox中工作。

5.費(fèi)弗

Fifer是HTML5音頻API的“微型庫(kù)”，在較舊的瀏覽器中可以使用輕量級(jí)Flash版本。

該語法包括許多用于游戲或其他應(yīng)用程序的音頻的簡(jiǎn)單可鏈接方法。

API的功能包括：

預(yù)加載并注冊(cè)文件

播放帶有可選循環(huán)和結(jié)束回調(diào)的文件

同時(shí)停止或靜音單個(gè)文件或所有文件

這是語法示例：

Fifer({ swf : '../Fifer.swf' }).loaded(function(files) {

console.log('loaded');

this.bang();

}).onAudioProcess(function(arr) {

console.log(arr);

}).registerAudio('bang','bang.mp3',true)

該庫(kù)非常簡(jiǎn)單明了，因此對(duì)于想要在Fifer基礎(chǔ)上構(gòu)建更大的項(xiàng)目來說，它可能是一個(gè)不錯(cuò)的選擇。 如上所述，最大的好處是，當(dāng)Web Audio API不可用時(shí)，它將回落到Flash。

并請(qǐng)注意，此API基于HTML5音頻，而不是Web Audio API，因此支持返回到HTML5和IE8的IE9，以及Flash后備的早期版本。

該倉(cāng)庫(kù)有一個(gè)非常簡(jiǎn)單的示例 ，可以在此處預(yù)覽 。 沒什么，只是帶有SWF后備的MP3格式的“砰”聲。

Web Audio API資源

上面討論的所有庫(kù)都使您可以使用Web Audio API的強(qiáng)大功能和功能，而不必深入研究該規(guī)范，從而提供了一個(gè)不錯(cuò)的簡(jiǎn)潔API。

但是，如果您想學(xué)習(xí)API來構(gòu)建自己的東西，請(qǐng)查閱Boris Smus撰寫的《 Web Audio API 》一書，該書可以從O'Reilly免費(fèi)在線獲得，也可以購(gòu)買印刷版或典型的電子版。

還有HTML5 Rocks上的Web Audio簡(jiǎn)介 ，以及有關(guān)MDN 主題的文檔 。

瀏覽器支持

如果您選擇的庫(kù)使用HTML5音頻，則包括IE9 +在內(nèi)的任何地方都可以使用支持。 但是，如果該庫(kù)使用Web Audio API(與上述所有庫(kù)(Fifer除外)一樣)，則支持效果不佳 。

一些移動(dòng)瀏覽器缺少支持，而Safari需要供應(yīng)商前綴。 但是，最糟糕的消息是，沒有支持Web Audio API的IE版本，甚至沒有IE11。 對(duì)于IE團(tuán)隊(duì)來說，這是一個(gè)未解決的問題 ，因此希望很快會(huì)有所改變。

From: https://www.sitepoint.com/5-libraries-html5-audio-api/

總結(jié)

以上是生活随笔為你收集整理的一段简单的html 5 音频,5个用于处理HTML5音频的库和API的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。