你的位置:首页 > 网页设计

[网页设计]分析音频波形、添加音频特效


一、前言
大家好,我是19944号万技师,来自湖南,以手法精湛而著称,目前在TGideas兼职重构工作。最近和我们部长aiden在做一个Motion的移动端组件库,被很多客户吐槽没有使用很频繁的音频组件。

之前觉得,
音频这一块功能较为简单,不需要沉淀组件。
但经过一番琢磨,
却做出了不少有意思的东西。

比如:
分析音频生成动画;
部分设备同时播放(web audio支持同时播放);
音频特色,比如lol英雄低沉的声音;
当然,基本的音频播放是基础;
更多细节,容技师一一道来。

 

二、有兴趣的话,请客官继续
功能清单:
1、基础功能 - 封装音频对象基础功能
2、跟随音乐起舞!- 检测音频波形
3、让整个页面舞动起来。- 提供音乐细节与事件监听(ios8+、android5.0+浏览器<非webview>、android2.3+<chrome、firefox>)
4、音乐特效(ios8+、android5.0+浏览器<非webview>、android2.3+<chrome、firefox>)
5、支持用户录制声音变声(暂未完成)
 

1、基础功能
1)、功能详情
音频播放、暂停、停止
2)、系统支持
android2.3+、ios6+
3)、使用
var audio = new mo.Audio({	src: 'http://ossweb-img.qq.com/images/audio/motion/audio4.mp3',	// loop: false,	// autoPlay: false});audio.pause();audio.play();audio.stop();

 

2、跟随音乐起舞!
1)、功能详情
对于支持web audio的设备将分析音频Frequency Data,根据音频数据生成canvas动画。
对于不支持web audio的设备,将使用随机波形动画。
2)、系统支持
不支持web audio:
android2.3+、ios6+(优雅降级)
支持web audio:
ios8+、android5.0+浏览器<非webview>、android2.3+<chrome、firefox>
3)、实例

http://ossweb-img.qq.com/images/demo/motion/audio/normal.html

4)、使用:
window.audio = new mo.Audio({	src: 'http://ossweb-img.qq.com/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+浏览器<非webview>、android2.3+<chrome、firefox> 
(不支持系统该事件不被响应,可以将元素设置隐藏状态)
3)、实例

http://ossweb-img.qq.com/images/demo/motion/audio/animate.html

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+浏览器<非webview>、android2.3+<chrome、firefox> 
(不支持系统将保持音频原来声音)
3)、实例


http://ossweb-img.qq.com/images/demo/motion/audio/effect.html
4)、使用

window.audio = new mo.Audio({	src: 'http://ossweb-img.qq.com/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。
目前不支持的设备将随便随机动画。

 

五、源码
https://github.com/tgideas/motion/blob/master/component/src/main/audio/audio.js

 

六、有兴趣的同学可以关注我们的github地址
https://github.com/tgideas/motion
这是我们现在唯一的维护地址,后续会继续添加有意思的组件。