zoukankan      html  css  js  c++  java
  • 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功能。(很遗憾,经测试,加上这条代码会报错。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上面不能播放,原因不明。。。。。

  • 相关阅读:
    Leetcode刷题记录--39. 组合总和
    Leetcode刷题记录--31. 下一个排列
    Leetcode刷题记录--22. 括号生成(回溯)
    Leetcode刷题记录--17. 电话号码的字母组合(回溯)
    分布式学习之--6.824MITLab1记录
    总结javascript处理异步的方法
    引用、浅拷贝及深拷贝 到 Map、Set(含对象assign、freeze方法、WeakMap、WeakSet及数组map、reduce等等方法)
    Vue之富文本tinymce爬坑录
    iOS 13 正式发布,来看看有哪些 API 变动
    Vuex,从入门到...
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9496492.html
Copyright © 2011-2022 走看看