概述

由于工作需要,学习了一下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. 一个简单地template模板

    之前的项目中用到了artTemplate模板,感觉挺有意思,于是查看相关资料,自己动手写了个简单地template模板插件.虽然会有一些不足,但也是自己的一番心血.主体代码如下 /* * 一个简单地t ...

  2. skynet记录2:模块简介

    稍后填坑 bson.so  client.so  lpeg.so  md5.so  skynet.so  sproto.so gate.so  harbor.so  logger.so  snlua. ...

  3. class 关键字

    class Ninja 表示创建一个名为Ninja的函数.constructor(...)指明Ninja函数的签名和函数体内容. class Ninja{ constructor(name){ thi ...

  4. vue项目中编写一个图片预览的公用组件

    今天产品提出了一个查看影像的功能需求. 在查看单据的列表中,有一列是影像字段,一开始根据单据号调用接口查看是否有图片附件,如果有则弹出一个全屏的弹出层,如果没有给出提示.而且,从列表进入详情之后,附件 ...

  5. python基础之Day17

    一.包 1.包 含有--init--.py的文件夹  是模块的一种形式 本质是一个文件夹(用来存放文件,包内所有的文件都是用来被导入的) import 包 包.名字     往包的init里加名字 导 ...

  6. SpringBoot跨域问题

    1.先来说说跨域原理: 跨域原理简单来说就是发起跨域请求的时候,浏览器会对请求域返回的响应信息检查HTTP头,如果Access-Control-Allow-Origin包含了自身域,则允许访问,否则报 ...

  7. core里使用log4net

    1. nuget 里安装 log4net 2. startup.cs里配置读取配置文件 public static ILoggerRepository repository { get; set; } ...

  8. memcache集群

    实现memcache集群   一:memcache本身没有redis锁具备的数据持久化功能,比如RDB和AOF都没有,但是可以通过做集群的方式,让各memcache的数据进行同步,实现数据的一致性,即 ...

  9. inet_pton, inet_ntop

    Linux下这2个IP地址转换函数,可以在将IP地址在“点分十进制”和“整数”之间转换而且,inet_pton和inet_ntop这2个函数能够处理ipv4和ipv6.算是比较新的函数了. inet_ ...

  10. vue 图片下载到本地,图片保存到本地

    必须同源(访问的网站域名与服务器域名一致)才能下载 downs() { var alink = document.createElement("a"); alink.href = ...