js 获取音乐的音频音铺

蔚落 2021-12-05 00:45 783阅读 0赞

本文章记录一下js获取音乐的音频音铺信息的方法

var audio = new Audio("金坷垃三人组 - 获元钾.mp3");
    var AudioContext = new (window.AudioContext || window.webkitAudioContext)();
    var source = AudioContext.createMediaElementSource(audio)
    var analyser = AudioContext.createAnalyser();
    source.connect(analyser);
    analyser.connect(AudioContext.destination)
    audio.play()

首先需要通过`Audio`加载音乐的文件  
后面就是通过`AudioContext`去加载音乐的信息

var output = new Uint8Array(1024);//这里可以设置获取数组的长度
    (function createAudio(){ 
    	analyser.getByteFrequencyData(output);
    	console.log(output)
    	requestAnimationFrame(createAudio)
    })()

在音乐播放的同时通过不停的调用`getByteFrequencyData`可以获取音频的数组  
![音频][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]  
这是使用获取的音频绘制的环形频谱

参考:  
[HTML5 Canvas 实现简易 绘制音乐环形频谱图][HTML5 Canvas _]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2d1b3FpbmcyMDE2_size_16_color_FFFFFF_t_70]: /images/20211205/86a178be08cd47f5bb445c6910d65351.png
[HTML5 Canvas _]: https://www.jianshu.com/p/14f1a5af6dd6

发表评论取消回复

表情：

评论列表（有 0 条评论，783人围观）

还没有评论，来说两句吧...

相关阅读

相关 Unity 音频、背景音乐 Audi组件

音频格式 1. 【aiff】（短音效）（原声文件） 2. 【wav】（短音效） 3. 【MP3】（长音乐） 4. 【ogg】（长音乐）（原声文件） ----...

今天药忘吃喽~/ 2024年04月17日 17:24/ 0 赞/ 66 阅读

相关如何快捷下载音乐，视频，音频，图片

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年11月19日 11:21/ 0 赞/ 211 阅读

相关 vue项目JS播放音频音效和背景音乐

主要就是用ref去获取元素。播放控件设为隐藏。然后用js控制播放和暂停： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

短命女/ 2022年11月15日 06:13/ 0 赞/ 381 阅读

相关 JavaScript - PC 端通过纯 js 播放音频文件（播放提示音）

前言有时候，我们可能有这样一个需求，当到达条件时，网页会播放一个提示音告知用户。实现 > 当然，你也可以写一个 <audio> </audio> 标签，通过

深藏阁楼爱情的钟/ 2022年11月05日 06:30/ 0 赞/ 174 阅读

相关音视频集中营1-音频的录制

最近学习音视频的相关知识，林林总总查了很多资料（博客，官方文档，源码，工具），对于初学者，完全满足“了解”的需求。这些零散的知识都是针对某个部分解析的，是音视频的砖，音视频的美

墨蓝/ 2022年06月14日 10:59/ 0 赞/ 240 阅读

相关爬虫爬取抖音热门音乐

![70][] 爬取抖音的热门音乐 ![70 1][] 详细代码在下面响应体内容工作流默认情况下，当你进行网络请求后，响应体会立即被下载。你可以通过 `

川长思鸟来/ 2022年05月08日 03:50/ 0 赞/ 384 阅读

相关音乐游戏&音频解析 ABC（下）

四. 路途接着上回所述，我们现在要解决的问题便是： “2. 通过所得数据通过一定方法解析出其中的歌曲信息” 首先我们应该先确定一下我们到底需要

谁践踏了优雅/ 2022年04月10日 13:40/ 0 赞/ 208 阅读

相关音乐游戏&音频解析 ABC（上）

一.引子现阶段的工作涉及到了部分音频解析的内容，广义来说便是[数字信号处理（DSP）][DSP]，可惜本人并非专科出生，很多相关内容都是空白，从头看起也感

小咪咪/ 2022年03月30日 06:13/ 0 赞/ 218 阅读

相关 js 获取音乐的音频音铺

本文章记录一下js获取音乐的音频音铺信息的方法 var audio = new Audio("金坷垃三人组 - 获元钾.mp3"); var AudioCon

蔚落/ 2021年12月05日 00:45/ 0 赞/ 784 阅读

相关 HTML音频：音乐播放网页

HTML音频：音乐播放网页任务描述相关知识使用HTML5 audio元素播放属性使用雅虎媒体播放器播放

妖狐艹你老母/ 2021年05月16日 20:37/ 0 赞/ 755 阅读