概述

研究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>标签功能上的补充,它的强大之处在于:

  1. 它可以一秒内同时发出多个声音,甚至1000多种声音也可以不经过压缩直接播放。
  2. 它可以把音频流独立出来,进行复杂的处理
  3. 它能将音频流输出到多个地方,比如canvas,从而实现音频的可视化与立体化。

使用Web Audio API的基本流程如下:

  1. 创建一个AudioContext对象。
  2. 给AudioContext对象添加声音源,声音源可以是<audio>里面的,也可以是通过网址自行下载的,也可以是利用oscillator模拟的。
  3. 创建需要使用的效果节点,比如reverb, biquad filter, panner, compressor, gainNode等。
  4. 选择音频的最终输出节点。比如电脑的扬声器。
  5. 把声音源和节点连接起来,并且把节点和最终输出节点连接起来。
  6. 播放声音。

代码示例

下面是一个使用<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的更多相关文章

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

    HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我!  源码已经挂到github上了,有兴趣的同学也可以去st ...

  2. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  3. [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 ...

  4. 关于Web Audio API的入门

    Web Audio API提供了一个简单强大的机制来实现控制web应用程序的音频内容.它允许你开发复杂的混音,音效,平移以及更多. 可以先看一下MDN的这篇文章<Web Audio API的运用 ...

  5. 使用Web Audio API绘制音波图

    摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...

  6. Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo

    1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...

  7. HTML5 ——web audio API 音乐可视化(二)

    上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像. 最终效果请戳这里; 完整版 ...

  8. HTML5 ——web audio API 音乐可视化(一)

    使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...

  9. 【Web Audio API】 — 那些年的 web audio

    转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...

随机推荐

  1. 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 ...

  2. MySQL解压包的安装教程

    一.下载MySQL解压包 解压过的文件夹里面是没有 data 文件夹的. 二.创建文件 1.在根目录下创建 my.ini文件 内容如下: [mysqld] # 设置mysql的安装目录 basedir ...

  3. 2,fiddler的基本设置

    1,首次打开的基本设置 2,过滤抓包的内容 1)较为常用的是: URL包含和hosts的设置 2)不常用的是 3,设置https 这是实在安装证书,当还是不能抓到https的包的时候,可以区安装彼得证 ...

  4. Django学习笔记(进阶篇)

    Django学习笔记(进阶篇):http://www.cnblogs.com/wupeiqi/articles/5246483.html

  5. [Hadoop]Hadoop章3 NameNode的ZKFC机制

    基本概念 首先我们要明确ZKFC 是什么,有什么作用: zkfc是什么? ZooKeeperFailoverController 它是什么?是Hadoop中通过ZK实现FC功能的一个实用工具. 主要作 ...

  6. ORB-SLAM2阅读笔记(一)从mono_eourc.cpp出发理解ORB-SLAM2

    泡泡机器人上已经有公开课ORB-SLAM2的代码详解了,我也先看了一个多小时的视频,后来发现看完还是迷迷糊糊,自己没看源码,根本不明白讲的什么,因此,打开文件开始阅读源码. 为了阅读逻辑清楚,我从OR ...

  7. 20175229张智敏 Arrays和String单元测试

    Arrays和String单元测试 1.具体要求: 在IDEA中以TDD的方式对String类和Arrays类进行学习 测试相关方法的正常,错误和边界情况 String类 charAt split A ...

  8. tp5

    tp5.1创建模块 把build.php放在应用目录下面, 然后打开cmd, cd../../ cd phpstudy/www/tp5 php think build tp5.1控制器 return ...

  9. ehcache如何配置

    1.pom.xml文件配置(主要针对jar包的引入) <ehcache.version>2.6.9</ehcache.version><ehcache-web.versi ...

  10. Java中十六进制转换 Integer.toHexString()

    为了显示一个byte型的单字节十六进制(两位十六进制表示)的编码,请使用: Integer.toHexString((byteVar & 0x000000FF) | 0xFFFFFF00).s ...