audio与Web Audio

做H5游戏难免会遇到需要播放背景音乐或者音效的时候。一开始看到这个需求第一反应就是用H5中的audio标签去实现,但是在实现的过程中发现它存在很多的问题。

1.只能播放单一音频(在包括IOS在内的某些设备上)。什么意思呢?就是说如果你同时在播放背景音乐的时候播放音效的话,背景音乐会被停掉。这是一个非常严肃的问题。

2.在IOS中不能预加载。这会导致H5游戏在IOS中播放音效时,只能实时的去拉去音频数据,会对性能造成一定影响。而且在加载的过程中去设置audio的某些属性会报错。

3.在包括IOS在内的部分设备上,只能在原生的click等事件的回调函数中使用,在普通的程序逻辑中调用play方法无法生效。

当H5游戏遇上这些问题,真是没法愉快的玩耍了!IOS对其的支持力度真是让人扼腕!没办法,誰让人家有APP STORE呢……

后来就盯上web audio了。这货不像audio可以有GUI,但是在游戏中我们也不需要GUI,所以如果她在IOS上表现OK的倒是非常值得宠幸的。

搜了下发现了下图,目测IOS支持力度尚可。

中间省略1K字。下面我们来看看她的特点和怪癖。

1.对音频的支持非常到位,支持音频输出和音频波形的合成等。

2.使用时需要实例一个AudioContext或者WebkitAudioContext(取决于浏览器的支持),然后绑定音频。获取音频文件时需要用HTTP传输,比如new XMLHttpRequest()。需要。还需要AudioBuffer()来缓冲音频文件,并且要解码、连接到输出设备等然后再播放。反正就是挺繁琐的……

3.播放使用noteOn(0),android上的Chrome不支持noteOn(0),支持start(0)播放

4.可以同时播放多个音频。

5.一个对象只能播放一次,如果需要重复播放要生成新的对象。

6.android中原生的浏览器不支持

7.IOS支持非常完美。

8.可以预加载

9.第一次播放时需要在click等事件的回调函数里执行,不然会没有声音,后面就不需要了。

通过上面的介绍,可以得知audio与web Audio各占半壁江山,看来也只能同时纳入怀中了~

在实践过程中采用优先使用Web Audio(在使用noteOn(0)时要先判断是否支持这个方法,不支持的话要使用start(0)),如果浏览器不支持则采用audio,比如android设备中的非chrome浏览器,并且做优雅降级,不支持的浏览器只播放单一音频。

虽说做手机游戏远离了IE6的摧残,可以各种设备的兼容性问题也着实让人有些头疼有木有……

时间: 2024-11-09 08:05:23

audio与Web Audio的相关文章

[Javascript] Intro to the Web Audio API

An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an oscillator node that actually plays a sound in the browser, and different ways to alter that sound. var context = new window.AudioContext() || new window.

Web Audio API DEMO

一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下.偶尔还是要写一下. 玩HTML5的Audio API是因为之前看到博客园里有关于这个的博客,觉得挺好玩的,所以就学习了一下.本文仅作为自己的学习记录.如有错误之处请指出.   最终的效果也就如右图,楼主只是简单的做了个demo,如果要有更复杂的效果,园友们可以自己去玩一下 DEMO链接:请戳我!!!   选择音频文件后即可播放 同时,这个API目前浏览器支持度不高,若要用于生产环境,请自行斟酌. 首先,要做

【HTML5】Web Audio API打造超炫的音乐可视化效果

HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去star或者fork我,源码注释超清楚的哦~~之前看刘大神的文章和源码,感觉其他方面的内容太多了,对初学者来说可能一下子难以抓到Web Audio API的重点,所以我就从一个初学者的角度来给大家说说Web Audio API这些事吧. Web Audio API与HTML5提供的Audio标签并不是同

Web Audio介绍

Web Audio还是一个比较新的JavaScript API,它和HTML5中的<audio>是不同的,简单来说,<audio>标签是为了能在网页中嵌入音频文件,和播放器一样,具有操作界面,而Web Audio则是给了开发者对音频数据进行处理.分析的能力,例如混音.过滤等,类似于对音频数据进行PS. 一般的网站应用应该是用不倒这些API中的,但是一些游戏引擎或者在线音乐编辑等类型的网站应该用得到. Web Audio API紧紧围绕着一个概念设计:audio context,它就

web audio living

总结网页音频直播的方案和遇到的问题. 代码:(github,待整理) 结果: 使用opus音频编码,web audio api 播放,可以达到100ms以内延时,高质量,低流量的音频直播. 背景: VDI(虚拟桌面) h264网页版预研,继h264视频直播方案解决之后的又一个对延时有高要求的音频直播方案(交互性,音视频同步). 前提: flexVDI开源项目对音频的支持只实现了对未编码压缩的PCM音频数据.并且效果不好,要么卡顿,要么延时,流量在2~3Mbps(根据缓冲的大小). 解决方案: 在

基于canvas和Web Audio的音频播放器

wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作.包括 Firefox, Chrome, Safari, Mobile Safari 和 Opera浏览器. 在线演示:http://www.htmleaf.com/Demo/201503151525.html 下载地址:http://www.htmleaf.com/html

关于Web Audio API的入门

Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用>  https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API/Using_Web_Audio_API 不过,看了上述文章后可能还是不知道怎么用Web Audio API来实现一些简单的功能,比如播放一段mp3音频,文章中并没有相应的例

ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别

处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整体web应用的开发.最开始我实现了一个web端录好音然后上传服务端进行语音识别的简单demo,但是这种结构太过简单,对浏览器的负担太重,而且响应慢,交互差:后来经过调研,发现微软的语音服务接口是支持流输入的连续识别的,因此开发重点就在于实现前后端的流式传输.参考这位国外大牛写的博文Continuou

用 Web 实现一个简易的音频编辑器

前言 市面上,音频编辑软件非常多,比如 cubase.sonar 等等.虽然它们功能强大,但是在 Web 上的应用却显得心有余而力不足.因为 Web 应用的大多数资源都是存放在网络服务器中的,用 cubase 这些软件,首先要把音频文件下载下来,修改完之后再上传到服务器,最后还要作更新操作,操作效率极其低下.如果能让音频直接在 Web 端进行编辑并更新到服务器,则可以大大提高运营人员的工作效率.下面就为大家介绍一下如何运用 Web 技术实现高性能的音频编辑器. 本篇文章总共分为 3 章: 第 1