`THREE.AudioAnalyser` 音频分析

这篇具有很好参考价值的文章主要介绍了`THREE.AudioAnalyser` 音频分析。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

demo案例
`THREE.AudioAnalyser` 音频分析,音视频

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>

本内容来源于小豆包,想要更多内容请跳转小豆包 》文章来源地址https://www.toymoban.com/news/detail-861427.html

到了这里,关于`THREE.AudioAnalyser` 音频分析的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 音视频开发:音频编码原理+采集+编码实战

    消除冗余信息,压缩量最大,也叫有损压缩 剔除人耳听觉范围外的音频信号20Hz以下和20000Hz以上; 去除被掩蔽的音频信号,信号的遮蔽可以分为频域遮蔽和时域遮蔽; 频域遮蔽效应 屏蔽70分贝以下,20HZ以下,20000HZ以上 屏蔽分贝小,频率小的声音 两个频率相近发出的声音,

    2024年02月05日
    浏览(22)
  • 【音视频 | AAC】AAC格式音频文件解析

    😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C++、数据结构、音视频🍭 🤣本文内容🤣:🍭介绍AAC格式音频文件解析🍭 😎金句分享😎:🍭你不能选择最好的,但最好的会来选择你——泰戈尔🍭 本文未经允许,不得转发!!

    2024年02月04日
    浏览(21)
  • 音视频八股文(11)-- ffmpeg 音频重采样

    所谓的重采样,就是改变⾳频的采样率、sample format、声道数等参数,使之按照我们期望的参数输出。 为什么要重采样?当然是原有的⾳频参数不满⾜我们的需求,⽐如在FFmpeg解码⾳频的时候,不同的⾳源有不同的格式,采样率等,在解码后的数据中的这些参数也会不⼀致(最

    2024年02月04日
    浏览(31)
  • 音视频剪辑|FFMPEG|windows10下的音视频格式转换,遮挡填充,GIF动图制作,背景音频抽取,替换

    最近对于音视频和图像的处理问题比较感兴趣,但发现很多目前需要的功能要么需要付费但不会过于麻烦,要么比较麻烦,很可能某个功能实现需要安装很多软件 例如,视频转GIF动图,该功能的实现要么使用Photoshop全家桶,要么找在线网站,或者是wps充会员,或者找其它方法

    2024年02月20日
    浏览(17)
  • qt+ffmpeg 实现音视频播放(二)之音频播放

    通过  avformat_open_input () 打开媒体文件并分配和初始化  AVFormatContext   结构体。 函数原型如下: int avformat_open_input(AVFormatContext **ps, const char *url, AVInputFormat *fmt, AVDictionary **options); 参数说明: - `ps`:指向 `AVFormatContext` 结构体指针的指针,用于存储打开的媒体文件的信息。

    2024年04月22日
    浏览(13)
  • 音视频开发系列(10):基于qt的音频推流

    今天分享一下利用qt录制音频,然后再利用ffmpeg推流到nginx服务器,最后再利用vlc进行拉流的demo。 首先介绍一下如何利用qt来进行音频的录制,qt的音频录制主要利用qt的QAudioFormat先进行音频信息的配置。主要需要配置以下的信息: 然后使用QAudioDeviceInfo来获取是否支持改设置

    2024年02月02日
    浏览(17)
  • Android音视频处理技术:音频混音与播放

    作者:禅与计算机程序设计艺术 在现代生活中,我们都会听到各种各样的声音。但是有的声音会相互抵消影响我们的正常生活,而有的声音则会增加我们的情绪快乐。人类为了能够真正体验到声音带来的快感,需要将不同类型的声音合并,再将它们再传达给大脑。音频混音与

    2024年02月08日
    浏览(18)
  • Qt 多媒体音频模拟按钮发音(音视频启动)

    ## 项目演示 平台 :windows或者ubuntu  要求 :平台需要支持音频播放功能 文件格式 :.wav 可以使用剪映生成,音频部分,我这里是简短的音乐 # Qt 多媒体简介 Qt QSound是Qt框架中的一个类,用于播放音频文件。它可以在Qt应用程序中实现简单的音频播放功能,包括播放、暂停和停

    2024年02月03日
    浏览(21)
  • 【音视频处理】音频编码AAC详解,低码率提高音质?

    大家好,欢迎来到停止重构的频道。 本期我们介绍 音频编码格式AAC 。 AAC是音频最常用的编码格式之一 ,几乎所有的播放器都支持这个编码格式。 其他音频编码格式都是类似的,只是某些细节存在差别,如压缩算法、某些音频参数存在限制等。 我们按这样的顺序讨论 :

    2024年02月09日
    浏览(21)
  • 安卓音视频开发(3)—— AudioTrack两种方式播放pcm音频

    前言 之前学习了AudioRecord录制pcm音频,与之对应的就是AudioTrack播放pcm音频(MediaPlayer、SoundPool有其他应用场景),它有两种数据加载模式(MODE_STATIC、MODE_STREAM)。 模式 MODE_STATIC :这种模式下,一次将所有的数据放入一个固定的buffer,然后写入到AudioTrack中,后续就不用继续

    2023年04月22日
    浏览(19)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包