HTML5 WebAudioAPI简介(一)
一、常用对象
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简介(一)的更多相关文章
- HTML5 WebAudioAPI(四)--绘制频谱图2
绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...
- HTML5 WebAudioAPI(三)--绘制频谱图
HTML <style> #canvas { background: black; } </style> <div class="container" ...
- HTML5的简介
前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求.比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求 ...
- 【HTML5】HTML5 WebSocket简介以及简单示例
互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...
- HTML5标准简介
最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...
- HTML5 WebAudioAPI-实例(二)
简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContex ...
- HTML5 <Audio>标签API整理(一)
简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...
- HTML5 <Audio>标签API整理(三)
一.浏览器支持 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 都支持 <audio> 元素. 注意: Internet Ex ...
- HTML5使用JavaScript控制<audio>音频的播放
1.播放音乐最简单的样例 <audio controls> <source src="horse.mp3" type="audio/mpeg" ...
随机推荐
- iOS9 App Thinning(应用瘦身)功能介绍
iOS9 发布后,产生了一个使 App Thinning 无法正常运行的 bug.在iOS9.0.2 版本中,这个 bug 已经被修复,App Thinning 已经可以正常使用.当你从应用商店(Ap ...
- Ikki's Story IV - Panda's Trick
poj3207:http://poj.org/problem?id=3207 题意::平面上有一个圆,圆的边上按顺时针放着0..n-1共n个点.现在要连m条边,比如a,b,那么a到b可以从圆的内部连接 ...
- Occupy Cities
hdu4606:http://acm.hdu.edu.cn/showproblem.php?pid=4606 题意:在一个二维坐标系中,有n个城市,坐标给出来了,然后有p个士兵要去占领这n个城市,但是 ...
- Android 模拟HTTP协议的编码问题 Android默认编码UTF-8
Android通过GET和POST方法请求服务器和浏览器请求的过程是不一样的. 浏览器请求服务器的时候会先将中文进行UTF-8编码,然后再发送到服务器端. Android编程下我们需要通过URLEnc ...
- 使用javascript获取网址的各个参数
有时也挺无奈的,为了实现一个功能,不得不用到前台获取参数.幸亏,有javascript,不然真的是坑大发了,感谢javascript的创造者.开始show大图: 属性 值href:完整的 URL ...
- python手记(32)
#!/usr/bin/env python #-*- coding: utf-8 -*- import cv2 import numpy as np fn="test2.jpg" ...
- mysql常见字符串处理函数结束
一.简明总结 ASCII(char) 返回字符的ASCII码值 BIT_LENGTH(str) 返回字符串的比特长度 CONCAT(s1,s2…,sn) 将s1,s2…,sn连接成字符串 CONCAT ...
- apk,task,android:process与android:sharedUserId的区别
apk一般占一个dalvik,一个进程,一个task.通过设置也可以多个进程,占多个task. task是一个activity的栈,其中"可能"含有来自多个App的activity ...
- bzoj3124
很好的一道treedp,当然也挺烦的首先不难想到先求出一个直径,然后穷举每条边,看他删除之后直径大小是否会变,变了的话就是必须经过的边下面我们就要想怎么优化,本人语言表达略差,还是配合程序说吧. ty ...
- Oracle 插入超4000字节的CLOB字段的处理方法
最近在做系统开发的时候需要想Oracle数据库插入超过4000字节的CLOB字段,在网上查询了N久才发现下面的解决方案,故留存以备后查. 我们可以通过创建单独的OracleCommand来进行指定的插 ...