一、前言
大家好，我是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、基础功能
音频播放、暂停、停止
2）、系统支持
android2.3+、ios6+
3）、使用
|
1
2
3
4
5
6
7
8
|
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
|
1
2
3
4
|
window.audio =
new
mo.Audio({
src:
'http://ossweb-img.qq.com/images/audio/motion/audio4.mp3'
,
controller: $(
'.bg-music'
)
});
|
5）、功能实现核心代码：
|
1
2
3
4
5
6
7
8
9
|
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）、使用
|
1
2
3
4
5
|
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动画，可以取出数组的平均值。
|
1
2
3
4
5
|
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）、使用
|
1
2
3
4
5
|
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 - 播放过程中
例如：
|
1
2
3
4
|
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
这是我们现在唯一的维护地址，后续会继续添加有意思的组件。