html录音并转为音频文件,html5音频api web audio -凯发ag旗舰厅登录网址下载

此文介绍html5音频api的主要框架和工作流程，因为音频处理模块很多，因此只简单介绍几种音频处理模块，并通过例子来展示效果。后续会介绍利用html5音频api实现的项目，欢迎大家关注，敬请期待。

html5音频api的主要框架和工作流程如下图，在 audiocontext 音频上下文中，把音频文件转成 buffer 格式，从音频源 source 开始，经过 auidonode 处理音频，最后到达 destination 输出音乐。这里形成了一个音频通道，每个模块通过 connect 方法链接并传送音频。

audiocontext

audiocontext 是一个音频上下文，像一个大工厂，所有的音频在这个音频上下文中处理。

let audiocontext = new(window.audiocontext || window.webkitaudiocontext)();

audiocontext 音频上下文提供了很多属性和方法，用于创建各种音频源和音频处理模块等，这里只介绍一部分，更多属性和方法可到mdn查阅文档。

属性

audiocontext.destination

返回 audiodestinationnode 对象，表示当前 audiocontext 中所有节点的最终节点，一般表示音频渲染设备。

方法

audiocontext.createbuffersource()

创建一个 audiobuffersourcenode 对象, 他可以通过 audiobuffer 对象来播放和处理包含在内的音频数据。

audiocontext.creategain()

创建一个 gainnode,它可以控制音频的总音量。

audiocontext.createbiquadfilter()

创建一个 biquadfilternode，它代表代表一个双二阶滤波器，可以设置几种不同且常见滤波器类型：高通、低通、带通等。

createoscillator()

创建一个 oscillatornode, 它表示一个周期性波形，基本上来说创造了一个音调。

音频转换成buffer格式

使用decodeaudiodata()方法把音频文件编译成buffer格式。

function decodeaudiodata(audiocontext, url) {

return new promise((resolve) => {

let request = new xmlhttprequest();

request.open('get', url, true);

request.responsetype = 'arraybuffer';

request.onload = () => {

audiocontext.decodeaudiodata(request.response, (buffer) => {

if (!buffer) {

alert('error decoding file data: ' url);

return;

} else {

resolve(buffer);

}

})

}

request.onerror = function() {

alert('bufferloader: xhr error');

}

request.send();

})

}

let buffer = decodeaudiodata(audiocontext, './sounds/music.mp3');

audionode

音频节点接口是一个音频处理模块。包括音频源，音频输出，中间处理模块。

方法

audionode.connect()

链接两个 audionode 节点，把音频从一个 audionode 节点输出到另一个 audionode 节点，形成一个音频通道。

audionode.disconnect()

把 audionode 节点与其他节点断开链接。

audiobuffersourcenode

音频源有多种，这里只介绍 buffer 的音频源，buffer 的音频源通过 audiocontext 接口的 createbuffersource 方法来创建。音频源节点继承 audionode 音频节点。

let buffersource = audiocontext.createbuffersource();

创建了 audiobuffersourcenode 对象后，把 buffer 格式的音频数据赋值给 audiobuffersourcenode 对象的 buffer 属性，此时音频已经传递到音频源，可以对音频进行处理或输出。

buffersource.buffer = buffer;

方法

audiobuffersourcenode.start(when[, duration])

开始播放。

when：延迟播放时间，单位为秒。

offset：定位音频到第几秒开始播放。

duration：从开始播放结束时长，当经过设置秒数后自动结束音频播放。

audiobuffersourcenode.stop([when])

when：延迟停止时间，单位为秒。

停止播放，注意调用该方法后，无法再次调用 audiobuffersourcenode.start 播放。

audiodestinationnode

音频终点是通过 audiocontext 接口的 destination 属性访问的。音频终点继承 audionode 音频节点，

audiodestinationnode 节点无法再把音频信息传递给下一个音频节点，即无法再链接其他音频节点，因为他已经是终点，没有输出，也可以理解为他自己就是输出。

let audiodestinationnode = audiocontext.destination;

此时我们有音频起点 audiobuffersourcenode 和音频终点 audiodestinationnode ，使用 audionode.connect() 方法把起点和终点链接起来，就形成了一条有输入输出的音频通道，可以把音频直接播放出来。

buffersource.connect(audiodestinationnode);

gainnode

用于音量变化。它是一个 audionode 类型的音频处理模块。

let gainnode = audiocontext.creategain();

把音频源、音频输出和音频处理模块链接一起，形成可控制音量大小的音频。

buffersource.connect(gainnode);

gainnode.connect(audiodestinationnode);

let controlvolume = value => {

gainnode.gain.value = value);

}

// 两倍音量播放

controlvolume(2);

biquadfilternode

表示一个简单的低频滤波器，可控制声调。它是一个 audionode 类型的音频处理模块。

let filternode = audiocontext.createbiquadfilter();

输出一个变调的音频：

buffersource.connect(filternode);

filternode.connect(audiodestinationnode);

let controlfrequency = function(value) {

filternode.frequency.value = value;

}

// 音频为1000变调

controlfrequency(1000);

多个音频源

在一个音频上下文中，可以有多个音频处理通道，即多个音频源同时输出。各个音频处理通道内的操作是独立的，不影响其他音频通道。

多个音频处理模块

一个音频源可以经过多个音频处理模块处理，音频处理模块叠加效果后输出。

到此本文结束，欢迎提问和指正。

写原创文章不易，若本文对你有帮助，请点赞、推荐和关注作者支持。

与50位技术专家面对面20年技术见证，附赠技术全景图

总结

以上是凯发ag旗舰厅登录网址下载为你收集整理的html录音并转为音频文件,html5音频api web audio的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发ag旗舰厅登录网址下载网站内容还不错，欢迎将凯发ag旗舰厅登录网址下载推荐给好友。