web-dev-qa-db-ja.com

オーディオプレーヤー用のビジュアライザーを作成する方法

HTML5オーディオプレーヤーのように多くの音楽プレーヤーがありますが、それらにイコライザーを追加するにはどうすればよいですか？イコライザーとは、これを意味します： image（オーディオ視覚化の画像へのOPリンク）

音楽プレーヤーに追加する方法はありますか？

前もって感謝します

javascriptjqueryhtmlhtml5-audioaudio-player
14
Alex

Web Audio APIは非常に便利なJavaScriptツールであり、次のWebサイトはこのAPIでオーディオを視覚化する方法の例を示しています。

http://css.dzone.com/articles/exploring-html5-web-audio

8
Dylan Kay

まあ、それは遅すぎるかもしれませんが、それでも誰でも助けることができます。

スペクトルを視覚化したいだけなら、大したことではありません。

まず、AudioContextを作成し、それからアナライザーを作成します。

必要に応じて、フィラーまたはゲインノードを追加し、結果としてそれらを接続します（つまり、1つを他のものに、次にもう1つを最後に）。最後に、オーディオの宛先を接続します。

コードの例：

var canvas = document.querySelector('canvas'),
    ctx = canvas.getContext('2d');



// here we create our chain
var audio = document.querySelector('audio'),
    audioContext = new AudioContext(),
    source = audioContext.createMediaElementSource(audio),
    analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

setInterval(function(){
  var freqData = new Uint8Array(analyser.frequencyBinCount);

      analyser.getByteFrequencyData(freqData);

      ctx.clearRect(0, 0, width, height);

      for (var i = 0; i < freqData.length; i++ ) {
        var magnitude = freqData[i];
        ctx.fillRect(i*1.5, height, 1, -magnitude * 2);
      }
 }, 33);

このようなもの。ただし、このAPIの急激な変更に注意する必要があります（これが、WebオーディオAPIの多くの例が適切に機能しない理由です）。

イコライザー付きのシンプルな音楽プレーヤーを作成しました。確認できます こちら 。最初に何かを検索し（空白行でも問題ありません）、次に音楽を開始する必要があります。キャンバスが一番下にあります。

19
Bloomca

現在では、ブラウザによって部分的にサポートされています。 Web Audio API for google chrome and new safari and Audio Data API for Firefoxを使用できます。

1
Alexandr Subbotin

ちなみに、ビジュアルイコライザーを実行するサンプルコードを以下に示します。 http://updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs 。

0
cwilso