资讯频道 → 互联网
阅读更多

2顶
0踩

互联网

原创新闻 Firefox 开始支持 Web Audio API

2013-07-12 10:01 by 副主编 WnouM 评论(1) 有11912人浏览
Firefox Audio API HTML5 javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Mozilla公司称，他们一直在为Firefox支持Web Audio API而努力，而今这个愿望就快达成了。目前，Firefox Nightly和Firefox Aurora两个版本已经基本支该持API。Web Audio提供了诸多炫酷的功能，开发者可以基于此创建应用 、游戏，可以说基本上任何一款应用都需要先进的音频处理。



Web Audio API是JavaScript中主要用于在网页应用中处理音频请求的一个高级应用接口，这个API目的是用于让最新技术与传统的游戏音频引擎的综合处理相兼容，也即尽力提供一些桌面音频处理程序的要求。

Web Audio API特性包括：

  • 查看音频播放期间调度事件发生的确切时间；
  • 支持各种类型的音频过滤波器以实现各种效果，包括回声、消除噪音等；
  • 支持利用合成声音（Sound synthesis）创建电子音乐；
  • 支持3D位置音频模拟效果，比如某种声音随着游戏场景而移动；
  • 支持外部输入的声音与WebRTC 进行集成（调用WebRTC，在你的设备中增添吉他声），或者在WebRTC中调用其他地方传输过来的声音；
  • 利用音频数据分析创造良好的可视化声音等。
代码示例

下面是利用Web Audio创建应用的一个简单示例。试想下，当你在创建一款游戏，你想要玩家在点击游戏画布时（game canvas）呈现枪声的声音。为了确保你不会受网络延迟、音频解码器延迟等影响，你可以使用Web Audio来加载音频作为游戏加载进程缓冲区的一部分。

为了营造一个整洁的声音效果，我们可以在点击鼠标时使用循环声音并在鼠标松开后创建渐变效果。下面的这段代码示例演示了这一效果： 

// Load the sound file from the network
var decodedBuffer;
var ctx = new AudioContext();
var xhr = new XMLHttpRequest();
xhr.open("GET", "gunshot.ogg", true);
xhr.responseType = "arraybuffer";
xhr.send();
xhr.onload = function() {
  // At this point, xhr.response contains the encoded data for gunshot.ogg,
  // so let's decode it into an AudioBuffer first.
  ctx.decodeAudioData(xhr.response, function onDecodeSuccess(buffer) {
    decodedBuffer = buffer;
  }, function onDecodeFailure() { alert('decode error!'); });
};
  
// Set up a mousedown/mouseup handler on your game canvas
canvas.addEventListener("mousedown", function onMouseDown() {
  var src = ctx.createBufferSource();
  src.buffer = decodedBuffer;                                     // play back the decoded buffer
  src.loop = true;                                                // set the sound to loop while the mouse is down
  var gain = ctx.createGain();                                    // create a gain node in order to create the fade-out effect when the mouse is released
  src.connect(gain);
  gain.connect(ctx.destination);
  canvas.src = src;                                               // save a reference to our nodes to use it later
  canvas.gain = gain;
  src.start(0);                                                   // start playback immediately
}, false);
canvas.addEventListener("mouseup", function onMouseUp() {
  var src = canvas.src, gain = canvas.gain;
  src.stop(ctx.currentTime + 0.2);                                // set up playback to stop in 200ms
  gain.gain.setValueAtTime(1.0, ctx.currentTime);
  gain.gain.linearRampToValueAtTime(0.001, ctx.currentTime + 0.2);// set up the sound to fade out within 200ms
}, false);

Web Audio API还未成为W3C标准

谷歌声称，Chrome是首个实现Web Audio API，但对于WebKit核心的浏览器，需要加上webkitAudioContext的前缀。Mozilla表示，其一直在与W3C Audio工作小组讨论API问题，并试图解决API早期版本存在的一些问题。也就是说，打破代码的向后兼容性能，即解决webkitAudioContext前缀问题。值得一提的是，很多Web Audio API功能，比如说创建AudioNodes 或者是解码音频文件，都是采用AudioContext的方法。AudioContext（W3C）是一种管理、播放声音的对象。

如果你也想开发音乐应用或者游戏，不妨参考how to port those applications to the standard API；此外，webkitAudioContext monkeypatch 能够帮助你自动处理一些变化以及如何在API标准中实现webkitAudioContext。

Firefox计划

如今，Firefox已实现了Web Audio API标准。如果你是一名Web开发者对创建先进的音频上感兴趣，不妨查看Mozilla开发团队的这篇基于AudioContext的Porting webkitAudioContext code或许对你有帮助。

Mozilla表示，目前正在研究台式机及Android设备上的Firefox 24支持Web Audio。Mozilla称，除非是遇到什么特殊情况，否则不会延迟发布时间，但目前开发者可以在Nightly和Aurora两个版本中使用大部分API。

英文出自：Mozilla /编译：CSDN
  • 大小: 19.1 KB
来自: CSDN
2
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 bluky999 2013-07-18 08:59
web os 得加速发展了，这样才能给mobile webgame更多发展空间  

如果未来玩游戏的时候不再需要专门的IM插件，直接浏览器插件支持，那该多酷

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • shazizzle:尝试使用Web Audio API来创建Shazam的简化版本

    注意： 在Firefox上不起作用，因为它似乎不支持AudioWorkletNode ： ReferenceError: AudioWorkletNode is not defined [Learn More] pcmObservable.js:1:1 <anonymous> ...

  • 泼一盆凉水

    几天前出发去南中国某省某市某镇，参加某行业龙头企业某项目的投标——今天才回来。下午在机场，对方企业的联络人打电话给我们，说我们中标了，心里的石头总算放下。投标虽然已经结束，而且结果不错，但问题还是值得总结。总体而言，这次活动由于分工以及配合上的原因导致了诸多的问题。1.技术方案的设备选型不够合理；2. 演示文档(ppt)编写仓促，不利于讲标人员准备。该企业的联络和跟踪一直由市场部门负责，因此接

  • 插件管理框架 for Delphi

    http://blog.csdn.net/musicwind/article/details/7136 1       前言 1.1   插件技术 许多软件采用“插件”（PlugIns）来扩展其功能，比如PhotoShop所支持的各类滤镜就是插件；我们所熟知的Winamp，也有许多皮肤以及可视效果插件。再有微软的windows media player，以及QQ，冲浪软件Opera……采

  • webaudio-waterfall:使用 Firefox Web Audio API 的 FFT 频谱瀑布图

    Web Audio API 瀑布图（） 这个应用程序使用和来在您的网络浏览器中显示来自麦克风的音频频谱的实时瀑布图！ 此应用程序目前仅在 Firefox 上运行。 看看！ 尝试吹口哨或听音乐，您会看到频率亮起。 现在试着说一些...

  • web-audio-mixer:使用Web Audio API构建的音频混音器

    可在以下位置找到与Web Audio API相关的代码： : 要首先在本地运行混合器，请确保已安装Node。 将仓库和CD复制到目录运行npm i 运行npm start 造访http://localhost:3000 该项目仅在Chrome和Firefox上进行了测试。 ...

  • djwannabe-step-sequencer:使用Web Audio API的步骤音序器

    （建议使用Firefox） 2.1功能 2.1.1概述 使用DJ Wannabe步进音序器，可以使用现有的声音片段样本库来创建短音轨。 用户只需在应用程序右上角单击库中的任何随机样本，它就会出现在由用户选择的样本组成的容器中。 ...

  • Web Audio API 无水印原版pdf

    Web Audio API 英文无水印原版pdf pdf所有页面使用FoxitReader、PDF-XChangeViewer、SumatraPDF和Firefox测试都可以打开 本资源转载自网络，如有侵权，请联系上传者或csdn删除 查看此书详细信息请在美国亚马逊...

  • 【Web】1326- 深入浅出 Web Audio API

    前言2011被提出，同年草案被Google Chrome和Mozilla Firefox实现在此之前Web音频较为原始，无法应付较为复杂的应用场景，例如Web游戏或互动应用旨在提供全套Web音频解决方案，包含现代游戏音频引擎和一些混录、加工...

  • web audio api 实现音频播放

    最近被选中做音视频，挺幸运的吧，一直在接触新的项目，...web audio API是 HTML5新增的API，提供了在web上控制音频的一个有效通用的系统，开发者可以自选音频源，对音频添加特效，添加空间效果，使音频可视化，等等。

  • pceplayer.js:PECE标准音乐驱动程序JavaScript + Web Audio API实现

    我们已经确认可以在Chrome（Win / Mac / Linux / Android），Safari（Mac / iOS），Firefox（Mac）和Edge上运行。 有一个使用整个页面的UI，以及一个嵌入在网页中的。 如何使用 安装了Git，Node和Ruby。 $ git ...

  • brincando_com_audio:我在2018年制作的网站上测试了Web Audio API来转换音频信号

    kidding_with_audio 我于2018... 注意：由于该工具是使用Web Audio API创建的，因此振荡器页面在Safari中不起作用，但在Firefox和Chrome中可以完美运行。 链接访问工具：版本上传到Heroku的： 版本上传至Github的网页：

  • hum:围绕 Web Audio API 的 ClojureScript 包装器

    Hum 现在可以在 Webkit 和 Firefox 浏览器上工作。 演示 查看一个简单的合成器演示和用于制作它的代码： : 用法 在project.clj将此添加到您的需求中： [hum " 0.4.0 " ] 下面是一个例子： ( ns myapp.core ( :...

  • webaudio-guitar-tuner:使用 webaudio api 的原始吉他调音器

    此应用程序目前仅在 Firefox 上运行。 看看演示！ 这是我调整 A 弦的屏幕截图。 请注意，由于这是原始信号，因此您也拾取了弦乐的谐波。 那就是你看到的 A 弦在高 E 弦上也响起。 那是因为高 E 是 A 的二次谐波（在...

  • webrtc 语音流java_Web语音处理 - Web Audio API & WebRTC

    如果你想开发一些语言应用，那么针对不同的设备平台，包括desktop和移动设备如ios、android，你可能需要使用不同的语言、不同的api来做开发。跨平台性差带来的工作量无疑是个问题。如果用web应用来实现，开发语言...

  • HTML5 Web Audio API给网页JS交互增加声音效果

    一、HTML5 Web Audio API介绍 首先务必要弄清这一点，本文这里所说的HTML5 Web Audio API和HTML5<audio>元素完全不是一个东西，其体量也完全不是一个等级的，HTML5 Web Audio API接口的丰富程度和体量可以和...

  • firefox-audio-compressor

    Audio Compressor 是一个插件，它使用动态范围压缩使音量更均匀。 有不同压缩级别的预设。 您可以自定义默认设置或特定站点或页面的设置。... 这是通过使用 Web Audio API 获取页面的音频上下文并插入。

  • 基于Web Audio API实现音频可视化效果

    alert("您的浏览器不支持audio API，请更换浏览器（chrome、firefox）再尝试，另外本人强烈建议使用谷歌浏览器！") } var audioContext = new AudioContext();//实例化 // 总结一下接下来的步骤 // 1 先获取音频...

  • WebAudioEvaluationTool:一种基于HTML5 Web音频API的工具，用于在本地或通过Web的远程计算机上执行感知音频评估测试

    网络音频评估工具作者作者电子邮件尼古拉斯·吉林斯<... 由于Microsoft Internet Explorer ，因此您将需要其他浏览器，例如Firefox，Chrome，Edge或Safari。 引用使用网络音频评估工具时，请感谢作者并引用Nichol

  • ws-audio-api:WebSocket音频API

    播放音频队列（需要Web Audio Api支持） 在所有浏览器中都可以正常工作 仅针对扬声器：在Chrome浏览器中，您应使用安全连接，因为Chrome在不安全的HTTP连接中不支持getUserMedia 凉亭 $ bower install ws-audio-api...

  • meteor-webaudio:玩弄网络音频 api

    Web Audio API 瀑布图（） 这个应用程序使用和来在您的网络浏览器中显示来自麦克风的音频频谱的实时瀑布图！ 此应用程序目前仅在 Firefox 上运行。 看看！ 尝试吹口哨或听音乐，您会看到频率亮起。 现在试着说一些...

Global site tag (gtag.js) - Google Analytics