WebAudio入門 - NISOCnisoc.or.jp/~ishimoto/study/20151003/WebAudio20151003.pdf · 2015. 10. 6. ·...

WebAudio入門いしもと

[email protected]

WebAudio

• HTML5の機能の中の、オーディオに関わる実装

• JavaスクリプトのAPI

• 2013年よりW3CにてWorkingDraftとして開発中

• http://www.w3.org/TR/webaudio/

WebAudioでできること

• ブラウザだけで

• 音声合成

• メディアの再生

• MIDIの操作・接続

特徴• モジュラーの概念 • 部品(Node)を接続してルーティングする

部品のパラメータ

Oscillator : オシレーター

AudioBufferSource : オーディオバッファソース

Gain : ゲイン

BiquadFilter : バイクワッド・フィルター

Delay : ディレイ

ScriptProcessor : スクリプトプロセッサー

Panner : パンナー

Convolver : コンボルバー

Analyser : アナライザー

ChannelSplitter : チャンネルスプリッター

ChannelMerger : チャンネルマージャー

DynamicsCompressor : ダイナミクス・コンプレッサー

WaveShaper : ウェーブシェイパー

音を出してみる<html>

<body>

<script type="text/javascript" src=“./テスト.js">

</script>

<script type="text/javascript" src=“./bufferloader.js">

</script>

【再生ボタン】

わーお<button onclick=“play1()">Play1</button>

【停止ボタン】

<button onclick=“stop1()">Stop1</button>

【ボリュームスライダー】

<input id="volume1" type="range" value="50" onChange=“volumeChange1()">

<br/>

</body> </html>

function BufferLoader(context, urlList, callback) { this.context = context; this.urlList = urlList; this.onload = callback; this.bufferList = new Array(); this.loadCount = 0; } BufferLoader.prototype.loadBuffer = function(url, index) { // Load buffer asynchronously var request = new XMLHttpRequest(); request.open("GET", url, true); request.responseType = "arraybuffer"; var loader = this; request.onload = function() { // Asynchronously decode the audio file data in request.response loader.context.decodeAudioData( request.response, function(buffer) { if (!buffer) { alert('error decoding file data: ' + url); return; } loader.bufferList[index] = buffer; if (++loader.loadCount == loader.urlList.length) loader.onload(loader.bufferList); }, function(error) { console.error('decodeAudioData error', error); } ); } request.onerror = function() { alert('BufferLoader: XHR error'); } request.send(); } BufferLoader.prototype.load = function() { for (var i = 0; i < this.urlList.length; ++i) this.loadBuffer(this.urlList[i], i); } function playSound1(buffer,time) { source = context.createBufferSource(); gainNode = context.createGain();

source.buffer = buffer; source.loop = false; source.connect(gainNode);

gainNode.connect(context.destination); gainNode.gain.value = 5;

source.start();

return { source: source, gainNode: gainNode }; }

index.html bufferloader.js

音を出してみる(テスト.js)window.onload = init; var context; var bufferLoader;

function init() { //SafariなどのWebkitベースの場合の指定

//context = new webkitAudioContext(); context = new AudioContext(); bufferLoader = new

//再生したいファイルを指定し、バッファにロード

BufferLoader(context,['./waao.wav']); bufferLoader.load(); }

var source1;

// htmlのonclickに対応する関数（再生）

function play1() { var startTime = context.currentTime + 0.500; source1 = playSound1(bufferLoader.bufferList[0],startTime); } // htmlのonclickに対応する関数（再生ストップ）

function stop1() { source.stop(0); } // htmlのinput range に対応する関数（再生ストップ）

function volumeChange1() { var value = document.getElementById( 'volume1' ).value; var volume = ( value / 10 ) ; gainNode.gain.value = volume; }

音を出してみる(テスト.js)function playSound1(buffer,time) { source = context.createBufferSource(); gainNode = context.createGain();

source.buffer = buffer; source.loop = false; // ソースバッファを音量制御に接続

source.connect(gainNode); // 音量制御を出力に接続

gainNode.connect(context.destination); gainNode.gain.value = 5;

// 再生開始

source.start();

return { source: source, gainNode: gainNode }; }

音を出してみる(テスト.js)MacでローカルWebサーバ

サーバーのルートにしたいディレクトリまで cd コマンドで移動したら、下記コマンドを実行。

$ python -m SimpleHTTPServer 8888

応用（ポン出し）ポン出し => ライブや催事に効果音を再生すること

必要な数だけロードしてショット再生テキストエディタで自由に足せるヨ。

WebAudioを使ったスゴいデモ

g200kg さんのWebModular (HTML5 モジュラーシンセサイザー)

参考にさせていただいたサイトWeb Audio API W3C Working Draft 10 October 2013 http://www.w3.org/TR/webaudio/

Web Audio API 解説 http://www.g200kg.com/jp/docs/webaudio/

Web Audio API の基礎 http://www.html5rocks.com/ja/tutorials/webaudio/intro/

ありがとうございました。

WebAudio入門 - NISOCnisoc.or.jp/~ishimoto/study/20151003/WebAudio20151003.pdf · 2015. 10. 6. ·...

Documents

Transcript of WebAudio入門 - NISOCnisoc.or.jp/~ishimoto/study/20151003/WebAudio20151003.pdf · 2015. 10. 6. ·...