let xhr=new XMLHttpRequest();
let ac = new(window.AudioContext || window.webkitAudiocontext)();
// 创建音频上下文，并做兼容处理
let gainNode = ac[ac.createGain ? 'createGain' : 'createGainNode']();
gainNode.connect(ac.destination);
// 创建音量控制节点，兼容，并且连接到音频节点
let anylyser = ac.createAnalySer();
let size = 128 // 自定义柱状/散点数
anylyser.fftSize = size*2;
//frequencyBinCount 的值固定为 AnalyserNode 接口中fftSize值的一半. 该属性通常用于可视化的数据值的数量.
anylyser.connect(gainNode);
//链接
let source = null // 声明source变量
let firstPlay = true // 是否为第一次播放
let loading = false // 是否加载中
let type = 'column' // 默认为柱状条模式
// 为模式，歌单设置点击事件
window.onload = function(){
// 设置模式切换
	let types=$('#type li');
	types.map((type, index) => {
		type.onclick = () => {
		types.map((item,index) => {
			item.className = ''
		})
		this.className = 'selected';
		type = this.getAttribute('data-type');
		resize()
	}
	})
	let lists = $('#list li');
	lists.map((list, index) => {
		lsit.onclick = () => {
			lists.map((item,index) => {
			item.className = ''
		})
		this.className = 'selected';
		load('/media'+this.title);
		}
	})
}
// 音量改变
function change(obj){
	let percent = obj.value/obj.max; // 通过range获取百分比
	gainNode.gain.value= percent*percent;
}
// 以下为加载数据，并处理
function load(url){
	if(loading){return;} //loading状态直接return 防止快速重复点击
	loading = true;
	source&&source[source.stop?'stop':'noteOff'](); 如果在播放资源的话就暂停
	xhr.abort();  // 终止正在进行中的ajax请求
	xhr.open('GET',url);
	xhr.responseType = 'arraybuffer';
	xhr.onload = function(){
		ac.decodeAudioData(xhr.response,function(buffer){
			// 音频数据buffer解析回调完成回调
			let bufferSource = ac.createBufferSource();
			bufferSource.buffer = buffer;
			bufferSource.connect(analyser); 链接数据分析源
			bufferSource[bufferSource.start?'start':'noteOn'](0) //从0开始播放
			source = bufferSource;
			if(firstPlay&&source){ visualizer(); // 初始化可视窗口，只用一次 }
			loading = false;
			firstPlay = false;
		}, function(err){console.log(err);})
	}
	xhr.send();
}
// 可视化
function visualizer(){
	let arr = new Uint8Array(analyser.frenquencyBinCount); //为fftSize的一半
	// 创建一个空buffer数组 ，方便getByteFrequencyData的实时数据写入其中
	requestAnimationFrame = window.requestAnimationFrame||
                          window.webkitRequestAnimationFrame||
                          window.mozRequestAnimationFrame;
	function v(){
		analyser.getByteFrequencyData(arr);
		draw(arr);
		requestAnimationFrame (v);
	}
}
let box=$('#box')[0];
let height,width;
let canvas=document.createElement('canvas');
box.appendChild(canvas)
let ctx=canvas.getContext('2d')
let Dots=[];
// 随机辅助函数
function random(){
	return Math.round(Math.random()*(n-m)+m);
}
// 生成点
funtion getDots(){
	Dots = [] // 每次初始化
	for(let i = 0 ; i < size ; i ++){
		let x = random(0,width);
		let y = random(0,height);
		let color = "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
		Dots.push({
			x:x,
			y:y,
			color:color
		})
	}
}
// 分辨率改变响应函数
function resize(){
	height = box.clientHeight;
	width = box.clientWidth;
	canvas.width = width;
	canvas.height = height;
	// 设置条状图画笔状态
	let line = ctx.createLinearGradient(0,0,0,height);
	line.addColorStop(0,'red');
	line.addColorStop(0.5,'yellow');
	line.addColorStop(1,'green');
	ctx.fillStyle = line;
	getDots();
}
resize()
window.onresize = resize;
// 最终BOSS，画！！！！！
function draw(arr){
	// arr为解析过后的数组 纯数字
	ctx.clearReact(0,0,width,height);
	let w = width/size; //每一条宽度
	for(let i = 0 ;i <size ; i++){
		if(type === 'colunm'){
			let h = arr[i]/256*height; //根据音频大小来判断h
			ctx.fillRect(w*i,height-h,w*0.7,h)
		}else if(type === 'dot'){
			ctx.beginPath();
			let dot = Dots[i];
			let r = arr[i]/256*50; //根据音频大小来判断r
			ctx.arc(dot.x,dot.y,r,0,Math.PI*2);
			let g =ctx.createRadialGradient(dot.x,dot.y,0,dot.x,dot.y,r);
			//线性背景的起始坐标x,y和半径 线性背景的结束坐标x,y和半径
			g.addColorStop(0,'#fff');
			g.addColorStop(1,dot.color)
            ctx.fillStyle=g;
            ctx.fill()
		}
	}
}