⏫ 🈲 🔑 ビジュアライザーの作成例でAudio APIを試します 🧛🏽 💄 ♏️

私にとってのWeb Audio APIは、ブラウザーが今やぎっしり詰まっている革新の1つであり、私は友達を作り、少なくともこれを使って何ができるかに触発されたいと思っていました。浸透するために、単純なオーディオビジュアライザーを作成することにしました。

ただし、Audio APIを直接扱う前に、ビジュアライザーの空白部分をスケッチする必要があります。これは、キャンバスを使用して行います。

株式を作成する

この部分に興味がない場合は、単にスキップできます。

株式を作成する

キャンバスを作成します：

var canva = document.createElement('canvas'); var ctx = canva.getContext('2d'); //      canva.width = window.innerWidth; canva.height = window.innerHeight; //    document.body.appendChild(canvas);

さて、キャンバスがあり、サウンド信号を視覚化する要素を作成する必要があります。私たちの場合、これらは通常の円になります。

 var particles = [];//      var createParticles = function () { var particle = null; for (var i = 0; i < 50; i++) { particle = new Particle(); particles.push(particle); } //   -  setInterval(draw,33); }

円を描く描画関数は次のとおりです。

 var draw = function () { //     ctx.clearRect(0, 0, canva.width, canva.height); for (var i = 0; i < 50; i++) { var loc = particles[i]; loc.draw(); } }

実際、ワークピースはほぼ準備ができており、パーティクルパーティクルコンストラクタのみが残ります。

 var Particle = function () { this.init(); }; Particle.prototype = { init: function () { this.x = random(canva.width); this.y = random(canva.height); this.level = 1 * random(4); this.speed = random(0.2, 1); this.radius = random(10, 70); //  this.color = random(['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423']); //  this.opacity = random(0.2, 1); this.band = Math.floor(random(128)); }, draw: function () { var pulsar, scale; pulsar = Math.exp(this.pulse); scale = pulsar * this.radius || this.radius; ctx.save(); ctx.beginPath(); //   ctx.arc(this.x, this.y, scale, 0, Math.PI * 2); ctx.fillStyle = this.color; // ctx.globalAlpha = this.opacity / this.level; // ctx.closePath(); ctx.fill(); ctx.strokeStyle = this.color; //  ctx.stroke(); ctx.restore(); this.move(); }, move: function () { this.y -= this.speed * this.level; //         if (this.y < -100) { this.y = canva.height; } } } //   - var random: function( min, max ) { if (this.isArray( min )) { return min[ ~~( Math.random() * min.length ) ]; } if (!this.isNumber(max)) { max = min || 1, min = 0; } return min + Math.random() * ( max - min ); }, //   var isArray: function(object) { return Object.prototype.toString.call( object ) == '[object Array]'; }, //   var isNumber: function(object) { return typeof object == 'number'; }

アナライザーを作成する

したがって、ビジュアライザの作成を開始するためのすべてが揃っています。主な役割はAudioContextの概念によって果たされます。 1ページには1つのコンテキストしか設定できませんが、これはあなたの魂が望むすべてを実現するのに十分です。モジュールを作成するためのほとんどすべてのメソッドはAudioContextメソッドです。それらの完全なリストはここにあります。 AudioContext仕様はまだ完全に承認されていないため、次のように作成します。

 var AudioContext = w.AudioContext || w.webkitAudioContext; var context = new AudioContext ();

Opera、Chrome、FirefoxでAudioContextを作成するにはこれで十分です。作成したコンテキストから、次のメソッドが必要になります。

createScriptProcessor（以前のcreateJavaScriptNode） -このメソッドを使用すると、jsを使用してオーディオデータを収集、処理、または分析するためのインターフェイスを作成できます。このインターフェイスには独自のイベントハンドラがあり、新しいデータが入力に送信されるときに発生するonaudioprocessイベントに注目します。

呼び出されると、メソッドは3つの引数を取りますbufferSize-バッファーサイズ、 numInputChannels-ストリーム内の入力チャンネルの数、 numOutputChannels-出力チャンネルの数。
createMediaElementSource-オーディオまたはビデオ要素からの音源を表すインターフェースを作成します。このメソッドを呼び出した後、audio要素からのオーディオストリームはAudioContextの処理にリダイレクトされます。
createAnalyser-このメソッドを使用すると、信号の周波数および時間パラメーターに関する情報をデータの配列の形式で取得できます。アナライザーをオーディオ信号のソースとサウンドのレシーバーに接続する必要があります。

そのため、AudioContextについてわかったことを使用して、アナライザーのコンストラクターの概要を示します。

 var Analyze = function () { var AudioContext = w.AudioContext || w.webkitAudioContext; this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); }

この呼び出しにより、オーディオコンテキストとデータ分析用のインターフェイスが作成されます。アナライザーを作成するときに、 smoothingTimeConstantパラメーターの値を設定することがわかります-アナライザーがデータを必要とするポーリング頻度とfftSize-フーリエ変換次元inはfftSize / 2）に等しくなります。 Uint8Array関数を使用して、境界を明確に示す配列を作成します。この場合、長さは256になります。

 [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, …]

これまでのところ、アレイにローリングボールがありますが、分析する必要のある信号ソースがないため、これは驚くべきことではありません。コンストラクターにオーディオ要素の作成を追加すると同時に、 canplayイベントをサブスクライブします。これは、ブラウザーが再生を開始するのに十分なデータを受信したと判断したときに発生します。これを念頭に置いて、コンストラクタは次の形式を取ります。

 var Analyze = function () { var AudioContext = w.AudioContext || w.webkitAudioContext; //  this.audio = new Audio(); this.audio.src = "test1.ogg"; this.controls = true; // - this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); //  this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); //   this.audio.addEventListener("canplay", function () {}); }

作成したオーディオストリームをAudioContextに送信し、アナライザーをソースおよびレシーバーに関連付けることは残ります。これは非常に簡単です。WebAudio APIを作成した賢い人々がこれを処理してくれたおかげで、各オーディオモジュールには接続メソッドがあり、パラメーターとして値を取得する必要があります。合計、最終ビューは次のようになります。

 var Analyse = function () { var an= this, AudioContext = w.AudioContext || w.webkitAudioContext; //  this.audio = new Audio(); this.audio.src = "test1.ogg"; this.controls = true; // - this.context = new AudioContext(); this.node = this.context.createScriptProcessor(2048, 1, 1); //  this.analyser = this.context.createAnalyser(); this.analyser.smoothingTimeConstant = 0.3; this.analyser.fftSize = 512; this.bands = new Uint8Array(this.analyser.frequencyBinCount); //   this.audio.addEventListener('canplay', function () { //    AudioContext an.source = an.context.createMediaElementSource(an.audio); //    an.source.connect(an.analyser); //   ,       an.analyser.connect(an.node); //    an.node.connect(an.context.destination); an.source.connect(an.context.destination); //      an.node.onaudioprocess = function () { an.analyser.getByteFrequencyData(an.bands); if (!an.audio.paused) { if (typeof an.update === "function") { return an.update(an.bands); } else { return 0; } } }; }); return this; };

ここでは、 AudioContext.destinationに言及する価値があります-これはデフォルトのシステムサウンド出力です（通常はスピーカー）。 GetByteFrequencyDataメソッド-このメソッドは、アナライザーからデータを受信し、送信された配列にデータをコピーします。これは、クロージャーの素晴らしい魔法のおかげで最終的に返されます。

アナライザーの作成をcreateParticles関数に追加して、結果を取得します。

 var createParticles = function () { var particle = null, audio = null; for (var i = 0; i < 50; i++) { particle = new Particle(); particles.push(particle); } //  elem = new Analyse(); //  audio   document.body.appendChild(elem.audio); //       audio.update = function (bands) { var ln = 50; while (ln--) { var loc = particles[ln]; loc.pulse = bands[loc.band] / 256; } }; //     setInterval(draw,33); }

それだけです。シンプルなビジュアライザーを入手し、Web Audio APIのカーテンを少し開きました。この魅力はすべて、Chrome、Opera、Firefoxで機能します。 IEは、いつものように、船外に残ります。

このコードが使用されたもう少し洗練されたデモ： demo

Githubデモコード：アナライザー

Code Codepen：アナライザー

もちろん、これはAudio APIの機能のごく一部にすぎませんが、どこかから始める必要があります。現在、Audio APIを使用できるのは次のとおりです。

ゲームのサラウンドサウンド
音声処理アプリケーション
オーディオ合成

その他にも。

役に立つ読書：

ビジュアライザーの作成例でAudio APIを試します

株式を作成する

アナライザーを作成する

More articles: