HTML5 WebAudioAPI简介(一)

2023-08-20 15:36:46

一、常用对象

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

码农公寓

相关文章