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" ...
随机推荐
- Codeforces Round #131 (Div. 2) : B
首先能被2,5整除的数结尾必须是0: 如果没有0肯定不行: 然后判断他们的和ans%3: 如果==0,直接从大到小输出就行: 如果==1,要么删除它们之间最小的那个%3==1的,要么删除两个小的并且% ...
- [LeetCode#187]Repeated DNA Sequences
Problem: All DNA is composed of a series of nucleotides abbreviated as A, C, G, and T, for example: ...
- bzoj1297
首先学习是学习矩阵乘法在邻接矩阵的应用ab两点经过k条边的路径数就等于图的邻接矩阵G的k次幂之后G[a,b]的值但这道题问的是经过长度为k的路径数考虑到每条边的长度最长只有9,所以我们把一个点拆成9个 ...
- Linux Shell编程(29)——函数
和"真正的"编程语言一样, Bash也有函数,虽然在某些实现方面稍有些限制. 一个函数是一个子程序,用于实现一串操作的代码块,它是完成特定任务的"黑盒子". 当 ...
- 【转】Android--UI之ProgressBar--不错
原文网址:http://www.cnblogs.com/plokmju/p/android_progressbar.html 前言 开门见山,开篇明意.这篇博客主要讲解一下Android中Progre ...
- Hibernate(五)一对一单向关联映射
上次的博文中 Hibernate从入门到精通(四)基本映射我们已经讲解了一下基本映射和相关概念,接下来 我们会讲稍微复杂点的映射——关系映射. 关系映射分类 关系映射即在基本映射的基础上处理 多个相关 ...
- Android定义的路径全局变量
Android定义的路径全局变量 ifeq (,$(strip $(OUT_DIR))) OUT_DIR := $(TOPDIR)out endif DEBUG_OUT_DIR := $(OUT_DI ...
- 使用 环境变量 来配置批量配置apache
使用apache的DAV假设了一个GIT仓库.需要为每个项目写一个配置项, 配置内容如下 <directory "/srv/abcdfdfdjkdfjkgjjdhjklfdjjfdfd ...
- [Python]Pip的安装以及简单的使用
Pip的安装 安装python以后(我的python版本是32位,版本号2.7.10),如果需要安装一些其他的库,一般有两种办法,一种是自己手动去各个库的官网下载,自己安装:另一种方法是安装pip,使 ...
- Java GC专家系列2:Java 垃圾回收的监控
这是”成为GC专家系列”文章的第二篇.在第一篇理解Java垃圾回收中我们学习了几种不同的GC算法的处理过程,GC的工作方式,新生代与老年代的区别.到目前为止,你应该已经了解了JDK 7中的5种GC类型 ...