目前的Web Audio API

#2012-06-12 update - iOS6支援Web Audio API

Web Audio API是一個提供你方便處理或合成聲音的JavaScript API，它是最近這一年內才逐漸開始發展的標準，主要負責推動此標準的是W3C Audio Working Group，該組識是在去年3月25日才成立的，根據他們預期的規劃來看~ 2011年第2季會發佈初步的工作草案(Working Draft)，並預計在2012年第3季成為正式標準，不過直到去年2011年12月15日該組識才發佈初步的Web Audio API - Working Draft，談到這邊.. 那為何需要有此標準呢？HTML5不是已經定義好<audio>標籤了嗎？我想應該這麼說~ HTML5 <audio> Tag的主要目的是用於Media Playback，所以它允許你可以將聲音檔放在網路上，並透過瀏覽器直接播放而不需要仰賴其它的Plugin(如：Flash Player)，但...如果我們想動態製造些混音或聲音特效時該怎麼處理？為何當初Angry Birds Chrome的聲音功能還需要仰賴Flash呢？而這也就是為何需要有Web Audio API存在的原因。

P.S. Angry Birds Chrome開發人員使用Web Audio API後的心得

玩玩看吧! 改一下下述程式你也能很快的做出一些混音或聲音特效。

var audioContext;
var audioBuffer;

window.addEventListener('load', init, false);
function init() 
{
	try 
	{
		audioContext = new webkitAudioContext();	
		loadSound("music.mp3");
	}	
	catch(e) {
		alert(e);
	}
}
function loadSound(url)
{
	var xhr = new XMLHttpRequest();
	xhr.open("GET", url, true);
	xhr.responseType = "arraybuffer";
	xhr.onload = function() 
	{
		audioContext.decodeAudioData(xhr.response, function(buffer) 
			{
				audioBuffer = buffer;
				playSound();
			}, function(e){alert(e);}
		);
	};
	xhr.send();
}
function playSound()
{
	var source = audioContext.createBufferSource();
	var gainNode = audioContext.createGainNode();
	var filter = audioContext.createBiquadFilter();
	source.connect(filter);
	source.buffer = audioBuffer;
	
	filter.connect(gainNode);
	filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
	filter.frequency.value = 500; // Set cutoff to 500 HZ
	
	gainNode.gain.value = 1.0;
	gainNode.connect(audioContext.destination);		
	source.noteOn(0);
}

相關資源

．GETTING STARTED WITH WEB AUDIO API

．DEVELOPING GAME AUDIO WITH THE WEB AUDIO API