5個庫和API，用於操縱HTML5音頻

>這篇文章探討了幾個利用HTML5音頻API和HTML5音頻元素的JavaScript庫，並提供了各種在網絡遊戲和應用程序中進行聲音操作的方法。 圖書館展示了各種特徵和復雜性，滿足了不同的項目需求。

關鍵要點：

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

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

助手實時可視化音頻播放。 圖書館的GitHub存儲庫包含進一步的示例。 請注意，它缺乏較舊瀏覽器的多填充。

// 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是一個多功能的JavaScript音頻庫，優先考慮Web音頻API，但倒退到HTML5 Audio。

>關鍵功能包括：

多格式支持

緩存

>多軌播放

• >全球/軌道特定音量和靜音控件
• 方法鏈接
• >輕量級（3KB GZPICPECT）
>其乾淨的API和全面的功能使其適合遊戲以外的各種Web應用程序。 下面的“聲音精靈”示例說明了其簡潔的語法：

• // 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專注於創建音頻效果，尤其是使用Web Audio API來創建吉他。 其面向對象的結構簡化了效應鏈的創建。 踏板.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');

  雖然可以超越其核心功能，但可以使用專門的創意應用程序。

  >

  4. >

  wad（Web Audio DAW）簡化了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平板，過濾器，混響和麥克風輸入。 但是，它目前缺乏firefox的支持。

  fifer

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

     >示例：

  它的主要優勢是通過Flash後備。 > Web音頻API資源和瀏覽器支持：

  上面的庫摘要摘要Web音頻API，但是直接API學習的資源包括Boris Smus的“ Web Audio API”書籍（O'Reilly），HTML5 Rocks的Web Audio簡介和MDN的文檔。 瀏覽器對Web Audio API的支持不是通用的，缺乏某些移動瀏覽器和Safari（需要供應商前綴），並且在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 } })

  >

  常見問題（常見問題解答）：（省略了此部分，因為它包含與重寫/釋義任務無關的信息，並增加了長度。如果需要，可以重新添加。）

  ）

以上是5個庫和API，用於操縱HTML5音頻的詳細內容。更多資訊請關注PHP中文網其他相關文章！