概述

由于工作需要,学习了一下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. docker环境下solr6.0配置(中文分词+拼音)

    前言:这篇文章是基于之前的“linux环境下配置solr5.3详细步骤”(http://www.cnblogs.com/zhangyuan0532/p/4826740.html)进行扩展的.本篇的步骤 ...

  2. 关于js中操作数组的一些方法

    网上找的通篇看了一遍讲的很透收藏了!  转自(https://www.cnblogs.com/blogs-8888/p/6518683.html) 1.锁定数组的长度(让数组的长度变成只读). 1 2 ...

  3. vue项目跳转到外部链接

    vue项目中遇到一个打印的功能.思考之后决定点击按钮,跳转到一个HTML页面(后台写的),利用window.print()方法调用浏览器的打印的功能. 所以,现在的问题是,怎样跳转到外部链接.开发vu ...

  4. windows任务栏IDEA图标变白色快速解决方法

    方案1:同时按Windows键+R键打开运行对话框,输入ie4uinit.exe -show然后回车即可修复. 方案2:打开计算机(Win7),此电脑(Win10)或任意文件夹,然后在地址栏输入cmd ...

  5. Android学习(二)

    学号 20189214 <Android程序设计>第七周学习总结 教材学习内容总结 监听 设置点击监听的5种方式 方法1:直接用匿名内部类 这是最常用的一种方法,直接setXXXListe ...

  6. Postfix邮件服务器

    http://www.postfix.org/INSTALL.html https://www.cnblogs.com/alex-note/p/6840160.html http://linux.vb ...

  7. 使用kbmmw 实现图形验证码

    首先感谢图形验证码的提供者  晴空无彩虹  https://blog.csdn.net/u011784006/article/details/80827181 他用FMX 实现了验证码的生成,我修改成 ...

  8. python 基础———— 字符串常用的调用 (图)

    Python 常用的 字符串调用方法 这里用到了pycharm ( 使用Python  有力的工具) 下载地址https://www.jetbrains.com/pycharm/download/#s ...

  9. 2019浙江省赛B zoj4101 Element Swapping(推公式)

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=6003 题意 \(数组a通过交换一对数字,得到了b数组,给出x=\sum^n_{ ...

  10. unic

    在线考试 答题剩余时间0小时51分18秒 考生须知 1.本次考试结束后,剩余补考次数:2次 2.考试时间为60分钟,超时系统自动交卷 3.本次考试满分100分(5*20道),60分通过考试 1. (单 ...