索鸟网

  1. 首页
  2. HTML5音频API Web Audio

HTML5音频API Web Audio


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

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

音频 html5 javascript

来源地址:https://segmentfault.com/a/1190000010561222 版权归作者所有!

相关教程

  • HTML5音频audio属性

    audio 的控制函数主要有: load() 加载音频、视频软件,通常不必调用,除非是动态生成的元素,用来在播放前预加载play() 加载并播放音频、视频文件,除非文件已经暂停在其他位置,否则默认重头开始播放pause() 暂停处于播放状态的音频、视频文件 audio 的只读媒体特性有: duration 获取媒体文件的播放时长,以s为单位,如果无法获取
  • HTML5 Audio标签方法和函数API介绍

    文章目录: audio常用属性 audio音乐格式的支持 audio属性 参数说明 最近在搞audio方面的h5页面,遇到一些坑,希望这篇文章对大家有所帮助。 audio常用属性 那么首先来看一下audio标签中的一些常用属性: 属性 属性值 注释 src url 播放的音乐的url地址(火狐只支持ogg的音乐,而IE9只支持MP3格式的音乐
  • 10个最常见的 HTML5 面试题及答案

    1、新的 HTML5 文档类型和字符集是? HTML5 文档类型很简单: <!doctype html> HTML5 使用 UTF-8 编码示例: <meta charset=”UTF-8″> 2、HTML5 中如何嵌入音频? HTML5 支持 MP3、Wav 和 Ogg 格式的音频,下面是在网页中嵌入音频的简单示例: <audio con
  • 那是我在夕阳下的奔跑:边跑边学习html5之audio与video

    今天为大家分享一下html5中的视频(video)与音频(audio)。在进入主题之前我们先了解一下Flash与html5这两种技术的时代背景与发展历史。 1.前言 Flash被退休与html5的上位 Flash这项技术诞生于20多年前,曾被应用于98%的个人电脑上,是开发者最青睐的软件之一,被用于开发游戏、视频播放器和可在多个网络浏览器上运行的应用。
  • web音频流转发之AudioNode

    前言 上一章地址: web音频流转发之音频源在这一章我说几个我们需要用到的音频处理模块也就3个吧,包括我们转发流是需要用到的核心模块。更多模块请看MDN,或者看HTML5音频API Web Audio也有一些中文讲解,希望大家多多支持。 概述 AudioNode:是一个处理音频的通用模块, 比如一个音频源 (e.g. 一个 HTML <audio&
  • htm5新特性(转)

    转自:http://hyuhan.com/2017/07/06/... 今天来谈谈前端面试中基本上每次一面都会被问到的一个问题,那就是html5的新特性了。这个是学习前端必须掌握的基础知识。 新增的元素 html5新增了一些语义化更好的标签元素。 结构元素 article元素,表示页面中的一块与上下文不相关的独立内容,比如博客中的一篇文章。aside元素
  • web音频流转发之音频源

    前言 app能直播,web为什么不可以?看完本系列文章,你就能做一个直播,真正的直播,包括音频流的转发,这也是我最近查看web audio api发现有相关api能实现音频流的转发,所有打算分享系列文章供大家交流,如有不对之处请指正。看完本系列文章能完成一个web直播,当然包括视频流。当然webrtc也能实现web直播,但是实现原理有所差别。文章也很简单
  • 用 TS + Vue 重写 APlayer HTML5 音乐播放器

    简介 @DIYgod/APlayer 是一款简洁漂亮的 HTML5 音乐播放器 (〃ノωノ) 在我第一次看到这款播放器颜值的时候让我眼前一亮,我非常崇拜那些能设计出好看界面的设计师 (* >ω<) 但是在用过之后发现还是有不足的地方 这是我曾经提过的 Issues 用了一段时间,很喜欢 APlayer 简洁的 UI,提一些其他可改进的建议