• 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上面不能播放,原因不明。。。。。

  • 相关阅读:
    [React Native] Target both iPhone and iPad with React Native
    [Angular] Increasing Performance by using Pipe
    [Angular] Angular CDK Intro
    [React] Refactor componentWillReceiveProps() to getDerivedStateFromProps() in React 16.3
    [Python] Create a minimal website in Python using the Flask Microframework
    [GraphQL] Apollo React Mutation Component
    [Angular] Introduce to NGXS
    《火球——UML大战需求分析》(第2章 耗尽脑汁的需求分析工作)——2.4 UML助力需求分析
    《火球——UML大战需求分析》(第2章 耗尽脑汁的需求分析工作)——2.5 小结与练习
    [Django实战] 第4篇
  • 原文地址:https://www.cnblogs.com/yangzhou33/p/9496492.html
Copyright © 2020-2023  润新知