HTML5_Audio_Visualizer：使用HTML5AudioAPI构建的音频频谱可视化器

共7个文件

html：2个

png：1个

txt：1个

audio

visualizer

需积分: 38 154 浏览量 2021-02-23 03:18:00 上传评论收藏 33KB ZIP 举报

资源推荐

资源详情

资源评论

AudioVisualizeView::musical_note::musical_note::musical_note: 许多音乐App上常见的音频可视化效果，读取音频数据并利用傅里叶转换成可视化的字节数据，再通过自定义View渲染而成。An audio visualization effect like many music app, read audio data and use Fourier transform to visual byte data, and then through cust

AudioVisualizeView 许多音乐App上常见的音频可视化效果，读取音频数据并利用傅里叶转换成可视化的字节数据，再通过自定义View渲染而成. 组件源码目录：https://github.com/GitHubZJY/AudioVisualizeView/tree/master/audiovisualize demo目录：https://github.com/GitHubZJY/Audi

rpi_audio_visualizer：实时可视化音频流的频谱

RPi音频可视化器实时可视化音频流的频谱。硬件（仅使用麦克风）软件标头和建立和运行运行cmake . 从项目的根源开始。将目录更改为bin/并运行make visualizer 。使用sudo运行build/visualizer 。命令行选项： Allowed options: --help produce

audiovisualizer:使用 Web Audio API 和 HTML5 画布的音频可视化页面

音频可视化器音频可视化器使用 Web Audio API 播放拖放的音频文件。可视化绘制到 HTML5 画布元素。使用 RequireJS 进行模块加载。 Vesa Uimonen 和 Lari Marsalo 的大学课程作业。 Antti Sartjärvi 的示例音频 ( )。兼容性浏览器：Chrome 10+，Safari 6 音频格式（已测试）：MP3、Ogg Vorbis

HTML5-Visualizer:为 OpenSprites 构建的基本 HTML5 音频可视化工具

HTML5 可视化工具尝试使用我自己的 HTML5 可视化工具。用为。直播

ring-visualizer:环形音频可视化器，它使用和演示Web Audio API的分析器节点的易用性来生成其视觉效果

环形可视化器环形音频可视化器，它使用和演示Web Audio API的分析器节点的易用性来生成其视觉效果。在另一个项目中，我需要某种视觉反馈来在网站上进行音频播放，因此我创建了一个小型音频循环，启动了浏览器默认播放器，并开始使用摆弄。当我发现快速查找并快速运行某些东西非常方便时，我想将其作为演示放到这里。用法很简单，也可以在实际中看到它：下载，解压缩并在Chrome中打开（其他基

WebAudioPlayer:使用 Web Audio API、Bootstrap 和 Backbone.js 的音频可视化应用

#Web 音频播放器一个 Backbone 应用程序，用于在浏览器中加载和播放带有 FFT 可视化的排队音频。使用 Google Chrome 39 开发和测试。

audiovisual:使用React和Web Audio API构建的音频可视化器

视听使用React构建的音频可视化器。 CLI用法全局安装： npm install -g audiovisual 启动服务器： audiovisual [flags] [directory] 您可以指定包含要播放的歌曲的目录。首次提供文件夹时（以及每次您要重新扫描更新的歌曲时），都需要使用-s标志。这将在包含所有匹配文件列表的文件夹根目录中创建一个名为.audiovisual.

3D_Audio_Spectrum_VIsualizer:使用three.js构建的3d音频频谱viauslizer

3D音频频谱可视化器使用three.js构建的3d音频频谱viauslizer 。屏幕截图

spectro：for Web的实时音频频谱图生成器

它可以可视化麦克风上的声音或设备上的音频文件。 :laptop_computer: 用法前往开始使用Spectro。要开始生成频谱图，您可以：点击 :microphone: 从“麦克风”按钮录音，即可开始通过麦克风生成频谱图。如果...

Realtime_PyAudio_FFT:使用PyAudio和Numpy在Python中进行实时音频分析，以从流音频中提取和可视化FFT功能

一个简单的程序包，可使用PyAudio和Numpy在本地Python中进行实时音频分析，以从实时音频流中提取和可视化FFT功能。基本管道：启动一个stream_reader，使用PyAudio（声卡，麦克风等）从任何来源提取实时音频数据每...

Sean-Dorff-s-Audio-Visualizer:此Visual Studio解决方案可接入Windows音频输出并将其可视化为频谱

肖恩·多夫（Sean Dorff）的音频可视化器此Visual Studio解决方案可利用Windows音频输出，并将其可视化为频谱。控制项使用WSAD和Space / Shift上下移动。鼠标控制您的观看方向。使用F开启或关闭全屏模式。按...

web-audio-mixer:使用Web Audio API构建的音频混音器

网络音频API混音器尝试混合大卫·鲍伊（David Bowie）的《太空怪诞》。使用构建的音频混音器，具有3频段参数均衡。可在以下位置找到与Web Audio API相关的代码： : 要首先在本地运行混合器，请确保已安装Node。将仓库和CD复制到目录运行npm i 运行npm start 造访http://localhost:3000 该项目仅在Chrome和Firef

Web-GL-Audio-Visualizer:使用Web Audio API的Web GL音频可视化程序。用Three.js构建

Web GL（3D）音频可视化查看behance上的项目以了解更多信息： ://www.behance.net/gallery/49261519/Web-GL-3D-Audio-Visualizer-（免费下载进行实际检查： : 该项目是使用three.js创建的。

AmoebaAudio:使用 Canvas 和 Web Audio API 的 Javascript 音频可视化工具

变形虫音频使用 Canvas 和 Web Audio API 的 Javascript 音频可视化工具点击播放或暂停。目前支持拖放链接。用法 var player = new AmoebaAudio({ parent : document.getElementById("container") }); player.load(url); // Must be called first

webaudio_webgl_test:音频可视化工具，使用Web Audio API和WebGL（带有three.js）

webaudio_webgl_test 音频可视化工具，使用Web Audio API和WebGL（带有three.js）。目前仅在Google Chrome中完全受支持。在这里查看操作： :

violent-theremin:Violent Theremin使用Web Audio API生成声音，并使用HTML5 canvas进行漂亮的可视化。生成的颜色取决于当前音符的音高和增益，而它们本身取决于鼠标指针的位置

暴力的 Violent Theremin使用Web Audio API生成声音，并使用HTML5 canvas进行漂亮的可视化。生成的颜色取决于当前音符的音高和增益，而它们本身又取决于鼠标指针的位置。您可以此处现场。

glava：GLava-OpenGL音频频谱可视化器

GLava是用于X11的通用，高度可配置的OpenGL音频频谱可视化器。左侧显示的是radial着色器模块，有关更广泛的演示，。开发很活跃，报告问题也得到了解决。编译： $ git clone ...

vizy:可配置的音频可视化器

:sparkles: 维兹 :sparkles: ... 使用指示的键（q、e、w、s、a、d）或左上角的滑块来控制可视化器的速度、长度和频率响应。注意：某些音频文件不能在整个频谱范围内正确采样。如果文件开始播放并且没有视觉效果

32频段音频频谱可视化分析仪

该项目用于使用Arduino制作32频段音频（音乐）频谱分析仪/可视化仪。

audioMotion.js:使用Web Audio和Canvas API的高分辨率实时频谱分析仪和音乐播放器

♪♫请参阅使用audioMotion你的音乐！ ♪♫ audioMotion是一个高分辨率的实时音频频谱分析仪，并且是用... 可视化来自麦克风的音频（或“立体声混音”，如果您的声卡支持的话）轻量级的自定义文件服务器-也

RenaissanceCoders_UnityScripting:我们的Unity脚本教程系列的乐趣之选

Unity脚本我们的Unity脚本教程系列中的许多乐趣。带有频谱数据的音频可视化器我们迫不及待想看到你们使用AudioSyncer会想到什么创意！如果您共享可视化工具@RenaissanceCode，我们将转推您！

SimpleAudioReactiveWebApp:使用 Web Audio API 和 HTML5 Canvas 的简单音频响应式 Web 应用程序

SimpleAudioReactiveWebApp 使用带有 HTML5 画布的网络音频，只需使用麦克风输入即可调制圆的半径。本示例中使用和修改了 Volume Meter 演示示例 ( ) 中的函数。

Audio-Player-With-Animated-Waveform:本项目使用 React JS 构建项目的 UI。对于音频波形动画，我使用了WAAPI（Web动画API），并且图标均来自FontAwesome

创建 React 应用程序入门这个项目是用引导的。可用脚本在项目目录中，您可以运行： npm start 在开发模式下运行应用程序。打开在浏览器中查看。如果您进行编辑，页面将重新加载。您还将在控制台中看到任何 lint 错误。 npm test 在交互式观察模式下启动测试运行器。有关更多信息，请参见关于的部分。 npm run build 将用于生产的应用程序构建到build

soma-fm-player:这是一个Vue.js Web应用程序，用于来自Somafm.com的流广播电台。此应用使用公共SomaFM JSON频道API端点提取电台列表，并轻松在电台之间进行切换。该应用程序还使用Three.js和HTML5 Web Audio Context API来采样音频数据并为所选电台创建可视化效果

SomaFM音乐播放器网络应用这是一个Vue.js Web应用程序，用于来自流广播电台。此应用使用公共SomaFM JSON频道API端点提取电台列表，并轻松在电台之间进行切换。该应用程序还使用Three.js和来采样音频数据并为所选电台创建可视化效果。作者执照根据许可。

html网页做的动态爱心（超好看）

4星 · 用户满意度95%

用html+css+JavaScript网页做的动态爱心，浪漫十足

ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过

5星 · 资源好评率100%

ECharts+html大数据可视化大屏展示模板，共整合了30多套源码+效果图，做大屏效果的不容错过。

收起资源包目录

HTML5_Audio_Visualizer-gh-pages.zip （7个子文件）

HTML5_Audio_Visualizer-gh-pages

style

style.css 311B

License.txt 1KB

index.html 1KB

html5_audio_visualizer.js 11KB

audio_visualizer_single_page_version.html 15KB

README.md 299B

sources

screencapture.png 26KB

评论收藏

内容反馈

hsjdbdb

粉丝: 22
资源: 4586

HTML5_Audio_Visualizer：使用HTML5 Audio API构建的音频频谱可视化器

最新资源