一段简单的html 5 音频,5个用于处理HTML5音频的库和API

在过去的几个月中,我遇到了许多不同的库,它们利用了相对较新的HTML5 Audio API以及更著名的HTML5 Audio Element及其更简单的API。

我以为我会在本文中分享这些库中的一小部分,以向您展示如果选择创建需要操纵声音文件的游戏或应用程序,可能的情况以及有哪些选择。

其中一些库随附的一些演示非常不错,并且每个库的代码都非常干净且易于使用。

1. webaudiox.js

Webaudiox.js并不是一个库,而是一组用于使用Web Audio API的帮助程序。 它具有零依赖性,并且可以在任何支持Web Audio API的浏览器中使用。

该文档以样板形式提供了一个简单的代码示例,如下所示:

// after including the webaudiox library

var context = new AudioContext()

// Create lineOut

var lineOut = new WebAudiox.LineOut(context)

// load a sound and play it immediatly

WebAudiox.loadBuffer(context, 'sound.wav', function(buffer){

// init AudioBufferSourceNode

var source = context.createBufferSource();

source.buffer = buffer

source.connect(lineOut.destination)

// start the sound now

source.start(0);

});

如第一个代码注释中所示,必须首先包含webaudiox.js帮助程序文件才能使其正常工作。

除了它们的语法外观之外,这并不能告诉我们很多有关这些帮助器的信息。 要查看其工作原理,请看analyser2canvas Helper 。 该帮助程序利用AnalyserNode接口的优势实时显示所播放声音的可视化。

6e8b2d9fb7f95b9f89854922fed47d63.png

webaudiox.js GitHub存储库还有许多其他示例可以尝试。 当然,为了使这些演示正常工作,您的浏览器必须支持Web Audio API(稍后会对此进行更多介绍)。 这组帮助程序不是polyfill,因此,如果您需要较旧的浏览器支持,那么除非您计划将其与另一个脚本或库或某种后备方式结合使用,否则这不是一个好选择。

据我所知,webaudiox.js可能是在HTML5游戏中使用的不错选择。

2. Howler.js

Howler.js被简单地吹捧为“现代Web的JavaScript音频库”,默认为Web Audio API,而后退为HTML5 audio 。

4fd45d64e26a7c00df63a18b4d9f5bce.png

该库的功能广泛。 一些重点包括:

支持多种文件格式,以更广泛地支持浏览器

Web Audio API和HTML5音频的缓存功能

同时播放多轨

全局和单轨静音/取消静音和音量控制

方法链

3KB gzip,没有依赖项

描述该库的官方博客文章包括许多演示如何执行的页面演示,因此请务必检查一下。

为了演示语法,这是一个很酷的示例,称为“声音精灵”,您可以在一个声音文件中定义不同声音的位置:

var sound = new Howl({

urls: ['sounds.mp3', 'sounds.ogg'],

sprite: {

blast: [0, 1000],

laser: [2000, 3000],

winner: [4000, 7500]

}

});

// shoot the laser!

sound.play('laser');

我喜欢这种语法,该API外观简洁明了,似乎很容易理解和开始使用。 因为这使用了新的Web Audio API并回退到了HTML5音频,所以对浏览器的支持很强。

该库的作者将其描述为“游戏的绝佳之选”,但对于任何其他与音频相关的网络应用程序同样如此。

3. Pedalboard.js

像到目前为止讨论的以前的库一样, Pedalboard.js也使用Web Audio API,但这一次它用于在声源上创建音频效果,尤其是针对吉他效果。 简而言之,您可以使用此API创建自己的踏板,通过它可以操纵吉他声音。 向您展示此API的强大功能的一个很好的例子是Pedals.io ,“云中的吉他效果”:

48051895f140bd12248e8ff0ca10ff84.png

API的语法是面向对象的,因此它很干净且易于使用。 这是一个例子:

// initialize the stage and get the context

var stage = new pb.Stage();

var ctx = stage.getContext();

// initialize the board and pedals

var board = new pb.Board(ctx);

var od = new pb.stomp.Overdrive(ctx);

var reverb = new pb.stomp.Reverb(ctx);

var vol = new pb.stomp.Volume(ctx);

// add pedals to board

board.addPedals([od, reverb]);

board.addPedalsAt(1, vol);

// tweak pedal settings

od.setDrive(0.7);

od.setLevel(0.7);

reverb.setLevel(0.3);

vol.setLevel(0.2);

// set the board on stage and start playing!

stage.setBoard(board);

上面的代码基于一个“舞台”对象,该对象包含“木板”,而该木板又包含能够创建所需效果的“踏板”。

诚然,这不一定会成为构建游戏或其他应用程序的最有用的库,但是我敢肯定,如果有一些创造性的思考,您可以为此提供一些很棒的东西。 该库可在任何支持Web Audio API的浏览器中使用。

附带说明一下,如果您喜欢此库,则可能还需要查看Band.js ,这是一种“音乐作曲家” API,支持节奏,多种乐器,重复部分和复杂的拍号 。

4.一团

Wad代表Web Audio DAW(数字音频工作站),它被描述为“耳朵上的jQuery”。 它是一个库,可帮助简化使用Web Audio API的音频处理。

这是语法示例,其中介绍了使用“方波”合成的钢琴音轨:

var piano = new Wad({

source : 'square',

env : {

attack : .01,

decay : .005,

sustain : .2,

hold : .015,

release : .3

},

filter : {

type : 'lowpass',

frequency : 1200,

q : 8.5,

env : {

attack : .2,

frequency : 600

}

}

})

piano.play({ pitch : 'C5' })

piano.play({ pitch : 'Eb5', filter : { q : 15 } })

piano.play({ pitch : 'F5', env : { release : .2 } })

再次,一个非常干净的API具有很多功能。 您可以在此演示页面上测试上述代码以及其他示例(军鼓,长笛,踩hi等)。

d59472c3bf4597d47b6090052d9df90e.png

功能包括平移,3D平移,过滤器(如上面的代码所示),混响,麦克风输入以及从外部库中合并效果的功能。

作者指出,该库中的一个主要缺陷是它似乎无法在Firefox中工作。

5.费弗

Fifer是HTML5音频API的“微型库”,在较旧的浏览器中可以使用轻量级Flash版本。

该语法包括许多用于游戏或其他应用程序的音频的简单可链接方法。

API的功能包括:

预加载并注册文件

播放带有可选循环和结束回调的文件

同时停止或静音单个文件或所有文件

这是语法示例:

Fifer({ swf : '../Fifer.swf' }).loaded(function(files) {

console.log('loaded');

this.bang();

}).onAudioProcess(function(arr) {

console.log(arr);

}).registerAudio('bang','bang.mp3',true)

该库非常简单明了,因此对于想要在Fifer基础上构建更大的项目来说,它可能是一个不错的选择。 如上所述,最大的好处是,当Web Audio API不可用时,它将回落到Flash。

并请注意,此API基于HTML5音频,而不是Web Audio API,因此支持返回到HTML5和IE8的IE9,以及Flash后备的早期版本。

该仓库有一个非常简单的示例 ,可以在此处预览 。 没什么,只是带有SWF后备的MP3格式的“砰”声。

Web Audio API资源

上面讨论的所有库都使您可以使用Web Audio API的强大功能和功能,而不必深入研究该规范,从而提供了一个不错的简洁API。

但是,如果您想学习API来构建自己的东西,请查阅Boris Smus撰写的《 Web Audio API 》一书,该书可以从O'Reilly免费在线获得,也可以购买印刷版或典型的电子版。

877f04fb689ea2ce8d00fb55293933a1.png

还有HTML5 Rocks上的Web Audio简介 ,以及有关MDN 主题的文档 。

浏览器支持

如果您选择的库使用HTML5音频,则包括IE9 +在内的任何地方都可以使用支持。 但是,如果该库使用Web Audio API(与上述所有库(Fifer除外)一样),则支持效果不佳 。

0868ef27659af0ffbe2dbb24eaa5baf2.png

一些移动浏览器缺少支持,而Safari需要供应商前缀。 但是,最糟糕的消息是,没有支持Web Audio API的IE版本,甚至没有IE11。 对于IE团队来说,这是一个未解决的问题 ,因此希望很快会有所改变。

From: https://www.sitepoint.com/5-libraries-html5-audio-api/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/363668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

下载软件的好地方

https://mirrors.tuna.tsinghua.edu.cn/help/anaconda/转载于:https://www.cnblogs.com/pengzhi12345/p/11197510.html

用于JMX访问的Apache Ant任务

我想从Ant任务中调用JMX操作。 但是,找到可用的蚂蚁任务库及其用法非常棘手。 因此,让我分享我的经验,使他人更轻松。 JMX操作的Ant任务 我决定遵循Tomcat文档并使用与tomcat一起分发的ant任务。 仅作记录用途,并不限于Tomcat部…

async 和 await 之异步编程的学习

async修改一个方法,表示其为异步方法。而await表示等待一个异步任务的执行。js方面,在es7中开始得以支持;而.net在c#5.0开始支持。本文章将分别简单介绍他们在js和.net中的基本用法。 一、在js中的实现 js中的异步,还是基于Prom…

WinAPI: SetRect 及初始化矩形的几种办法

本例分别用五种办法初始化了同样的一个矩形, 运行效果图:unit Unit1;interfaceusesWindows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,Dialogs, StdCtrls;typeTForm1 class(TForm)Button1: TButton;Button2: TButton;Button3: TButton;Button4: TBu…

Eureka 集群高可用配置.

SERVER:1 server:port: 1111 eureka:instance:hostname: ${spring.cloud.client.ip-address}instance-id: ${eureka.instance.hostname}:${server.port}preferIpAddress: true #指定通过IP注册,一般服务集群时配置,需要ip-address参数一起设置(保证hostName和ip-address一…

备忘录——通过RVA计算文件位置

备忘录——通过RVA计算文件位置 原创:Anders Liu 摘要:本文介绍了如何通过PE文件中某一项的RVA来计算其在文件中的位置。 参考文献 ECMA-335——Common Language Infrastructure (CLI) 4th Edition, June 2006 范畴 该备忘录描述了在分析PE(可…

使用Java 8的Builder模式

我在一个环境中工作,其中通过调用远程服务而不是使用数据库来执行大量日常脚本任务。 对于许多脚本编写任务,我经常使用Groovy,而Groovy专门用于该任务的最有用的功能之一就是它是用流畅的Builders构建的 。 现在,Groovy构建器利…

Asp.net2.0工具包AjaxControlToolkit下载和安装

Asp.net2.0工具包AjaxControlToolkit下载和安装:点击下载 环境设置如下:A!a.S-DQ0ITPUB个人空间P,JN2y2b o5K 下载完 ASPAJAXExtSetup.msi 安装更新后在你的系统盘下的(以C盘为例) 出现这个 文件夹:ITPUB个人空间nA*O2U/l8i69s#o0…

中后端管理系统前后分离、前端框架的实现拙见

一、实现思路 在实践中后台管理系统的前后端分离时,往往会因为业务量的增加使其前端项目难以维护,以及打包时间不理想,还有业务系统与框架之间区分不在明显。本文是本人从另一个角度提出的一种解决方案,希望各位提出宝贵的建议。…

初见mobX

先看如下的代码 const {observable} mobox; const {observer}mobxReact; const {Component}React; const appStateobservable({count:0 }) appState.incrementfunction(){this.count } appState.decrementfunction(){this.count-- } observer class Counter extends Component{…

html输入完账号密码才能跳转,HTML输入字段跳转

我有2个文本字段,用户名和密码。当我输入密码时,它跳到第一个。我不知道为什么会这样。我无法找到它为什么跳。如何更改密码表单不跳转?这里是代码:HTML输入字段跳转session_start();require_once database.php;if (isset($_SESSI…

让使用MSN就像访问网页一样容易!

有时候,你不得不佩服微软的想法! http://webmessenger.msn.com/转载于:https://www.cnblogs.com/Hush/archive/2004/12/10/75430.html

学用状态机模式,写的报销流程,请指教

刚学编程不久,请前辈们指点。需求变化点:不同的金额,和不同的角色走不同的报销流程usingSystem;staticclassFactory { publicstaticEmployee CreateEmployee(stringname) { Employee employee null; switch(name) …

Java 8 Friday:更好的异常

在Data Geekery ,我们喜欢Java。 而且,由于我们真的很喜欢jOOQ的流畅的API和查询DSL ,我们对Java 8将为我们的生态系统带来什么感到非常兴奋。 Java 8星期五 每个星期五,我们都会向您展示一些不错的教程风格的Java 8新功能&#…

【留言板】可编辑输入框操作总结

闲暇之余,用于加深自己对基础的了解,徒手撸了一个留言板:输入框。废话少说,进入正题。简陋的效果如下(下载代码): 一、定义需求 可输入文本,以及插入表情。兼容性:IE与标准浏览器 二、详细设计…

excel poi3.17导出导入

https://blog.csdn.net/phil_jing/article/details/78307819 转载于:https://www.cnblogs.com/lyon91/p/10450668.html

2021年兰州师大附中高考成绩查询,2021年兰州重点高中名单及排名,兰州高中高考成绩排名榜...

”一千个人眼中,就有一千个哈姆雷特“。关于兰州高职学校排名,每个人的观点也是各不相同,今天就给大家分享一下我心中的兰州高中排名及格局分布,主要参考依据是近年中考录取分数线及高考成绩。数据仅供参考!希望对你有…

Android 创建,验证和删除桌面快捷方式 (删除快捷方式测试可用)

测试环境为Adnroid 2.1以上。 第一步&#xff1a;AndroidManifest.xml 权限配置&#xff1a; 添加快捷方式权限&#xff1a; <uses-permission android:name"com.android.launcher.permission.INSTALL_SHORTCUT"/> 验证快捷方式是否存在权限&#xff1a; <u…

ASP.NET存储Session的StateServer

由于公司要对服务器做个负载均衡&#xff0c;所以Web项目在两台前端服务器(web1、web2)各部署了一份。但是在项目中会用到session。当一开始在web1上登陆后&#xff0c;由于web1之后负载可能会变大&#xff0c;就有可能从web1跳转到web2上。从网上找了好多资料&#xff0c;自己…

休眠和UUID标识符

介绍 在我以前的文章中&#xff0c;我谈到了UUID代理密钥以及用例 &#xff0c; 这些用例比更常见的自动增量标识符更合适。 UUID数据库类型 有几种方法可以表示128位UUID&#xff0c;并且每当有疑问时&#xff0c;我都希望向Stack Exchange寻求专家建议。 由于通常对表标识符…