概述

由于工作需要,学习了一下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客户端使用socks5代理上网

    配置Linux客户端使用socks5代理上网   背景 有访问google或者其他海外网站需求的同学可能大都用过或者听过ss,在Windows.Mac.Android.IOS都有现成可用的客户端来协助 ...

  2. Matting任务里的Gradient与Connectivity指标

    Matting任务里的Gradient与Connectivity指标 主要背景 Matting任务就是把α(不透明度, 也就是像素属于前景的概率).F(前景色)和B(背景色)三个变量给解出来. C为图 ...

  3. 人脸检测(1)——HOG特征

    一.概述 前面一个系列,我们对车牌识别的相关技术进行了研究,但是车牌识别相对来说还是比较简单的,后续本人会对人脸检测.人脸识别,人脸姿态估计和人眼识别做一定的学习和研究.其中人脸检测相对来说比较简单, ...

  4. java Quartz任务调度器

    1.quarz对java1.5实现的简单调度做了封装 /**     * quartz对任务调度进了高度抽象: 1调度器:2任务:3触发器     * Job接口(任务):定义需要调度的任务     ...

  5. Springboot & Mybatis 构建restful 服务三

    Springboot & Mybatis 构建restful 服务三 1 前置条件 成功执行完Springboot & Mybatis 构建restful 服务二 2 restful ...

  6. 【微信小程序开发之坑】javascript创建date对象

    最近开发中用到date,开始以如下方式来创建: var date = new Date('2018-01-30 11:00:00'); 在开发工具上,调试,ios 和 android都好好的. 在真机 ...

  7. freeMark模板引擎

    http://blog.csdn.net/shimiso/article/details/8778793

  8. 关于阿里云ECS服务器修改远程端口的一点总结

    般修改公司的远程服务器的登录端口号分为两大步: 一.修改注册表中的两个地方的端口号:(注册表打开命令:regedit) [HKEY_LOCAL_MACHINE\SYSTEM\CurrentContro ...

  9. 软件光栅器实现(二、VS和PS的运作,法线贴图,切空间的计算)

    二.软件光栅器的VS和PS的输入.输出和运作,实现法线贴图效果的版本.转载请注明出处. 这里介绍的VS和PS是实现法线映射的版本,本文仅介绍实现思路,并给出代码供参考.切空间计算.光照模型等相关公式不 ...

  10. Notes : <Hands-on ML with Sklearn & TF> Chapter 6

    .caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...