一、常用对象

1.AudioContext对象

AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经这些节点并作出相应处理。

创建AudioContent对象

//普通写法
var audioContext=new window.AudioContext();
//为了兼容,也可以这样写
window.AudioContext = window.AudioContext || window.webkitAudioContext ||
window.mozAudioContext || window.msAudioContext;
//也可以使用错误处理
try {
var audioContext = new window.AudioContext();
} catch (e) {
Console.log('!Your browser does not support AudioContext');
}

解码音频文件

audioContext.decodeAudioData(binary, function(buffer) { ... });

读取到的音频文件时2进制文件(可以使用Ajax远程加载,可以使用FileAPI读取本地文件),

我们需要让AudioContext先对其解码,然后再进行后续擦做。

返回结果的buffer为AudioBuffer类型数据。

2.AudioBuffer对象

length:文件大小

duration:音频长度

3.创建音频处理节点

AudioBufferSourceNode对象

//创建AudioBufferSourceNode对象
var source = ctx.createBufferSource();

链接节点:

                    //创建AudioBufferSourceNode对象
var source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);

AnalyserNode对象(分析器)

创建链接点:

//创建分析器
var analyser = ctx.createAnalyser();
source = ctx.createBufferSource();
//将source与分析器链接
source.connect(analyser);
//将分析器与destination链接,这样才能形成到达扬声器的通路
analyser.connect(ctx.destination);
//将解码后的buffer数据复制给source
source.buffer = buffer;

播放/暂停

audioBufferSourceNode.buffer = buffer; //回调函数传入的参数 
audioBufferSourceNode.start(0); //指定位置开始播放
audioBufferSourceNode.stop();

更多参考(中文版):https://developer.mozilla.org/zh-CN/docs/Web/API/AudioContext

更多参考:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API

HTML5 WebAudioAPI简介(一)的更多相关文章

  1. HTML5 WebAudioAPI(四)--绘制频谱图2

    绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...

  2. HTML5 WebAudioAPI(三)--绘制频谱图

    HTML <style> #canvas { background: black; } </style> <div class="container" ...

  3. HTML5的简介

    前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求 ...

  4. 【HTML5】HTML5 WebSocket简介以及简单示例

    互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...

  5. HTML5标准简介

    最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...

  6. HTML5 WebAudioAPI-实例(二)

    简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContex ...

  7. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  8. HTML5 <Audio>标签API整理(三)

    一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...

  9. HTML5使用JavaScript控制<audio>音频的播放

    1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...

随机推荐

  1. ios6,ios7,ios7.1下设置UISearchbar的背景色

    ios系统升级到7.1后,原来在7.0下显示正常的UISearchbar现在又出现问题了.究其原因,是由于UISearchbar的subview又做修改了. float version = [[[ U ...

  2. Tomcat架构(二)

    5.容器组件 这一小节中我们将讨论请求处理组件:引擎(engine).虚拟主机.上下文(context)组件. 5.1.引擎(engine) 引擎表示可运行的Catalina的servlet引擎实例并 ...

  3. 安卓天天练练(五)CompoundButton

    ToggleButton 让我想起了从前jQuery还没有取消toggle方法时是怎么偷懒的.. 注意: 如果LinearLayout,与RelativeLayout不同,必须有orientation ...

  4. 分析WordPress主题结构是如何架构的?

    利用强大的技术,可以把基于WordPress的网站做成各种各样的形式,这除了要求WordPress主题开发人员精通HTML,PHP,JS,CSS等技术,还需要开发者掌握WordPress主题的框架.下 ...

  5. 14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小

    14.7.2 Changing the Number or Size of InnoDB Redo Log Files 改变InnoDB Redo Log Files的数量和大小 改变 InnoDB ...

  6. TCP/IP TELNET & SSH

    快速导航 远程登录示例 关于远程登录? 嵌入? 用来控制远程服务器上运行的应用程序字符? 转义? 操作方式? 关于SSH? 远程登录示例 关于远程登录? 网络虚拟终端(Network Virtual ...

  7. TMS320VC5509A DSP学习路线(持续更新)

    step 1:芯片的数据手册(data sheet) 参考资料:sprs205k_TMS320VC5509A Fixed-Point Digital Signal Processor Data Man ...

  8. 乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽

    乐视手机1S正式发售,乐视商城官网抽风遭网友吐槽 10月27日,乐视召开的新品发布会上正式推出千元金属新机乐1s,售价1099元.今天11月3日上午10:00,乐1s在乐视商城.京东商城首发开卖,现货 ...

  9. Just a Hook

      Just a Hook 题目大意:原来有N个铜棍, 一个人有种能力可以把一个区间的棍变成铜,银或者金的,价值分别是1,2,3, 最后求出总价值,没啥好说的,赤裸裸的线段树: Time Limit ...

  10. 使用php将数组转为XML

    <?php class Array_to_Xml { private $version = '1.0'; private $encoding = 'UTF-8'; private $root = ...