H5的Web Audio Api
概述
研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只读的,所以在ios上面改volume属性无效。
这个时候只能使用H5的Audio Api或者一些封装了Audio Api的库比如soundJs来解决。这篇博文记录了我学习原生Audio Api的心得,记录下来供以后开发时参考,相信对其他人也有用。
参考资料:
努力翻译一篇中文最友好的,Web Audio API的使用相关的文章
mdn Web Audio API
简介
Web Audio API是对<audio>标签
功能上的补充,它的强大之处在于:
- 它可以一秒内同时发出多个声音,甚至1000多种声音也可以不经过压缩直接播放。
- 它可以把音频流独立出来,进行复杂的处理。
- 它能将音频流输出到多个地方,比如canvas,从而实现音频的可视化与立体化。
使用Web Audio API的基本流程如下:
- 创建一个AudioContext对象。
- 给AudioContext对象添加声音源,声音源可以是
<audio>
里面的,也可以是通过网址自行下载的,也可以是利用oscillator模拟的。 - 创建需要使用的效果节点,比如reverb, biquad filter, panner, compressor, gainNode等。
- 选择音频的最终输出节点。比如电脑的扬声器。
- 把声音源和节点连接起来,并且把节点和最终输出节点连接起来。
- 播放声音。
代码示例
下面是一个使用<audio>源
播放的代码,主要实现声音的淡出效果:
//初始化音频api
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var audioCtx = new AudioContext();
//设置音频的源,使用id为Jaudio2的<audio>标签
var myAudio = document.querySelector("#Jaudio2");
var source = audioCtx.createMediaElementSource(myAudio);
//初始化音量控制节点
var gainNode = audioCtx.createGain();
//初始化音量,为1
gainNode.gain.setValueAtTime(1, audioCtx.currentTime);
//把节点连接起来。audioCtx.destination就是最终输出节点。
source.connect(gainNode);
gainNode.connect(audioCtx.destination);
//播放
myAudio.play();
//设置淡出效果,在2秒内音量递减到0
gainNode.gain.linearRampToValueAtTime(0, audioCtx.currentTime + 2);
//暂停声音
audioCtx.suspend();
问题
在具体的使用中,碰到一个问题,就是在移动端ios设备上利用上述代码播放不了音频,但是在PC端的chrome浏览器上可以正常播放并且实现淡出。
最后在看soundJs插件的时候,它的文档里面说,在ios上需要用户操作来解锁Web Audio!我们都知道在ios上面需要用户操作来解锁<audio>
或者<video>标签
,难道说Web Audio的初始化也需要用户操作来解锁吗?
等我找个时间试试看了。如果不行的话只能用封装了Web Audio的库比如soundJs了。
经测试,可行!!!Web Audio在safara浏览器上的初始化也需要用户操作(最好是用户点击)。
H5的Web Audio Api的更多相关文章
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- [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 osci ...
- 关于Web Audio API的入门
Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...
- 使用Web Audio API绘制音波图
摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- 【Web Audio API】 — 那些年的 web audio
转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...
随机推荐
- How to use BMW 35080 adapter with Yanhua Mini ACDP
I have a question about Yanhua Mini ACDP + module 4 BMW 35080 read and write: Can the 35080 adapter ...
- MySQL解压包的安装教程
一.下载MySQL解压包 解压过的文件夹里面是没有 data 文件夹的. 二.创建文件 1.在根目录下创建 my.ini文件 内容如下: [mysqld] # 设置mysql的安装目录 basedir ...
- 2,fiddler的基本设置
1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...
- Django学习笔记(进阶篇)
Django学习笔记(进阶篇):http://www.cnblogs.com/wupeiqi/articles/5246483.html
- [Hadoop]Hadoop章3 NameNode的ZKFC机制
基本概念 首先我们要明确ZKFC 是什么,有什么作用: zkfc是什么? ZooKeeperFailoverController 它是什么?是Hadoop中通过ZK实现FC功能的一个实用工具. 主要作 ...
- ORB-SLAM2阅读笔记(一)从mono_eourc.cpp出发理解ORB-SLAM2
泡泡机器人上已经有公开课ORB-SLAM2的代码详解了,我也先看了一个多小时的视频,后来发现看完还是迷迷糊糊,自己没看源码,根本不明白讲的什么,因此,打开文件开始阅读源码. 为了阅读逻辑清楚,我从OR ...
- 20175229张智敏 Arrays和String单元测试
Arrays和String单元测试 1.具体要求: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split A ...
- tp5
tp5.1创建模块 把build.php放在应用目录下面, 然后打开cmd, cd../../ cd phpstudy/www/tp5 php think build tp5.1控制器 return ...
- ehcache如何配置
1.pom.xml文件配置(主要针对jar包的引入) <ehcache.version>2.6.9</ehcache.version><ehcache-web.versi ...
- Java中十六进制转换 Integer.toHexString()
为了显示一个byte型的单字节十六进制(两位十六进制表示)的编码,请使用: Integer.toHexString((byteVar & 0x000000FF) | 0xFFFFFF00).s ...