【前端】Web Audio API接口介绍

简言

记录下Web Audio API接口的介绍。
Web Audio API 提供了在 Web 上控制音频的一个非常有效通用的系统，允许开发者来自选音频源，对音频添加特效，使音频可视化，添加空间效果（如平移），等等。

Web Audio API

Web Audio API 使用户可以在音频上下文（AudioContext）中进行音频操作。
基本音频操作通过音频节点执行，这些节点连接在一起形成音频路由图。即使在单个上下文中，也可支持多个具有不同类型通道布局的音源。这种模块化设计为创建具有动态效果的复杂音频功能提供了灵活性。这种模块化设计提供了灵活创建动态效果的复合音频的方法。

音频节点（audio node）通过它们的输入输出相互连接，形成一个链或者一个简单的网。一般来说，这个链或网起始于一个或多个音频源。
音频源可以提供一个片段一个片段的音频采样数据（以数组的方式）,也可以是音频或视频的文件读出来的，又或者是音频流（MediaStreamAudioSourceNode）。

这些节点的输出可以连接到其他节点的输入上，然后新节点可以对接收到的采样数据再进行其他的处理，再形成一个结果流。

声音处理完成之后，可以连接到一个目的地（AudioContext.destination），这个目的地负责把声音数据传输给扬声器或者耳机。注意，只有当用户期望听到声音时，才需要进行最后一个这个连接。

web audio流程如下：

  1. 使用 AudioContext 创建音频上下文。
  2. 在音频上下文里创建音频源，音频源可以是上面说的那三种情况。
  3. 对音频进行处理（当然也可以不处理），处理需要创建效果节点，例如混响、双二阶滤波器、平移、压缩等。
  4. 为音频选择一个目的地，例如你的系统扬声器
  5. 连接源到效果器，对目的地进行效果输出。

Web Audio API 接口

Web Audio API 共有一系列接口和相关的事件。

  • AudioContext — AudioContext 接口代表由音频模块构成的音频处理图。音频上下文控制其所包含节点的创建和音频处理、解码。使用其他接口前你必需创建一个音频上下文，一切操作都在这个环境里进行。
  • AudioNode — 音频节点 接口是一个音频处理模块，包含了音频源节点、音频输出、音量控制节点等。
  • AudioParam — AudioParam 接口代表音频相关的参数，比如一个 AudioNode的参数。它可以设置为特定值或值的变化，并且可以在指定的时间之后以指定模式变更。
  • ended结束事件 — 当媒体播放停止时，会触发ended事件。
  • OscillatorNode — OscillatorNode 接口代表一种随时间变化的波形，比如正弦波形或三角波形。类型是AudioNode，功能是音频处理模块，可以产生指定频率的波形。
  • AudioBuffer — AudioBuffer 代表内存中的一段音频数据，可以通过AudioContext.decodeAudioData()方法从音频文件创建，也可以通过AudioContext.createBuffer()方法从原始数据创建。当音频数据被解码成这种格式之后，就可以被放入一个AudioBufferSourceNode中使用。
  • AudioBufferSourceNode — AudioBufferSourceNode 表示由内存音频数据组成的音频源，音频数据存储在AudioBuffer中。这是一个作为音频源的AudioNode。
  • MediaElementAudioSourceNode — MediaElementAudioSourceNode 接口表示由 HTML5 <audio>或<video>元素生成的音频源。这是一个作为音频源的AudioNode。
  • MediaStreamAudioSourceNode — MediaStreamAudioSourceNode 接口表示由 WebRTC MediaStream（如网络摄像头或麦克风）生成的音频源。这是一个作为音频源的AudioNode。
  • BiquadFilterNode — BiquadFilterNode 接口表示一个简单的低阶滤波器。它是一个AudioNode，可以表示不同种类的滤波器、调音器或图形均衡器。BiquadFilterNode 总是只有一个输入和一个输出。
  • ConvolverNode — ConvolverNode 接口是一个AudioNode，对给定的 AudioBuffer 执行线性卷积，通常用于实现混响效果。
  • DelayNode — DelayNode 接口表示延迟线；是AudioNode 类型的音频处理模块，使输入的数据延时输出。
  • DynamicsCompressorNode — DynamicsCompressorNode 提供了一个压缩效果，当多个音频在同时播放并且混合的时候，可以通过它降低音量最大的部分的音量来帮助避免发生削波和失真。
  • GainNode — GainNode 接口用于音量变化。它是一个 AudioNode 类型的音频处理模块，输入后应用增益 效果，然后输出。
  • StereoPannerNode — StereoPannerNode 接口表示一个简单立体声控制节点，用来左右移动音频流(左右声道处理)。
  • WaveShaperNode — WaveShaperNode 接口表示一个非线性的扭曲。它是AudioNode类型，可以利用曲线来对信号进行扭曲。除了一些效果明显的扭曲，还常被用来给声音添加温暖的感觉(暖调处理)。
  • PeriodicWave — 用来定义周期性的波形，可被用来重塑 OscillatorNode的输出。
  • AudioDestinationNode — AudioDestinationNode 定义了最后音频要输出到哪里，通常是输出到你的扬声器。
  • MediaStreamAudioDestinationNode — MediaStreamAudioDestinationNode 定义了使用 WebRTC 的MediaStream（只包含单个 AudioMediaStreamTrack）应该连接的目的地，AudioMediaStreamTrack 的使用方式和从getUserMedia()中得到MediaStream相似。这个接口是AudioNode类型的音频目的地。
  • AnalyserNode — AnalyserNode 表示一个可以提供实时频率分析与时域分析的切点，这些分析数据可以用做数据分析和可视化。如果你想从音频里提取时间、频率或者其他数据，你需要 AnalyserNode
  • ChannelSplitterNode — ChannelSplitterNode 可以把输入流的每个声道输出到一个独立的输出流（通道分离）。
  • ChannelMergerNode — ChannelMergerNode 用于把一组输入流合成到一个输出流。输出流的每一个声道对应一个输入流（通道合并）。
  • AudioListener — 代表场景中正在听声音的人的位置和朝向。
  • PannerNode — PannerNode 用于表示场景是声音的空间行为。它是AudioNode类型的音频处理模块，这个节点用于表示右手笛卡尔坐标系里声源的位置信息，运动信息（通过一个速度向量表示），方向信息（通过一个方向圆锥表示）。
  • ScriptProcessorNode — ScriptProcessorNode 接口用于通过 JavaScript 代码生成，处理，分析音频。它是一个AudioNode类型的音频处理模块，但是它与两个缓冲区相连接，一个缓冲区里包含当前的输入数据，另一个缓冲区里包含着输出数据。每当新的音频数据被放入输入缓冲区，就会产生一个AudioProcessingEvent 事件，当这个事件处理结束时，输出缓冲区里应该写好了新数据。
  • audioprocess事件 — 当一个 Web Audio API ScriptProcessorNode已经准备好进行处理时，这个事件回调会被调用。
  • AudioProcessingEvent 事件 — 当ScriptProcessorNode的输入流数据准备好了时，AudioProcessingEvent事件会产生。
  • OfflineAudioContext — OfflineAudioContext 离线音频上下文也是音频上下文AudioContext，也表示把AudioNode连接到一起的一个音频处理图。但是，与一个标准的音频上下文相比，离线上下文不能把音频渲染到扬声器，仅仅是把音频渲染到一个缓冲区。
  • complete — Complete 事件，当离线音频上下文被终止时产生。
  • OfflineAudioCompletionEvent 事件 — OfflineAudioCompletionEvent表示上下文被终止时的事件。

示例

音频可视化:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>可视化</title><style>#canvas,#canvas2 {border: 1px solid #000;}</style>
</head>
<h1>声音可视化</h1>
<div><audio controls autoplay loop crossorigin="anonymous"><source src="./2789078374.mp3" type="audio/mpeg">Your browser does not support the audio element.</audio><h2>可视化图形</h2><canvas id="canvas"></canvas><canvas id="canvas2"></canvas><button id="btn">生成</button>
</div><body><script>const canvasDom = document.getElementById("canvas");const canvasW = 1000const canvasH = 256canvasDom.width = canvasW;canvasDom.height = canvasH;const canvasCtx = canvasDom.getContext("2d");const canvasDom2 = document.getElementById("canvas2");canvasDom2.width = canvasW;canvasDom2.height = canvasH;const canvasCtx2 = canvasDom2.getContext("2d");const btn = document.getElementById("btn");let audioCtx = nulllet analyserlet sourcebtn.addEventListener("click", () => {if (audioCtx == null) {audioCtx = new (window.AudioContext || window.webkitAudioContext)()//  创建 AnalyserNode节点 analyser = audioCtx.createAnalyser()const distortion = audioCtx.createWaveShaper()//  连接声源 source = audioCtx.createMediaElementSource(document.querySelector('audio'))source.connect(analyser)analyser.connect(audioCtx.destination);}analyser.fftSize = 2048let bufferLength = analyser.frequencyBinCountconst dataArray = new Uint8Array(bufferLength)analyser.getByteTimeDomainData(dataArray)//要捕获数据，你需要使用 AnalyserNode.getFloatFrequencyData() 或 AnalyserNode.getByteFrequencyData() 方法来获取频率数据，// 用 AnalyserNode.getByteTimeDomainData() 或 AnalyserNode.getFloatTimeDomainData() (en-US) 来获取波形数据。let drawVisual;canvasCtx.clearRect(0, 0, canvasW, canvasH);//  波形图function draw() {analyser.getByteTimeDomainData(dataArray)canvasCtx.fillStyle = "rgb(200, 200, 200)";canvasCtx.fillRect(0, 0, canvasW, canvasH);var sliceWidth = (canvasW * 1.0) / bufferLength;canvasCtx.lineWidth = 2;canvasCtx.strokeStyle = "rgb(0, 0, 0)";canvasCtx.beginPath();canvasCtx.moveTo(0, canvasH / 2);canvasCtx.lineTo(canvasW, canvasH / 2);canvasCtx.stroke()canvasCtx.beginPath();let x = 0for (let i = 0; i < bufferLength; i++) {let v = dataArray[i] / 128.0;let y = (v * canvasH) / 2;if (i === 0) {canvasCtx.moveTo(x, y);} else {canvasCtx.lineTo(x, y);}x += sliceWidth;canvasCtx.stroke();}drawVisual = requestAnimationFrame(draw);}draw()//  柱形图function drawBar() {analyser.getByteTimeDomainData(dataArray)canvasCtx2.fillStyle = "rgb(0,0,0)";canvasCtx2.fillRect(0, 0, canvasW, canvasH);let barWidth = canvasW / bufferLength * 2.5;let x = 0for (let i = 0; i < bufferLength; i++) {let barHeight = dataArray[i] / 128.0 / 2 * canvasH;canvasCtx2.fillStyle = 'rgb(' + (barHeight + 100) + ',50,50)';canvasCtx2.fillRect(x, canvasH - barHeight, barWidth, barHeight);x += barWidth + 1;}requestAnimationFrame(drawBar);}drawBar()})</script>
</body></html>

使用 file://打开的话会报cors,使用http服务打开。

在这里插入图片描述
在这里插入图片描述

结语

结束了。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/762960.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Obsidian插件PicGo-图床创建使用[腾讯云保姆级教程]

Obsidian插件PicGo-图床创建使用[腾讯云保姆级教程]

一、下载PicGo并配置 1&#xff1a;安装插件 首先插件市场搜索picgo会出现Image auto upload&#xff0c;这个就是PicGo安装此插件并启用即可 2&#xff1a;安装PicGo软件 打开此链接&#xff1a;https://github.com/Molunerfinn/PicGo 自己选择一个方式下载&#xff0c;我…
阅读更多...
数字乡村发展策略：科技引领农村实现跨越式发展

数字乡村发展策略：科技引领农村实现跨越式发展

随着信息技术的迅猛发展和数字经济的崛起&#xff0c;数字乡村发展策略已经成为引领农村实现跨越式发展的重要手段。科技的力量正在深刻改变着传统农业的生产方式、农村的社会结构以及农民的生活方式&#xff0c;为农村经济发展注入了新的活力和动力。本文将从数字乡村的内涵、…
阅读更多...
第十四届蓝桥杯JavaB组省赛真题 - 幸运数字

第十四届蓝桥杯JavaB组省赛真题 - 幸运数字

进制转换可以参考如下的十进制&#xff0c;基本一样的&#xff0c;只是把10变成了其他数字&#xff0c; sum就是各个数位之和 public static int myUtil(int n) {int sum 0;while(n > 0) {sum n % 10;n / 10;}return sum;} 注意&#xff1a; 如果写在同一个类里面&…
阅读更多...
苍穹外卖-day15：套餐管理

苍穹外卖-day15：套餐管理

套餐管理 课程内容 套餐分页查询启售停售套餐删除套餐新增套餐 1. 套餐分页查询 1.1 需求分析和接口设计 根据产品原型来了解需求&#xff0c;套餐分页查询的产品原型如下&#xff1a; 业务规则&#xff1a; 根据页码展示套餐信息(套餐名称、套餐图片、套餐分类、价格、售…
阅读更多...
4.1.1 SN74HC05N型反相器（OD门）

4.1.1 SN74HC05N型反相器（OD门）

1、OD门介绍 为提高逻辑门驱动负载的能力，输出端漏极开路的OD门被广泛使用。使用时，OD门需外接一只电阻上拉到电源正极。相同型号的OD门可以进行多只并联，实现“线与”的逻辑功能。 常用的OD门芯片有74HC05N、I2C设备等。 2、SN74HC05N型反相器（OD门） 2.1 引脚分布和功…
阅读更多...
Java中的并发并行与生命周期

Java中的并发并行与生命周期

并发并行与生命周期 并发、并行什么是进程并发的含义并行的理解多线程是如何在执行 线程的生命周期Java线程的状态线程的6中状态互相转换 并发、并行 什么是进程 正在运行的程序&#xff08;软件&#xff09;就是一个独立的进程线程是属于进程的&#xff0c;一个进程中可以同…
阅读更多...
全网最全的Postman接口自动化测试（史实级攻略）

全网最全的Postman接口自动化测试（史实级攻略）

软件测试面试刷题&#xff0c;这个小程序&#xff08;永久刷题&#xff09;&#xff0c;靠它快速找到工作了&#xff01;&#xff08;刷题APP的天花板&#xff09;【持续更新最新版】-CSDN博客 背景 该篇文章针对已经掌握 Postman 基本用法的读者&#xff0c;即对接口相关概念…
阅读更多...
2024年Jira全面解析：从 Jira 的概念到优缺点、最新政策

2024年Jira全面解析：从 Jira 的概念到优缺点、最新政策

Jira是澳大利亚的Atlassian公司开发的一款项目管理软件&#xff0c;名字来源于日文中“哥斯拉”的称呼“Gojira”。Jira不仅可以追踪缺陷和问题&#xff0c;还能管理项目。很多企业还将JIRA用于一些特殊的场景&#xff0c;比如作为仓库自动化工具、管理文档流程、优化费用等等。…
阅读更多...
四川易点慧电子商务抖音小店：安全可靠，购物新选择

四川易点慧电子商务抖音小店：安全可靠，购物新选择

在数字化浪潮席卷全球的今天&#xff0c;电子商务已成为人们生活中不可或缺的一部分。四川易点慧电子商务抖音小店作为新兴的电商平台&#xff0c;以其安全可靠、便捷高效的特点&#xff0c;逐渐赢得了广大消费者的青睐。今天&#xff0c;就让我们一起走进四川易点慧电子商务抖…
阅读更多...
Python Windows系统 虚拟环境使用

Python Windows系统 虚拟环境使用

目录 1、安装 2、激活 3、停止 1、安装 1&#xff09;为项目新建一个目录&#xff08;比如&#xff1a;目录命名为learning_log&#xff09; 2&#xff09;在终端中切换到这个目录 3&#xff09;执行命令&#xff1a;python -m venv ll_env&#xff0c;即可创建一个名为ll…
阅读更多...
抖音开放平台的订单类API接口调用测试指南（内含详细步骤）

抖音开放平台的订单类API接口调用测试指南（内含详细步骤）

一、什么是抖音开放平台 抖音开放平台基于抖音母体&#xff0c;提供抖音服务基础设施和创新行业解决方案的平台。同时满足各类各类机构、创作者及服务商对于内容获取、分享的个性化需求&#xff0c;我们诚邀各个行业、不同阶段的合作伙伴与我们一起&#xff0c;共建内容良性生…
阅读更多...
【数据结构】布隆过滤器

【数据结构】布隆过滤器

SueWakeup 个人主页&#xff1a;SueWakeup 系列专栏&#xff1a;学习技术栈 个性签名&#xff1a;保留赤子之心也许是种幸运吧 本文封面由 凯楠&#x1f4f8; 友情提供 目录 本栏传送门 前言 1. 什么是布隆过滤器&#xff1f; 2. 布隆过滤器的原理 2.2 判断元素存在原理…
阅读更多...
用虚拟机安装FydeOS，体验国内版ChromeOS首选！

用虚拟机安装FydeOS，体验国内版ChromeOS首选！

前言 前段时间小白写了在实体机上安装FydeOS系统&#xff0c;发现有很多小伙伴在后台获取了FydeOS的镜像。 国内版ChromeOS&#xff1f;让旧机器焕发第二春的FydeOS安装教程 也有一些小伙伴看到是安装在实体机上的教程&#xff0c;所以就直接放弃了。其实FydeOS也可以用VM…
阅读更多...
面试笔记——MySQL（事务：事务特性、并发事务、事务隔离、Redo Log与Undo Log、MVCC）

面试笔记——MySQL（事务：事务特性、并发事务、事务隔离、Redo Log与Undo Log、MVCC）

事务 概念与特性 事务&#xff08;Transaction&#xff09;指的是一组数据库操作&#xff0c;这些操作要么全部成功执行&#xff0c;要么全部不执行&#xff0c;保证了数据库的一致性和完整性&#xff0c;它使得数据库操作可以按照逻辑上的单元进行组织和执行&#xff0c;提高…
阅读更多...
中等职业学校大数据课程建设方案

中等职业学校大数据课程建设方案

大数据产业是以数据及数据所蕴含的信息价值为核心生产要素&#xff0c;通过数据技术、数据产品、数据服务等形式&#xff0c;使数据与信息价值在各行业经济活动中得到充分释放的赋能型产业。 大数据产业定义一般分为核心业态、关联业态、衍生业态三大业态。 一、专…
阅读更多...
Nginx实现原理全解析：构建高效Web服务器的关键

Nginx实现原理全解析：构建高效Web服务器的关键

1、Nginx是什么 Nginx&#xff08;engine X&#xff09;是一个开源的轻量级的HTTP服务器&#xff0c;能够提供高性能的HTTP和反向代理服务。与传统的Apache服务器相比&#xff0c;在性能上Nginx占用系统资源更小、支持高并发&#xff0c;访问效率更高&#xff1b;在功能上&…
阅读更多...
Doris实战——工商信息查询平台的湖仓一体建设

Doris实战——工商信息查询平台的湖仓一体建设

目录 前言 一、架构1.0&#xff1a;传统Lambda架构 二、OLAP引擎调研 三、架构2.0&#xff1a;数据服务层All in Apache Doris 四、架构 3.0&#xff1a;基于Doris Multi-Catalog的湖仓一体架构 五、实践经验 5.1 引入Merge-on-Write&#xff0c;百亿级单表查询提速近三…
阅读更多...
谷歌DeepMind推出3D游戏AI代理SIMA，实现自然语言操控游戏新纪元

谷歌DeepMind推出3D游戏AI代理SIMA，实现自然语言操控游戏新纪元

近日&#xff0c;谷歌DeepMind研究团队推出了一款名为SIMA的创新AI代理&#xff0c;专为3D游戏环境设计。这款代理独树一帜&#xff0c;无需访问游戏源代码或依赖定制API&#xff0c;仅通过输入图像和简单的自然语言文本指令&#xff0c;便能实现与人类玩家相当的游戏操作。 AI…
阅读更多...
LangChain教程 | langchain 文件加载器使用教程 | Document Loaders全集

LangChain教程 | langchain 文件加载器使用教程 | Document Loaders全集

提示&#xff1a; 想要了解更多有关内置文档加载器与第三方工具集成的文档&#xff0c;甚至包括了&#xff1a;哔哩哔哩网站加载器、区块链加载器、汇编音频文本、Datadog日志加载器等。 本文主要收集与讲解日常使用的加载器&#xff0c;足够咱们平时开发人工智能的工作使用&am…
阅读更多...
【前端性能】前端性能指标和测量方法总结

【前端性能】前端性能指标和测量方法总结

文章目录 前端性能指标和测量方法总结重要指标名词概念指标测量方法performance APIChrome PerformanceChrome Lighthouseweb-vitals 前端性能指标和测量方法总结 重要指标名词概念 图源 https://dev.to/xnimorz/hitchhiker-s-guide-to-frontend-performance-optimization-460…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023