浙江大数据网站建设问答知识,wordpress同步twitter,学动漫制作去哪个学校,wordpress vpn在过去的几个月中#xff0c;我遇到了许多不同的库#xff0c;它们利用了相对较新的HTML5 Audio API以及更著名的HTML5 Audio Element及其更简单的API。我以为我会在本文中分享这些库中的一小部分#xff0c;以向您展示如果选择创建需要操纵声音文件的游戏或应用程序#x…在过去的几个月中我遇到了许多不同的库它们利用了相对较新的HTML5 Audio API以及更著名的HTML5 Audio Element及其更简单的API。我以为我会在本文中分享这些库中的一小部分以向您展示如果选择创建需要操纵声音文件的游戏或应用程序可能的情况以及有哪些选择。其中一些库随附的一些演示非常不错并且每个库的代码都非常干净且易于使用。1. webaudiox.jsWebaudiox.js并不是一个库而是一组用于使用Web Audio API的帮助程序。 它具有零依赖性并且可以在任何支持Web Audio API的浏览器中使用。该文档以样板形式提供了一个简单的代码示例如下所示// after including the webaudiox libraryvar context new AudioContext()// Create lineOutvar lineOut new WebAudiox.LineOut(context)// load a sound and play it immediatlyWebAudiox.loadBuffer(context, sound.wav, function(buffer){// init AudioBufferSourceNodevar source context.createBufferSource();source.buffer buffersource.connect(lineOut.destination)// start the sound nowsource.start(0);});如第一个代码注释中所示必须首先包含webaudiox.js帮助程序文件才能使其正常工作。除了它们的语法外观之外这并不能告诉我们很多有关这些帮助器的信息。 要查看其工作原理请看analyser2canvas Helper 。 该帮助程序利用AnalyserNode接口的优势实时显示所播放声音的可视化。webaudiox.js GitHub存储库还有许多其他示例可以尝试。 当然为了使这些演示正常工作您的浏览器必须支持Web Audio API(稍后会对此进行更多介绍)。 这组帮助程序不是polyfill因此如果您需要较旧的浏览器支持那么除非您计划将其与另一个脚本或库或某种后备方式结合使用否则这不是一个好选择。据我所知webaudiox.js可能是在HTML5游戏中使用的不错选择。2. Howler.jsHowler.js被简单地吹捧为“现代Web的JavaScript音频库”默认为Web Audio API而后退为HTML5 audio 。该库的功能广泛。 一些重点包括支持多种文件格式以更广泛地支持浏览器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 “云中的吉他效果”API的语法是面向对象的因此它很干净且易于使用。 这是一个例子// initialize the stage and get the contextvar stage new pb.Stage();var ctx stage.getContext();// initialize the board and pedalsvar 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 boardboard.addPedals([od, reverb]);board.addPedalsAt(1, vol);// tweak pedal settingsod.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等)。功能包括平移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 》一书该书可以从OReilly免费在线获得也可以购买印刷版或典型的电子版。还有HTML5 Rocks上的Web Audio简介 以及有关MDN 主题的文档 。浏览器支持如果您选择的库使用HTML5音频则包括IE9 在内的任何地方都可以使用支持。 但是如果该库使用Web Audio API(与上述所有库(Fifer除外)一样)则支持效果不佳 。一些移动浏览器缺少支持而Safari需要供应商前缀。 但是最糟糕的消息是没有支持Web Audio API的IE版本甚至没有IE11。 对于IE团队来说这是一个未解决的问题 因此希望很快会有所改变。From: https://www.sitepoint.com/5-libraries-html5-audio-api/
