概述

由于工作需要,学习了一下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上面不能播放,原因不明。。。。。

soundJs库简单使用心得的更多相关文章

  1. numpy 库简单使用

    numpy 库简单使用 一.numpy库简介 Python标准库中提供了一个array类型,用于保存数组类型的数据,然而这个类型不支持多维数据,不适合数值运算.作为Python的第三方库numpy便有 ...

  2. python pandas库——pivot使用心得

    python pandas库——pivot使用心得 2017年12月14日 17:07:06 阅读数:364 最近在做基于python的数据分析工作,引用第三方数据分析库——pandas(versio ...

  3. Python常用的库简单介绍一下

    Python常用的库简单介绍一下fuzzywuzzy ,字符串模糊匹配. esmre ,正则表达式的加速器. colorama 主要用来给文本添加各种颜色,并且非常简单易用. Prettytable ...

  4. EasyX库简单中文手册

    EasyX库简单中文手册 作者: 时间: 2021/2/2 第一个例程 #include <graphics.h> // 图像相关库 #include <conio.h> // ...

  5. C语言 动态库简单开发

    动态库项目 //简单的动态库开发----报文发送 #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<stdlib. ...

  6. C++调用C#库简单例程

    有些时候,为了使用别人已经写好的C#库文件,我们需要使用C++调用C#库文件: 以下做了一简单的调用工程,步骤如下: 1.准备C#库 (dll文件)   1)创建C#库:     2)编写C#类:   ...

  7. libevent库简单使用

    一.libevent库简介 Libevent是一个用于开发可扩展性网络服务器的基于事件驱动(event-driven)模型的网络库.Libevent有几个显著的亮点: (1)事件驱动(event-dr ...

  8. 我对开源C++网络库简单应用总结

    网上有篇文章<开源免费的C/C++网络库(c/c++ sockets library) 七剑下天山>,看了之后觉得每个库都不错,这里我具体下载这些库看一下,简单总结一下: 顺便添加一些我找 ...

  9. Python Requests库简单入门

    我对Python网络爬虫的学习主要是基于中国慕课网上嵩天老师的讲授,写博客的目的是为了更好触类旁通,并且作为学习笔记之后复习回顾. 1.引言 requests 库是一个简洁且简单的处理HTTP请求的第 ...

随机推荐

  1. Linux下docker报错syntax error:unexpected protocol at end of statement

    ---恢复内容开始--- [Linux]Shell脚本“syntax error: unexpected end of file”原因及处理 :::https://blog.csdn.net/u013 ...

  2. PHP中写定时任务

    1.写一个bat E:\Progra~1\wamp\php\php.exe -f "E:\service.php" 2.写接口文件 ignore_user_abort(); //即 ...

  3. beamer插入图片的一些技巧

    1. 点一下,让另一张隐藏的图出现

  4. python数据结构(二)------列表

    本文将重点梳理列表及列表操作. 2.1 list函数 2.2 基本列表操作 2.3 列表方法 2.1 list函数 >>>list('hello') ['h','e','l',l', ...

  5. squid日志详解

    quid的日志很重要.常常要了解的,其中最重要的就是命中率啦,不然反向代理做的用就不大. cat access.log|gawk ‘{print $4}’|sort|uniq -c|sort -nr ...

  6. org.apache.commons.httpclient工具类

    import org.apache.commons.httpclient.DefaultHttpMethodRetryHandler; import org.apache.commons.httpcl ...

  7. Naïve Media Player

    我的GitHub链接:https://github.com/Joyce45/hwt 一.播放器?怎么做? 提到播放器,首先想到的就是XAML控件库里的MediaElement,于是我又大致阅读了一下该 ...

  8. 常用API3 BigData

    基本类型包装类 大家回想下,在第二天我们学习Java中的基本数据类型时,说Java中有8种基本的数据类型,可是这些数据是基本数据,想对其进行复杂操作,变的很难.怎么办呢 基本类型包装类概述 在实际程序 ...

  9. CSS追加笔记

    box-shadow 属性向框添加一个或多个阴影. 语法 box-shadow: h-shadow v-shadow blur spread color inset;注释:box-shadow 向框添 ...

  10. Object constructor

    1. Object is an instance of Function.2. Object does not have a property called constructor so when w ...