HTML5音频API Web Audio

Juven 发布于2019-08-20 18:37 / 1730人阅读

摘要：属性返回对象，表示当前中所有节点的最终节点，一般表示音频渲染设备。包括音频源，音频输出，中间处理模块。延迟停止时间，单位为秒。音频终点是通过接口的属性访问的。各个音频处理通道内的操作是独立的，不影响其他音频通道。

此文介绍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);

多个音频源

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

戳我看栗子

多个音频处理模块

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

戳我看栗子

欢迎关注：Leechikit
原文链接：segmentfault.com

到此本文结束，欢迎提问和指正。
写原创文章不易，若本文对你有帮助，请点赞、推荐和关注作者支持。

云服务器服务器托管 webrtc audio api html5的audio 音频通话 api 音频通话api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84772.html

HTML5音频API Web Audio

摘要：属性返回对象，表示当前中所有节点的最终节点，一般表示音频渲染设备。包括音频源，音频输出，中间处理模块。延迟停止时间，单位为秒。音频终点是通过接口的属性访问的。各个音频处理通道内的操作是独立的，不影响其他音频通道。此文介绍HTML5音频API的主要框架和工作流程，因为音频处理模块很多，因此只简单介绍几种音频处理模块，并通过例子来展示效果。后续会介绍利用HTML5音频API实现的项目，欢...

WelliJhon 2019-08-05 11:48 评论0 收藏0
【Web Audio API】 — 那些年的 web audio

摘要：转那些年的这主题主要是早期对的一些尝试，这里整理一下以便以后翻阅，如有错误，诚请指正。以浏览器厂商老大的身份，很快以及后续的均支持了。转 TAT.Jdo：【Web Audio API】 — 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试，这里整理一下以便以后翻阅，如有错误，诚请指正。在这之前，先回顾一下那些年我们一起走过的web audi...

YuboonaZhang 2019-08-02 18:09 评论0 收藏0
那些 audio api的事 (一) AudioContext

摘要：高动态范围，采用进行内部处理。这最大限度地减少体积骤降音频区域之间，从而导致更均匀的交叉衰减，可能是在电平略有不同区域之间。低通滤波器保持较低的频率范围，但丢弃高频。引用 Getting Started with Web Audio APIhttp://www.html5rocks.com/en/tutorials/webaudio/intro/ Introduction Audio...

沈俭 2019-08-21 10:38 评论0 收藏0
利用 web audio api 实现音频可视化

摘要：其实这个能做的事不光是音频可视化。其实这次写博客之前还完善了一下，给加上了通过设备的麦克风获取音频并可视化的方法。世界晚安参考基于实现音频可视化效果本文作者本文链接利用实现音频可视化音频可视化实现之后真的很酷，虽然这次只是跟着MDN上的教程学习了一下，照着Demo敲了一遍而已。但收获颇多，记录于此。 web audio api 先来感受一下 web audio api 的基础概念，下...

PingCAP 2019-08-23 11:29 评论0 收藏0
那是我在夕阳下的奔跑：边跑边学习html5之audio与video

摘要：尤其是乔布斯在年发布的一篇的文章。乔布斯在里面写下了关于的一点看法，说明自己为什么不使用，谈到关于的一些问题，比如开放性，安全性，对于设备续航的影响，不利于触摸屏，等等。终于，于年月日，爸爸也放弃治疗了，宣布将于年正式退休。今天为大家分享一下html5中的视频（video）与音频（audio）。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前...

gself 2019-08-20 19:04 评论0 收藏0