4)、使用：
window.audio = new mo.Audio({
src: 'http://ossweb-/images/audio/motion/audio4.mp3',
controller: $('.bg-music')
});
5)、功能实现核心代码：
self.sound = self.audioContext.createBufferSource();
self.audioContext.decodeAudioData(self.arrayBuffer, function(buffer) {
sound.buffer = buffer;
sound.connect(self.audioContext.destination);
self.analyser = audioContext.createAnalyser();
self.frequencyData = new Uint8Array(analyser.frequencyBinCount);
self.analyser.getByteFrequencyData(self.frequencyData);
self.sound.connect(self.analyser);
}
3、让整个页面舞动起来。-提供音乐细节与事件监听
1)、功能详情
提供事件接口，将音频波形数据以参数形式传入，方便控制页面其它元素随音频而动。
2)、系统支持
ios8+、android5.0+浏览器、android2.3+
(不支持系统该事件不被响应，可以将元素设置隐藏状态)
3)、实例
4)、使用
audio.on('progress', function(e, frequency){
// frequency 是一个长度为16的数组
$('.ball1').css('opacity', frequency[6]/255)
$('.ball2').css('-webkit-transform', 'translateX('+ frequency[6]/5+'px)');
})
5)、注意事项：
frequency是一个长度为16的数组，包含了详细的音频细节，如果只是做简单的跟随音乐而动的css3动画，可以取出数组的平均值。
var total = 0;
for(var i = 0; i < frequency.length; i++) {
total += frequency[i];
};
var avg = total/frequency.length;
4、音乐特效
1)、功能详情
这是最有想象空间的一个功能，声音转换。比如将用户声音转换为一段类似lol里低沉的声音，发到朋友圈，让朋友们猜他向谁表白了。
2)、系统支持
ios8+、android5.0+浏览器、android2.3+
(不支持系统将保持音频原来声音)
3)、实例
http://ossweb-/images/demo/motion/audio/effect.html
4)、使用
window.audio = new mo.Audio({
src: 'http://ossweb-/images/audio/motion/human-voice.mp4',
effect: 'wildecho',
controller: $('.bg-music')
});
5)、技术实现：
使用web audio的convolver node，细节大家看源代码吧，目前支持的效果有：'cave'，'lodge'，'parking'，'lowpass'，'telephone'，'spatialized'，'backwards'，'wildecho'
三、组件文档
参数：
src(必须) - 需要播放的音频地址，需要同域，或允许跨域请求(accect: */*)，如果是跨域的音频地址，将只支持基础的功能；
controller - 显示波形的容器；
autoPlay - 是否自动播放；
loop - 是否循环播放；
effect - 给音频添加的效果('cave', 'lodge', 'parking','lowpass','telephone','spatialized','backwards','wildecho')；
fillColor - 波形填充颜色
fillNum - 波形的数量
属性：
currentTime - 当前播放的时间
playing - 当前播放的状态
方法：
play - 音频播放
pause - 音频暂停
stop - 音频停止(下次播放从起点开始)
事件：
beforeinit - 初始化前
init - 初始化完成
progress - 播放过程中
例如：
audio.on('progress', function(e, frequency){
// frequency 是一个长度为16的数组
$('.ball1').css('opacity', frequency[6]/255)
})
四、系统支持
当前大约35%的设备完整支持：
ios8+、android5.0+ 所有浏览器；android5.0以下 chrome、firefox。
目前不支持的设备将随便随机动画。
六、有兴趣的同学可以关注我们的github地址
/tgideas/motion这是我们现在唯一的维护地址，后续会继续添加有意思的组件。
如果觉得《音频频谱特效 jaVa_分析音频波形 添加音频特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
