一段简单的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,一经查实,立即删除!

相关文章

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…

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

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

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

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

初见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{…

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

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

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

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

use vue vuex vue-router, not use webpack

vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑。因为现代构建前端项目的一般模式是: 安装webapck,某种是glup,grunt,或者是fis等构建工具然后…

SQL重复记录查询(转载)

1、查找表中多余的重复记录,重复记录是根据单个字段(peopleId)来判断select * from peoplewhere peopleId in (select peopleId from people group by peopleId having count(peopleId) > 1) 例二:select * from testt…

ubuntu16 升级pip3后报错File /usr/bin/pip3, line 9, in module from pip import main ImportError: cannot...

问题&#xff1a;ubuntu16 执行pip3 install --upgrade pip之后&#xff0c;pip3执行出错。 Traceback (most recent call last): File "/usr/bin/pip3", line 9, in <module> from pip import mainImportError: cannot import name main 截图如下&#xff1a;…

HTTP 简介

1、HTTP 简介 HTTP协议&#xff08;HyperText Transfer Protocol&#xff0c;超文本传输协议&#xff09;&#xff0c;是用于从WWW万维网服务器传输超文本到本地浏览器的传送协议。 HTTP基于TCP/IP通信协议来传递数据&#xff08;HTML 文件, 图片文件, 查询结果等&#xff09…

计算机博士英语复试题目,博士复试自我介绍中英文双语解读

博士复试自我介绍中英文双语解读关于博士复试自我介绍中英文篇一(中文篇)尊敬的老师,晚上好!我很高兴能来这里参加面试。现在让我给一个简短的自我介绍。我是* * *,出生在* *。我是一个老师的信息科学与工程学院,山东科技大学。我在1997年进入这所大学,主修计算机科学与技术。2…

如何在J2ME中创建MIDlet

总览 Java移动应用程序称为J2ME。 通常&#xff0c;当我们在移动技术领域工作时&#xff0c;我们必须考虑J2ME应用程序。 通过这种方式&#xff0c;我们可以开发我们的移动应用程序&#xff0c;也可以通过jad或jar文件将其安装在我们的设备中。 近年来&#xff0c;手机开发中最…

感悟测试驱动开发

软件开发方法学的泰斗Kent Beck先生最为推崇"模式、极限编程和测试驱动开发"。在他所创造的极限编程&#xff08;XP&#xff09;方法论中&#xff0c;就向大家推荐"测试先行"这一最佳实践&#xff0c;并且还专门撰写了《测试驱动开发》一书&#xff0c;详细…

创建一个学生信息表,与页面分离

一、需求分析 做一个jsp页面&#xff0c;动态显示信息表的内容。 1、 做一个实体类&#xff1a;StudentInfo &#xff08;包含4个字段&#xff09; 2、 如图模拟生成3条数据&#xff0c;本质上就是new StudentInfo 3个实例&#xff0c;每个实例代表一行记录&#xff08;后面…

【Unity】材质基础

【Unity】材质基础 a.基本概念 b.Albedo Maps反射率贴图 c.Alpha Maps着色器shader下四大渲染模式 d.Metallic and Smoothness Maps e.Normal Maps法线贴图 f.Height Maps g.Occlusion Maps h.Emission Maps i.Detail Mask & Secondary Maps j.Standard 金属/Standard&…

科学计算机二进制算法,计算机是怎么理解二进制的?

计算机是怎么理解二进制的?计算机的发明最初纯粹是为了计算数字, 让一个机器能够通过输入不同的数字, 进行加减乘除等. 首先要约定好机器能处理的数是什么样的, 即输入是什么样的, 才能去制造计算机. 二进制只是一种尝试, 十进制也有科学家尝试过, 但由于复杂程度较二进制要高…

WPF 实现ScrollViewer的垂直偏移滚动跳转

问题&#xff1a;考虑屏幕大小&#xff0c;一般都是会在表单问卷的页面使用ScrollViewer。问卷中问题漏填漏选时&#xff0c;在提交时校验不过&#xff0c;需要滚动跳转至漏填漏选项。 页面如下&#xff1a; 每个选项使用StackPanel&#xff0c;并对复选框和单选的勾选事件进行…

限制 计算机中 某用户上网 win7,Win7旗舰版怎么限制孩子的上网时间?电脑限制孩子上网时间的方法...

Win7旗舰版怎么限制孩子的上网时间&#xff1f;我们在家里有孩子的时候非常害怕孩子沉迷与网络&#xff0c;不把心思放在学习上。所以会想方设法的限制孩子上网。那么我们怎么使用电脑的自带的功能限制孩子上网呢&#xff1f;下面小编就带着大家一起看一下吧&#xff01;设置管…

论图计算

自从机械计算开始以来&#xff0c;图形概念就已经存在&#xff0c;并且在纯数学领域已经存在了数十年。 由于数据库的黄金时代&#xff0c;图形在软件工程中变得越来越流行。 图形数据库提供了一种持久化和处理图形数据的方法。 但是&#xff0c;图形数据库并不是存储和分析图形…

html 拼接onmouseout,HTML onmouseout事件用法及代码示例

将鼠标指针移出元素或其子元素时&#xff0c;将发生HTML DOM onmouseout事件。用法:在HTML中&#xff1a;在JavaScript中&#xff1a;object.onmouseout function(){myScript};在JavaScript中&#xff0c;使用addEventListener()方法&#xff1a;object.addEventListener(&quo…