HTML5オーディオを操作するための5つのライブラリとAPI

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

キーテイクアウト：

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

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

1. ヘルパーは、オーディオ再生をリアルタイムで視覚化します。 ライブラリのGitHubリポジトリには、さらに例が含まれています。 古いブラウザ用のポリフィルの不足に注意してください

<code class="language-javascript">// 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);
});</code>

howler.jsanalyser2canvas

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

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

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

キャッシュ

マルチトラック再生

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

メソッドチェーン

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

• <code class="language-javascript">// 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);
  });</code>

  3. pedalboard.js

  Pedalboard.jsは、WebオーディオAPIを使用して、特にギターのオーディオエフェクトの作成に焦点を当てています。 そのオブジェクト指向の構造は、エフェクトチェーンの作成を簡素化します。 pedals.ioはその機能を例示しています

  

  例：

  <code class="language-javascript">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');</code>

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

  <code class="language-javascript">// 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);</code>

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

  fifer

  5. Fiferは、フラッシュフォールバックを備えたHTML5オーディオAPIの小さなライブラリです。 その単純なAPIは、
  例：
  その重要な利点は、フラッシュフォールバックによる後方互換性です。
  Web Audio APIリソースとブラウザのサポート：

  <code class="language-javascript">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 } })</code>

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

  よくある質問（FAQ）：（このセクションは、書き換え/言い換えタスクとは無関係の情報が含まれており、かなりの長さを追加するため省略されています。

以上がHTML5オーディオを操作するための5つのライブラリとAPIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。