soundJs库简单使用心得

概述

由于工作需要,学习了一下soundJs库,把心得记录下来,供以后开发时参考,相信对其他人也有用。

soundJs是createJs的一部分,它提供了强大的API来处理音频,是音频类H5的一个比较好的解决方案。

使用方法

我们主要想利用soundJs来实现一个音频的淡出效果

对于soundJs,有两个非常重量级而且常用的类:

  1. Sound类:通过createjs.Sound直接使用;用来创建声音。
  2. 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功能。

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);
}

猜你喜欢

转载自www.cnblogs.com/yangzhou33/p/9496492.html