一、常用对象

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. 升级 Java 编程规范的6个约定

    作为 Java 开发人员,我们会遵循一系列的编码风格和开发习惯.习惯使然是一方面,另一方面,我们也从不停下脚步质疑这些习惯.一段时间以后,笔者养成了一些不同于常人的编码风格和开发习惯.当第一次了解到这 ...

  2. Linux Shell编程(29)——函数

    和"真正的"编程语言一样, Bash也有函数,虽然在某些实现方面稍有些限制. 一个函数是一个子程序,用于实现一串操作的代码块,它是完成特定任务的"黑盒子". 当 ...

  3. FAT32,NTFS,EXT3,支持的最大分区和单个文件大小?

    FAT32 Filesystem: 最大单一档案大小 4GB 最大文件系统总容量 128GB NTFS Filesystem: 最大单一档案大小 64GB 最大文件系统总容量 2TB Ext3 Fil ...

  4. NVIDIA CG语言 函数之所有数学类函数(Mathematical Functions)

    数学类函数(Mathematical Functions) abs(x) 返回标量和向量x的绝对值 如果x是向量,则返回每一个成员的绝对值 acos(x) 返回标量和向量x的反余弦 x的范围是[-1, ...

  5. JavaScript 兼容 Array.prototype.slice.call

    IE9之前的IE版本的HTMLCollection以及NodeList不是Object的子类. 在通过Array.prototype.slice.call进行数组化的时候,IE9之前的IE版本会抛出异 ...

  6. 简单登陆UI设计

    简单UI设计 作品效果图: 关键技术:      用到了本地化控件:SharedPreferences,简单的说就是本地配置. 四大组件:Intent 基本思路请看代码: Java代码: import ...

  7. 使用python实现最优化问题

    最优化问题 1.无约束的最优化问题 所谓的无约束优化问题指的是一个优化问题的寻优可行集合是目标函数自变量的定义域,即没有外部的限制条件.例如,求解优化问题 [ \begin{array}{rl} \t ...

  8. cygwin with openssh

    新建系统变量 CYGWIN=ntsec path添加 ;c:\cygwin\bin 之后参考http://blog.csdn.net/benkaoya/article/details/8884677 ...

  9. 大牛博客!Spark / Hadoop / Kafka / HBase / Storm

    在这里,非常感谢下面的著名大牛们,一路的帮助和学习,给予了我很大的动力! 有了Hadoop,再次有了Spark,一次又一次,一晚又一晚的努力相伴! HBase简介(很好的梳理资料) 1. 博客主页:h ...

  10. hdu1195 Open the Lock (DFS)

    Problem Description Now an emergent task for you is to open a password lock. The password is consist ...