概述
由于工作需要,学习了一下soundJs库,把心得记录下来,供以后开发时参考,相信对其他人也有用。
soundJs是createJs的一部分,它提供了强大的API来处理音频,是音频类H5的一个比较好的解决方案。
使用方法
我们主要想利用soundJs来实现一个音频的淡出效果。
对于soundJs,有两个非常重量级而且常用的类:
- Sound类:通过createjs.Sound直接使用;用来创建声音。
- AbstractSoundInstance类:它是通过play方法或者createInstance方法返回的;用来控制声音。
首先我们注册声音源。"../../media/bgm3.mp3"表示声音源;"myID"是声音id;3是声音频道,主要用于多种声音混合播放,我们只播放一种声音,所以这里随便用一个频道3。
createjs.Sound.registerSound("../../media/bgm3.mp3", "myID", 3);
然后我们给声音源注册插件。我们优先使用createjs.WebAudioPlugin插件即Web Audio Api;其次是createjs.HTMLAudioPlugin即html的audio标签功能;最后是createjs.FlashAudioPlugin即flash的audio功能。(很遗憾,经测试,加上这条代码会报错。stackoverflow上面说,现在版本的soundjs会自动使用默认插件方法,不需要使用registerPlugins和createjs.WebAudioPlugin.playEmptySound()方法了)
createjs.Sound.registerPlugins([createjs.WebAudioPlugin, createjs.HTMLAudioPlugin, createjs.FlashAudioPlugin]);
我们标记声音源为mp3:
createjs.Sound.alternateExtensions = ["mp3"];
注册的音频是需要加载的,我们在它加载完成之后加入一个回调进行一些音频处理,在回调中我们可以控制音频的播放,调节音量等。
createjs.Sound.on("fileload", handleLoad);
在回调函数里面,我们把AbstractSoundInstance类引出来以实现后续的控制效果:
var myInstance;
function handleLoad() {
myInstance = createjs.Sound.play("myID", {loop:-1});
myInstance.volume = 1;
}
在某个适当的时机,我们执行audioFadeOut函数来修改它的volume以实现音频的淡出效果:
function audioFadeOut() {
var count = 50;
var interval = setInterval(function() {
if(count < 0) {
myInstance.paused = true;
clearInterval(interval);
} else {
myInstance.volume = count/50;
}
}, 70);
}
ios
上面的代码在PC端的chrome浏览器上面能正常运行,在ios的safara上面不能播放,原因不明。。。。。