SVG＆CSS＆Audio Data API
～ ウェブの最新技術が魅せる「Firefoxの灯」（3）

音色を変えよう

　さきほど作った波形のに対して音量の時間変化（エンベロープ）を変えることで、簡易に音色を変えることができます（HTMLはjsの読み込み先を変更しただけなので割愛します）。

JS: sound_4.js

function playSound(freq, second, envelope) {
...
//音色を変える
var envelopeLength = buffer.length*envelope;
for(var i = 0; i < envelopeLength; i++){
	buffer[i] *= i / envelopeLength; 
}
for(var i = envelopeLength, n = buffer.length; i < n; i++){
	buffer[i] *= (1 - i / n); 
}
...
}

$(document).ready(function(){
$("#e").click(function() {
	playSound(329, 0.5, 0.3);
});
$("#g").click(function() {
	playSound(391, 1.0, 0.5);
});
$("#c").click(function() {
	playSound(523, 1.5, 0.7);
});
});

sound_4.html

　これ以外にも様々に周波数の調整ができるので、音色もまた様々に変えることができます。

ランダムに音を作る

　Audio Data APIの章の最後に、ここまで行ってきた音高・音長・音色の変化をランダムに組み合わせて、音を生成するボタンを作ってみます（HTMLは、jsの読み込み先を変更しただけなので割愛します）。

JS: sound_5.js

function playSound(freq, second, envelope) {
if (!Audio || !(new Audio()).mozSetup) {
	alert("この機能は Firefox で先行導入された Audio Data API を使っており\nご利用中のブラウザには対応しておりません。");
	return;
}
//サンプリングレート
var SAMPLE_RATE = 44100;
//オーディオでバイスの初期化
var audio = new Audio();
//音量 0 - 1
audio.volume = 1;
//セットアップ (下記例ではチャネル数が2でサンプリングレートが44100)
audio.mozSetup(2, SAMPLE_RATE);
//指定秒数分のバッファ SAMPLE_RATE x 2チャネル
var buffer = new Float32Array(Math.ceil(SAMPLE_RATE*second));
//波形データの生成
var k = 2* Math.PI * freq / SAMPLE_RATE;
for(var i = 0, n = buffer.length; i < n; i++){
	buffer[i] = Math.sin(k * i);
}
//音色を変える
var envelopeLength = buffer.length*envelope;
for(var i = 0; i < envelopeLength; i++){
	buffer[i] *= i / envelopeLength; 
}
for(var i = envelopeLength, n = buffer.length; i < n; i++){
	buffer[i] *= (1 - i / n); 
}

//デバイスに書き込み
audio.mozWriteAudio(buffer);
}

$(document).ready(function(){
$("#sound").click(function() {
	var freq = Math.ceil(100 + Math.random() * 300);
	var sec = Math.ceil(Math.random() * 10) / 10;
	var envelope = Math.random();
	playSound(freq, sec, envelope);
});
});

sound_5.html

おわりに

　さて、ここまで3回にわたり、灯で実際に使っている技術をソースコードを交えながら解説してきました。第1回では、灯アプリケーションには、どのような機能がどのような技術で実装されているのか、概略をまとめました。第2回では、CanvasとProcessing.jsに注目し、これらを使ってアニメーションを描画する方法などを解説しました。そして最終回では、SVG、SVG Filterの説明を皮切りに、SVGドキュメントをobjectとして取り出す方法やJavaScriptとの連携、CSS TransformとCSS Transition、Audio Data APIのサンプルを交えた具体的な実装方法を解説しました。

　本連載にて、最新の標準技術の使い方などを少しでも知っていただき、ステキなウェブアプリケーションを創出していただければ幸いです。