この投稿では、HTML5オーディオAPIとHTML5オーディオ要素を活用するいくつかのJavaScriptライブラリを調(diào)査し、Webゲームやアプリケーションでのサウンド操作へのさまざまなアプローチを提供します。 ライブラリは、さまざまなプロジェクトのニーズに応える多様な機(jī)能と複雑さを紹介します。

キーテイクアウト：

webAudiox.js：
• Web Audio APIのヘルパーの軽量セット、依存関係はゼロです。 HTML5ゲームに最適ですが、追加のスクリプトなしで古いブラウザのサポートがありません。 howler.js：
html5オーディオフォールバックを備えたWebオーディオAPIのデフォルトで堅(jiān)牢なJavaScriptオーディオライブラリ。 複數(shù)の形式、同時(shí)再生、および広範(fàn)な機(jī)能を提供するため、ゲームやオーディオ中心のWebアプリに適したものになります。
• pedalboard.js：WebオーディオAPIを使用して、オーディオエフェクト、特にギターエフェクトの作成に特化しています。そのオブジェクト指向のデザインはクリーンですが、一般的なゲーム開(kāi)発では汎用性が低い場(chǎng)合があります。
• fifer：古いブラウザー用のフラッシュフォールバックを備えたHTML5オーディオAPI用の最小ライブラリ。そのシンプルさにより、IE9（HTML5）とIE8（Flash）に戻ることをサポートする大規(guī)模なプロジェクトの優(yōu)れた基盤(pán)となります。
wad：
• WebオーディオDAW（デジタルオーディオワークステーション）ライブラリWebオーディオAPI操作を簡(jiǎn)素化します。パンニング、3Dパンニング、フィルター、リバーブなどの機(jī)能を提供していますが、現(xiàn)在Firefoxのサポートがありません。
• webAudiox.js

WebAudiox.jsは、Web Audio APIのヘルパー関數(shù)を提供し、外部ライブラリを必要としません。 そのブラウザの互換性は、WebオーディオAPIをサポートするものに限定されています。 以下の例は、その基本的な使用法を示しています：

1. ヘルパーは、オーディオ再生をリアルタイムで視覚化します。 ライブラリの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);
});

howler.jsanalyser2canvas

howler.jsは、WebオーディオAPIの優(yōu)先順位付けがhtml5オーディオに戻る多用途のJavaScriptオーディオライブラリです。

2. 重要な機(jī)能には次のものが含まれます

マルチフォーマットサポート

キャッシュ

マルチトラック再生

グローバル/トラック固有のボリュームとミュートコントロール

メソッドチェーン

• 軽量（3kb gzipped）
そのクリーンなAPIと包括的な機(jī)能により、ゲーム以外のさまざまなWebアプリケーションに適しています。 以下の「サウンドスプライト」の例は、その簡(jiǎn)潔な構(gòu)文を示しています：

• // 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オーディオAPIを使用して、特にギターのオーディオエフェクトの作成に焦點(diǎn)を當(dāng)てています。 そのオブジェクト指向の構(gòu)造は、エフェクトチェーンの作成を簡(jiǎn)素化します。 pedals.ioはその機(jī)能を例示しています

  

  例：

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

  専門(mén)化されていますが、クリエイティブアプリケーションはそのコア機(jī)能を超えて可能です。
  wad
  WAD（Web Audio DAW）は、WebオーディオAPI操作を簡(jiǎn)素化します。 次の例は、ピアノサウンドを合成するためのその構(gòu)文を示しています：

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

  機(jī)能には、パンニング、3Dパンニング、フィルター、リバーブ、マイク入力が含まれます。 ただし、現(xiàn)在、Firefoxのサポートがありません

  fifer

  5. Fiferは、フラッシュフォールバックを備えたHTML5オーディオAPIの小さなライブラリです。 その単純なAPIは、
  例：
  その重要な利點(diǎ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 } })

  上記のライブラリはWebオーディオAPIを要約しますが、直接API學(xué)習(xí)のリソースには、Boris Smusの「Web Audio API」ブック（O'Reilly）、HTML5 RocksのWebオーディオ紹介、MDNのドキュメントが含まれます。 WebオーディオAPIのブラウザサポートは普遍的ではなく、一部のモバイルブラウザーとSafari（ベンダーのプレフィックスが必要）が不足しており、IEには完全に存在しません。

  よくある質(zhì)問(wèn)（FAQ）：（このセクションは、書(shū)き換え/言い換えタスクとは無(wú)関係の情報(bào)が含まれており、かなりの長(zhǎng)さを追加するため省略されています。

  以上がHTML5オーディオを操作するための5つのライブラリとAPIの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。