js 获取音乐的音频音铺

蔚落 2021-12-05 00:45 841阅读 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 条评论，841人围观）

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

相关阅读

相关抖音热门音乐资源获取途径及版权问题解析？

在抖音上获取热门音乐资源，可以通过以下几个途径： 1. **抖音内置音乐库**：抖音本身拥有一个庞大的音乐库，用户可以直接选择使用。 2. **分享链接**：有时候创作者会

浅浅的花香味﹌/ 2024年12月14日 11:12/ 0 赞/ 84 阅读

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

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

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

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

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

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

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

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

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

相关 ATS无法缓存QQ音乐的音频文件问题

一、问题报告昨天运维报告江苏移动25上的缓存服务器无法缓存带有防盗链的音频文件，访问日志access.log中大量报如下错误 1430129072.554 677 2

电玩女神/ 2022年08月08日 05:22/ 0 赞/ 137 阅读

相关 android开发笔记之多媒体—播放音频（音乐）

Android应用增加动画，视频，音乐等多媒体功能，因此为手机提供音频录制，播放，视频录制，播放的功能十分重要。Android提供了常见音频，视频的编码，解码机制，An

迷南。/ 2022年07月24日 06:01/ 0 赞/ 345 阅读

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

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

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

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

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

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

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

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

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

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

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

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