`THREE.AudioAnalyser` 音频分析

demo案例
在这里插入图片描述

THREE.AudioAnalyser 音频分析

入参 (Input Parameters):

  • audio: 一个 THREE.Audio 实例,代表要分析的音频。
  • fftSize: 快速傅里叶变换(FFT)的大小,用于确定分析的精度和频率分辨率。
  • smoothingTimeConstant: 平滑时间常数,用于控制分析结果的平滑程度。

出参 (Output):

THREE.AudioAnalyser 可能不直接返回出参,而是提供方法来获取分析结果,如频谱数据或波形数据。

方法 (Methods):

  • getFrequencyData(array): 将当前音频的频谱数据填充到提供的数组中。
  • getByteFrequencyData(array): 将当前音频的频谱数据(以字节形式)填充到提供的数组中。
  • getByteTimeDomainData(array): 将当前音频的波形数据(以字节形式)填充到提供的数组中。
  • start(): 开始音频分析。
  • stop(): 停止音频分析。

属性 (Properties):

  • analyser: 内部的 AnalyserNode 实例,用于执行音频分析。
  • frequencyBinCount: FFT 的大小,即频率仓的数量。
  • smoothingTimeConstant: 平滑时间常数的当前值。

demo 案例

<!DOCTYPE html>
<html lang="en">
<head><title>three.js webaudio - visualizer</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><link type="text/css" rel="stylesheet" href="main.css"><!-- 顶点着色器 --><script id="vertexShader" type="x-shader/x-vertex">varying vec2 vUv;void main() {vUv = uv;gl_Position = vec4(position, 1.0);}</script><!-- 片段着色器 --><script id="fragmentShader" type="x-shader/x-fragment">uniform sampler2D tAudioData;varying vec2 vUv;void main() {vec3 backgroundColor = vec3(0.125, 0.125, 0.125);vec3 color = vec3(1.0, 1.0, 0.0);float f = texture2D(tAudioData, vec2(vUv.x, 0.0)).r;float i = step(vUv.y, f) * step(f - 0.0125, vUv.y);gl_FragColor = vec4(mix(backgroundColor, color, i), 1.0);}</script></head>
<body>
<div id="overlay"><button id="startButton">Play</button>
</div>
<div id="container"></div>
<div id="info"><a href="https://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> webaudio - visualizer<br/>music by <a href="http://www.newgrounds.com/audio/listen/376737" target="_blank" rel="noopener">skullbeatz</a>
</div><script type="importmap">{"imports": {"three": "../build/three.module.js","three/addons/": "./jsm/"}}
</script><script type="module">// 导入所需的模块import * as THREE from 'three';// 定义全局变量let scene, camera, renderer, analyser, uniforms;// 获取开始按钮并添加点击事件监听器const startButton = document.getElementById('startButton');startButton.addEventListener('click', init);// 初始化函数function init() {const fftSize = 128; // FFT 大小// 移除遮罩const overlay = document.getElementById('overlay');overlay.remove();// 获取容器元素const container = document.getElementById('container');// 创建渲染器renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth, window.innerHeight);container.appendChild(renderer.domElement);// 创建场景和相机scene = new THREE.Scene();camera = new THREE.Camera();// 创建音频分析器const listener = new THREE.AudioListener();const audio = new THREE.Audio(listener);const file = './sounds/376737_Skullbeatz___Bad_Cat_Maste.mp3';// 检查是否在 iOS 设备上运行if (/iPad|iPhone|iPod/g.test(navigator.userAgent)) {const loader = new THREE.AudioLoader();loader.load(file, function (buffer) {audio.setBuffer(buffer);audio.play();});} else {const mediaElement = new Audio(file);mediaElement.play();audio.setMediaElementSource(mediaElement);}// 创建音频分析器并设置数据纹理analyser = new THREE.AudioAnalyser(audio, fftSize);const format = (renderer.capabilities.isWebGL2) ? THREE.RedFormat : THREE.LuminanceFormat;uniforms = {tAudioData: { value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) }};// 创建材质const material = new THREE.ShaderMaterial({uniforms: uniforms,vertexShader: document.getElementById('vertexShader').textContent,fragmentShader: document.getElementById('fragmentShader').textContent});// 创建几何体和网格const geometry = new THREE.PlaneGeometry(1, 1);const mesh = new THREE.Mesh(geometry, material);scene.add(mesh);// 监听窗口大小变化window.addEventListener('resize', onWindowResize);// 开始动画循环animate();}// 窗口大小变化时更新渲染器尺寸function onWindowResize() {renderer.setSize(window.innerWidth, window.innerHeight);}// 动画循环function animate() {requestAnimationFrame(animate);render();}// 渲染函数function render() {// 更新频谱数据analyser.getFrequencyData();uniforms.tAudioData.value.needsUpdate = true;renderer.render(scene, camera);}
</script></body>
</html>

本内容来源于小豆包,想要更多内容请跳转小豆包 》

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

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

相关文章

CSDN文章无法修改和发布问题解决方法一例

CSDN文章无法修改和发布问题解决方法一例 在多次点击保存准备发布文章时&#xff0c;提示网络错误&#xff0c;请求超时 我的解决办法是&#xff1a;更换网络&#xff0c; 如果你是连着网线&#xff0c;就换成 WIFI或使用自己的手机热点连接。 如果你是连着 WIFI&#xff0c;…

BAPI_BATCH_CHANGE:修改批次的特征值

文章目录 BAPI_BATCH_CHANGE&#xff1a;修改批次的特征值实现步骤定义变量获取对象/类等 获取已维护特性值新特性值更新 注意事项常见的错误&#xff1a;Object xxx does not exist 最终效果字段介绍正式测试-310测试环境&#xff08;HS&#xff09;特性值数据内表介绍运行效果…

【MySql】MySQL查询中的笛卡尔积现象解析

还有多少个十年 能勇敢做热血青年 还有多少个十年 能坚持当初的信念 还有多少个十年 能不忘怀回忆点点 &#x1f3b5; 《还有多少个十年》 在使用MySQL或任何关系型数据库进行多表查询时&#xff0c;如果连接条件设置不当&#xff0c;就可能发生所谓的笛卡…

radware负载均衡简介及应用场景

Radware负载均衡是一种高效的网络性能优化技术&#xff0c;广泛应用于确保服务的高可用性和可靠性。以下是关于Radware负载均衡的简介及其应用场景的详细介绍&#xff1a; 简介&#xff1a; Radware的AppDirector&#xff08;AD&#xff09;是公司提供的负载均衡解决方案&…

关于加强电力系统通信与电网调度自动化建设问题的规定

关于加强电力系统通信与电网调度自动化建设问题的规定 为了保障电力系统安全、经济、优质、可靠运行&#xff0c;必须加强电网调度管理和提高技术装备水平。根据当前电网技术装备状况&#xff0c;结合电力系统通信和电网调度自动化的特点&#xff0c;以及今后规划发展的要求&am…

【每日力扣】41. 缺失的第一个正数 238. 除自身以外数组的乘积 189. 轮转数组

&#x1f525; 个人主页: 黑洞晓威 &#x1f600;你不必等到非常厉害&#xff0c;才敢开始&#xff0c;你需要开始&#xff0c;才会变的非常厉害 41. 缺失的第一个正数 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为…

Linux 操作系统的引导过程

Linux系统开机引导过程&#xff1a; 开机自检 检测硬件设备&#xff0c;找到能够引导系统的设备&#xff0c;比如硬盘MBR引导 运行MBR扇区里的主引导程序GRUB启动GRUB菜单 系统读取GRUB配置文件(/boot/grub2/grub.cfg)获取内核的设置和…

API 开发的后盾:平台工程提供强力动态支持

过去几年&#xff0c;开发团队一直在发展传统的 DevOps。一些开发人员认为&#xff0c;CloudOps 或 DeploymentOps 等新实践的兴起将会导致回到孤岛问题。其他人则不愿意在承担所有其他职责之外构建、部署、运行和维护运维。显然&#xff0c;确实需要新的云原生开发策略&#x…

YesPMP众包平台最新项目

YesPMP一站式互联网众包平台&#xff0c;最新外包项目&#xff0c;有感兴趣的用户可进入平台参与竞标。 &#xff08;竞标后由项目方直接与服务商联系&#xff0c;双方直接对接&#xff09; 1.查看项目&#xff1a;个人技术-YesPMP平台 2.查看项目&#xff1…

用Python编写一个简单的数字累加器 数字累加器

目录 一.总体说明 二.完整代码 三.逐行分析 一.总体说明 数字累加器是一种用于对数字进行持续累加的设备或算法。它可以在每次输入一个数字时将其与之前的累加结果相加,并更新累加结果。数字累加器通常用于计算总和、平均值或其他需要对连续数字进行累加的应用场景。 在计…

Android apk打包有so,运行没有so

Android apk打包有so&#xff0c;运行没有so 当minSdkVersion版本从19变成26时&#xff0c;编译打包后&#xff0c;安装到设备里发现 /data/data//lib 目录下没有so库&#xff0c;在AndroidManifest文件application标签下增加android:extractNativeLibs"true"后&…

命名空间:namespace

对于无名命名空间 &#xff1a;但是不能再次定义相同名称的变量 在同一文件中

CUDA 下 DGL 库安装

https://www.dgl.ai/pages/start.html pip install dgl -f https://data.dgl.ai/wheels/cu121/repo.html成功o(&#xffe3;▽&#xffe3;)ブ ⭐⭐

jvm知识点总结(一)

JVM的跨平台 java程序一次编写到处运行。java文件编译生成字节码&#xff0c;jvm将字节码翻译成不同平台的机器码。 JVM的语言无关性 JVM只是识别字节码&#xff0c;和语言是解耦的&#xff0c;很多语言只要编译成字节码&#xff0c;符合规范&#xff0c;就能在JVM里运行&am…

上海·得物技术沙龙-「无线技术」专场报名开启!

本次无线沙龙聚焦于最新的技术趋势和实践&#xff0c;将在上海/线上为你带来四个令人期待的演讲话题&#xff0c;包括&#xff1a;《快手主App启动接口带宽优化实践》、《得物App视频体验优化实践》、《Chromium内核架构和网络库优化介绍》、《得物App发热监控实践》。相信这些…

深入理解Linux文件系统和日志分析

目录 一.inode与block 1.inode与block概述 1.1.文件数据包括元信息与实际数据 1.2.文件存储在硬盘上&#xff0c;硬盘最小存储单位是“扇区”&#xff0c;每个扇区存储512字节 1.3.block&#xff08;块&#xff09; 1.4.inode&#xff08;索引节点&#xff09; 2.inode内…

springboot论文格式系统

采用springbootmysqlhtmlvue技术 详细运行视频地址B站运行效果视频地址 &#xff08;1&#xff09;系统具备用户管理功能&#xff0c;包括用户注册、登录、权限管理等功能。 &#xff08;2&#xff09;系统具备格式规范管理功能&#xff0c;包括格式规范创建、编辑、删除等操…

【Day 8】MySQL 多表查询 + Mybatis 基础

1 多表查询 笛卡尔积&#xff1a;在数学中&#xff0c;两个集合(A集合 和 B集合)的所有组合情况 在多表查询时&#xff0c;需要消除无效的笛卡尔积 select * from tb_emp,tb_dept where dept_id tb_dept.id;多表查询分为&#xff1a; 连接查询 内连接&#xff1a;相当于查…

FTP与SMB深度对比:文件传输协议谁更胜一筹?

在数字化时代&#xff0c;文件传输已成为日常工作中不可或缺的一部分。 FTP&#xff08;文件传输协议&#xff09;和SMB&#xff08;服务器消息块&#xff09;是两种最为常见的文件传输协议。它们各自在文件传输领域拥有独特的优势和特点&#xff0c;但同时也存在一些差异。 今…

学会MySQL(2)——间隙锁加锁算法分析

间隙锁加锁算法分析 引言 在进行死锁分析时&#xff0c;如果看 MySQL 的死锁日志云里雾里&#xff0c;那可能是我们对 MySQL 的加锁规则不甚了解&#xff0c;从而感觉分析无从下手。只能看代码&#xff0c;改 SQl 碰运气。有一句话说的好&#xff1a;我也不知道为什么这么改就…