>這篇文章探討了幾個(gè)利用HTML5音頻API和HTML5音頻元素的JavaScript庫，並提供了各種在網(wǎng)絡(luò)遊戲和應(yīng)用程序中進(jìn)行聲音操作的方法。 圖書館展示了各種特徵和復(fù)雜性，滿足了不同的項(xiàng)目需求。

關(guān)鍵要點(diǎn)：

• webaudiox.js： Web Audio API的輕量級(jí)助手集，具有零依賴性。 HTML5遊戲的理想選擇，但缺乏較舊的瀏覽器支持，沒有其他腳本。
> howler.js：
• 一個(gè)可靠的JavaScript音頻庫，使用HTML5音頻後備默認(rèn)為Web Audio API。 支持多種格式，同時(shí)播放並提供廣泛的功能，使其適合遊戲和以音頻為中心的Web應(yīng)用程序。 > >
pedalboard.js：
• 使用Web Audio API專門創(chuàng)建音頻效果，尤其是吉他效果。它的面向?qū)ο蟮脑O(shè)計(jì)很乾淨(jìng)，但對(duì)於一般遊戲開發(fā)而言可能不太通用。 >
fifer：
• > html5音頻API的最小庫，較舊的瀏覽器帶有閃光迴聲。它的簡(jiǎn)單性使其成為大型項(xiàng)目的良好基礎(chǔ)，支持IE9（HTML5）和IE8（flash）。 > wad： Web音頻DAW（數(shù)字音頻工作站）庫簡(jiǎn)化了Web Audio API操縱。提供Panning，3D Panning，過濾器和混響等功能，但目前缺乏Firefox支持。
• > webaudiox.js

1. > webaudiox.js為Web音頻API提供輔助功能，不需要外部庫。 它的瀏覽器兼容性僅限於支持Web音頻API的瀏覽器。 下面的示例演示了其基本用法：

助手實(shí)時(shí)可視化音頻播放。 圖書館的GitHub存儲(chǔ)庫包含進(jìn)一步的示例。 請(qǐng)注意，它缺乏較舊瀏覽器的多填充。

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

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

// load a sound and play it immediately
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);
});

analyser2canvas

howler.js

2. howler.js是一個(gè)多功能的JavaScript音頻庫，優(yōu)先考慮Web音頻API，但倒退到HTML5 Audio。

>關(guān)鍵功能包括：

多格式支持

緩存

>多軌播放

• >全球/軌道特定音量和靜音控件
• 方法鏈接
• >輕量級(jí)（3KB GZPICPECT）
>其乾淨(jìng)的API和全面的功能使其適合遊戲以外的各種Web應(yīng)用程序。 下面的“聲音精靈”示例說明了其簡(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 immediately
  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);
  });

  3. > pedalboard.js

  > pedalboard.js專注於創(chuàng)建音頻效果，尤其是使用Web Audio API來創(chuàng)建吉他。 其面向?qū)ο蟮慕Y(jié)構(gòu)簡(jiǎn)化了效應(yīng)鏈的創(chuàng)建。 踏板.io示例其功能。

  

  >示例：

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

  雖然可以超越其核心功能，但可以使用專門的創(chuàng)意應(yīng)用程序。

  >

  4. >

  wad（Web Audio DAW）簡(jiǎn)化了Web音頻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);

  >功能包括平移，3D平板，過濾器，混響和麥克風(fēng)輸入。 但是，它目前缺乏firefox的支持。

  fifer

  5. FIFER是帶有Flash後備的HTML5音頻API的小庫。 它的直接API適合構(gòu)建。

     >示例：

  它的主要優(yōu)勢(shì)是通過Flash後備。 > Web音頻API資源和瀏覽器支持：

  上面的庫摘要摘要Web音頻API，但是直接API學(xué)習(xí)的資源包括Boris Smus的“ Web Audio API”書籍（O'Reilly），HTML5 Rocks的Web Audio簡(jiǎn)介和MDN的文檔。 瀏覽器對(duì)Web Audio API的支持不是通用的，缺乏某些移動(dòng)瀏覽器和Safari（需要供應(yīng)商前綴），並且在IE中完全不存在。

  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 } })

  >

  常見問題（常見問題解答）：（省略了此部分，因?yàn)樗c重寫/釋義任務(wù)無關(guān)的信息，並增加了長(zhǎng)度。如果需要，可以重新添加。）

  ）

  以上是5個(gè)庫和API，用於操縱HTML5音頻的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！