HTML5 ——web audio API 音乐可视化(二)
上一篇 web audio API 音乐可视化(一)介绍了一些基本的API,以及如何简单的播放一个音频,本篇介绍一下怎么对获取到的音频进行分析,并将分析后的数据绘制成图像。
最终效果请戳这里;
完整版代码请戳这里,如果还看得过眼,请给一个start⭐️
一、API介绍###
分析音频要用到一个音频分析对象AnalyserNode
,它能实时分析音频资源的频域和时域信息,但不会对音频流做任何处理。创建方法:
var analyser = ac.createAnalyser()
;
要用到的属性和方法:
- fftSize:设置FFT(FFT是离散傅里叶变换的快速算法,用于将一个信号变换到频域)值得大小,用于分析得到的频域,为32-2048之间的2的整数次倍,默认为2048。实时得到的音频频域的数据个数为fftSize的一半;
- frequencyBinCount:FFT值的一半,即实时得到的音频频域的数据个数;
- getByteFrequencyData(Uint8Array):复制音频当前的频域数据(数量是frequencyBinCount)到Uint8Array中。
要实时的分析音频数据并绘制成图形,就要用到一个
requestAnimationFrame
动画函数,实时得去分析数据进行图像渲染,此动画函数默认的是每秒调用60次。
二、实例代码###
var size = 128;
var xhr = new XMLHttpRequest();
var ac = new window.AudioContext();
var analyser = ac.createAnalyser();
var gainNode = ac[ac.createGain ? "createGain" :"createGainNode"]();
gainNode.connect(ac.destination);
analyser.fftSize = size * 2;
analyser.connect(gainNode);
function getMusic(name){
xhr.abort();
xhr.open("get","media/"+name);
xhr.responseType = "arraybuffer";
xhr.onload = function(){
ac.decodeAudioData(xhr.response,function(buffer){
var bufferSource = ac.createBufferSource();
bufferSource.buffer = buffer;
bufferSource.connect(analyser);
bufferSource[bufferSource.start ? "start" : "noteOn"](0);
},function(err){
console.log(err)
})
};
xhr.send();
}
//实时分析音频函数
function analysis(){
var arr = new Uint8Array(analyser.frequencyBinCount);
requestAnimationFrame = window.requestAnimationFrame;
function a(){
analyser.getByteFrequencyData(arr);
draw(arr); //调用绘图函数
console.log(arr); //在控制台可以看到输出的音频数据
requestAnimationFrame(a);
}
requestAnimationFrame(a);
}
analysis();
接下来就是画图函数了。
对于canvas不熟悉的童鞋,请参照canvas基础知识
//创建canvas 并添加到文档中
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
$(".content").html(canvas); //.content是需要展示图形的位置
var height = $(".content").height();
var width = $(".content").width();
canvas.width = width;
canvas.height = height;
function resize(){ //如果窗口的大小改变了,绘图跟着改变
canvas.height = height; //设置绘图相关的参数和属性
canvas.width = width;
var line = ctx.createLinearGradient(0,0,0,height);
line.addColorStop(0,"#CD96CD");
line.addColorStop(0.5,"#C6E2FF");
line.addColorStop(1,"#00BFFF");
ctx.fillStyle = line;
}
resize();
function draw(arr){ //参数arr就是上面分析函数里得到的arr
ctx.clearRect(0,0,width,height); //每次画图之前先清空画布
var w = width / size; //平均每个柱的宽度 size 要画的柱子的个数
for(var i=0;i<size;i++){ //柱子的个数
var h = arr[i] / 256 * height; //每个柱的高度
ctx.fillRect(w*i,height - h,w *0.6, h); //w*i 表示第i个柱子的起始点的x坐标,height - h表示第i个柱子的起始点的y坐标,w*0.6表示柱子的宽度,h是高度
}
}
draw
函数在 analysis
分析函数中调用。
最终效果请戳这里;
完整版代码,请戳这里吧;
HTML5 ——web audio API 音乐可视化(二)的更多相关文章
- HTML5 ——web audio API 音乐可视化(一)
使用Web Audio API可以对音频进行分析和操作,最终实现一个音频可视化程序. 最终效果请戳这里; 完整版代码请戳这里,如果还看得过眼,请给一个start⭐ 一.API AudioContext ...
- 【HTML5】Web Audio API打造超炫的音乐可视化效果
HTML5真是太多炫酷的东西了,其中Web Audio API算一个,琢磨着弄了个音乐可视化的demo,先上效果图: 项目演示:别说话,点我! 源码已经挂到github上了,有兴趣的同学也可以去st ...
- Web Audio API之手把手教你用web api处理声音信号:可视化音乐demo
1.Web Audio API 介绍 Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统 ,这些通用系统通俗的讲就是我们可以利用Web Audio API提供的各种方法操作各 ...
- 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况
对比audio标签 和 Web Audio API 各平台浏览器的支持情况: audio element Web Audio API desktop browsers Chrome 14 Yes ...
- Web Audio API 实现音频可视化
声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 一转眼就已经有三个月没写博客了,毕业季事情确实多,现在也终于完全毕业了,博客还是不能落下.偶尔还是要写一下. 玩HTML5的Audio A ...
- 使用Web Audio API绘制音波图
摘要:Web Audio API是对<audio> 标签功能上的补充,我们可以用它完成混音.音效.平移等各种复杂的音频处理,本文简单的使用其完成音波图的绘制. PS:本例子使用ES6编程, ...
- 【Web Audio API】 — 那些年的 web audio
转 TAT.Jdo:[Web Audio API] - 那些年的 web audio 这主题主要是早期对 web audio api的一些尝试,这里整理一下以便以后翻阅,如有错误,诚请指正. 在这之前 ...
- H5的Web Audio Api
概述 研究Web Audio Api的主要原因是:工作中需要在ios中实现声音的淡出效果,主要是通过setInterval来改audio标签的volume属性实现的,但是ios上面volume属性是只 ...
- [Javascript] Intro to the Web Audio API
An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an osci ...
随机推荐
- Linux磁盘分区的理解
磁盘分割: 一块磁盘可以被分割为多个分区artition. 磁盘链接的方式 正常的实体机使用的都是/dev/sd[a-]的硬盘档名 虚拟机可能会使用/dev/vd[a-p]这种装置档名 SATA/US ...
- 清华教授谈人工智能:BAT还算不上伟大公司
- go——方法
方法是与对象实例绑定的特殊函数.方法是面向对象编程的基本概念,用于维护和展示对象的自身状态.对象是内敛的,每个实例都有各自不同的独立特征,以属性和方法来暴露对外通信接口.普通函数则专注于算法流程,通过 ...
- 129. Sum Root to Leaf Numbers(从根节点加到叶子节点的和)
Given a binary tree containing digits from 0-9 only, each root-to-leaf path could represent a numb ...
- PAT 天梯赛 L1-044. 稳赢 【循环】
题目链接 https://www.patest.cn/contests/gplt/L1-044 题意 根据对方给出剪刀石头步 给出对应的胜利出招,每K次 要有一个平局 思路 用一个循环,然后每K次 判 ...
- 单例模式及getInstance()的用法
一般在单例模式下使用.getInstance()创建对象:但并不是所有有私有构造方法,对外通过getInstance方法提供 实例的情况就是单例模式. 注:单例模式:一个类有且只有一个实例.1,一个私 ...
- iOS clang 编译 oc 代码
clang -x objective-c -rewrite-objc -isysroot /Applications/Xcode.app/Contents/Developer/Platforms/iP ...
- python中命令行参数
python中的命令行参数 python中有一个模块sys,sys.argv这个属性提供了对命令行参数的访问.命令行参数是调用某个程序时除程序名外的其他参数. sys.argv是命令行参数的列表 le ...
- 如何选择单片机和Android-LInux-ARM开发板?
源: 如何选择单片机和Android-LInux-ARM开发板?
- 【Java】流与文件(端口 & 文件读写对象)
概述: 1.input和output是相对于内存而言的.输入(input)就是写入到内存里,输出(output)就是把内存里的东西写到外面. 2.操作内存里的东西非常便利,要么声明变量,要么new对象 ...