给Jplayer加上声音可视化效果

前一阵子有个网友通过之前写的一篇音频可视化的文章找到我，让我帮忙给他的音乐网站加个播放效果，自己正好没啥事做欣然答应。

由于疏于学习，基础掌握的不好，我一直以为音频可视化是通过Web audio API实现的，脑子不会转弯，总觉得只能通过这种方法载入音频：

	var audio = new Audio("hello.mp4");

然后打一套API的组合拳来读取音频数据：

	AudioContext = AudioContext || webkitAudioContext;
	context = new AudioContext;
	//加载媒体
	
	//创建节点
	source = context.createMediaElementSource(audio);
	analyser = context.createAnalyser();
	//连接：source → analyser → destination
	source.connect(analyser);
	analyser.connect(context.destination);

直到看到另一个使用Jplayer的网站才恍然大悟，完全可以获取页面上已有的audio控件来载入音频：

var audio= document.getElementById('audio');

source = context.createMediaElementSource(audio);

下面以JYMUSIC这套程序为例，写一下大概实现原理。

先在\resources\web\default\home目录的player_default.html里面加一个canvas层：

<canvas id="canvas" width="500" height="350"></canvas>

然后找到\resources\web\default\assets\js目录下面的player.js，加入如下代码：

    /*音频可视化*/
    function initVisualizer