function?$(s)?{
	return?document.querySelectorAll(s);
}

var?lis?=?$('#list?li');

for?(var?i?=?0;?i?<?lis.length;?i++)?{
	lis[i].onclick?=?function()?{
		for?(var?j?=?0;?j?<?lis.length;?j++)?{
			lis[j].className?=?"";
		}
		this.className?=?"selected";
		load("/media/"?+?this.title);
	}
}

var?xhr?=?new?XMLHttpRequest();
var?ac?=?new(window.AudioContext?||?window.webkitAudioContext)();
var?gainNode?=?ac[ac.createGain???"createGain"?:?"createGainNode"]();?//?改變音頻音量的對象
gainNode.connect(ac.destination);?//所有音頻輸出聚集地

var?analyser?=?ac.createAnalyser();?//音頻分析對象
var?size?=?128;
analyser.fftSize?=?size?*?2;?//設(shè)置FFT的大小(用于將一個(gè)信號(hào)變換到頻域，默認(rèn)是2048)
analyser.connect(gainNode);

var?source?=?null;

var?count?=?0;

var?box?=?$('#box')[0];
var?height,?width;
var?canvas?=?document.createElement("canvas");
var?ctx?=?canvas.getContext("2d");
box.appendChild(canvas);

function?resize()?{?//動(dòng)態(tài)改變canva區(qū)域的寬高
	height?=?box.clientHeight;
	width?=?box.clientWidth;
	canvas.height?=?height;
	canvas.width?=?width;
	var?line?=?ctx.createLinearGradient(0,?0,?0,?height);?//創(chuàng)建線性漸變
	line.addColorStop(0,?"red");
	line.addColorStop(0.5,?"yellow");
	line.addColorStop(1,?"green");
	ctx.fillstyle?=?line;
}
resize();

window.onresize?=?resize;

function?draw(arr)?{?//?繪制矩形函數(shù)
	ctx.clearRect(0,?0,?width,?height);?//?清除上次canvas,保證流暢效果
	var?w?=?width?/?size;
	for?(var?i?=?0;?i?<?size;?i++)?{
		var?h?=?arr[i]?/?256?*?height;
		ctx.fillRect(w?*?i,?height?-?h,?w?*?0.6,?h);?//x軸坐標(biāo),y軸坐標(biāo),寬度(0.4留為間隙),高度
	}
}

function?load(url)?{
	var?n?=?++count
	source?&&?source[source.stop???"stop"?:?"noteOff"]();
	xhr.abort();?//?終止之前的異步請求(目前沒有實(shí)際作用)
	xhr.open("GET",?url);
	xhr.responseType?=?"arraybuffer";?//音頻數(shù)據(jù)已二進(jìn)制形式返回，便于解壓縮
	xhr.onload?=?function()?{?//加載完成
		if?(n?!==?count)?return;?//正常情況n和count是相等的,用到了閉包的知識(shí)
		ac.decodeAudioData(xhr.response,?function(buffer)?{?//?異步解碼包含在arrayBuffer中的音頻數(shù)據(jù)
			if?(n?!==?count)?return;
			var?bufferSource?=?ac.createBufferSource();?//?創(chuàng)建AudioBufferSourceNode對象
			bufferSource.buffer?=?buffer;?//?表示要播放的音頻資源數(shù)據(jù)
			bufferSource.connect(analyser);?//?連接到分析對象上
			bufferSource[bufferSource.start???"start"?:?"noteOn"](0);?//?老版本是noteOn
			source?=?bufferSource;
		},?function(err)?{
			console.log(err);
		});
	}
	xhr.send();
}

function?visualizer()?{
	var?arr?=?new?Uint8Array(analyser.frequencyBinCount);?//實(shí)時(shí)得到的音頻頻域的數(shù)據(jù)個(gè)數(shù)為前面設(shè)置的fftSize的一半
	requestAnimationFrame?=?window.requestAnimationFrame?||?window.webkitRequestAnimationFrame?||?window.mozRequestAnimationFrame;?//動(dòng)畫函數(shù)

	function?v()?{
		analyser.getByteFrequencyData(arr);?//?復(fù)制音頻當(dāng)前的頻域數(shù)據(jù)到Unit8Array中
		//console.log(arr);
		draw(arr);
		requestAnimationFrame(v);
	}
	requestAnimationFrame(v);?//動(dòng)畫函數(shù)
}

visualizer();

function?changeVolume(percent)?{?//?改變音量大小函數(shù)
	gainNode.gain.value?=?percent?*?percent;
}

$('#volume')[0].onmousemove?=?function()?{
	changeVolume(this.value?/?this.max);?//頻率
}
$('#volume')[0].onmousemove();?//?讓它默認(rèn)60生效