一、前言
大家好，我是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
這是我們現在唯一的維護地址，后續會繼續添加有意思的組件。