ビジュアライザーの作成例で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'; } 

アナライザーを作成する

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

1. createScriptProcessor（以前のcreateJavaScriptNode） -このメソッドを使用すると、jsを使用してオーディオデータを収集、処理、または分析するためのインターフェイスを作成できます。 このインターフェイスには独自のイベントハンドラがあり、新しいデータが入力に送信されるときに発生するonaudioprocessイベントに注目します。
   呼び出されると、メソッドは3つの引数を取りますbufferSize-バッファーサイズ、 numInputChannels-ストリーム内の入力チャンネルの数、 numOutputChannels-出力チャンネルの数。
   
2. createMediaElementSource-オーディオまたはビデオ要素からの音源を表すインターフェースを作成します。 このメソッドを呼び出した後、audio要素からのオーディオストリームはAudioContextの処理にリダイレクトされます。
   
3. createAnalyser-このメソッドを使用すると、信号の周波数および時間パラメーターに関する情報をデータの配列の形式で取得できます。 アナライザーをオーディオ信号のソースとサウンドのレシーバーに接続する必要があります。
   

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

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

 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 () {}); } 

 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; }; 

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

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

• developer.mozilla.org/en-US/docs/Web/API/AudioContext
• www.html5rocks.com/en/tutorials/webaudio/intro
• creativejs.com/resources/web-audio-api-getting-started
• blogs.msdn.com/b/ie/archive/2011/05/13/unlocking-the-power-of-html5-lt-audio-gt.aspx
• updates.html5rocks.com/2012/02/HTML5-audio-and-the-Web-Audio-API-are-BFFs
• css.dzone.com/articles/exploring-html5-web-audio