技术

音乐可视化-Web Audio Api接口,AudioContext对象

微信扫一扫,分享到朋友圈

音乐可视化-Web Audio Api接口,AudioContext对象
0 0

上次有见到网易云音乐的app里面更新版本之后,出现了好看的动效,样式挺好看的,像下面这样: image

之前见过好多次,一直感觉很神奇。思路也是有的,不过没有亲自尝试过。下午有空找了找相关的文档,做了下面的一个不成熟的音乐播放器,实现了图示的动效。

image

对应的线上地址是 https://notes.tingno.com/demo/music/

由于主要是自己研究接口及功能实现,样式没有进行整理优化,js代码也是乱七八糟的堆叠出来的,右键查看源代码就是全部代码了,比较乱,见谅。另外,代码里面使用的都是es6的语法,直接建议使用chrom的高版本浏览器。如果你还是用的IE,出门不送。

核心逻辑

  1. 创建音频环境对象
  2. 给音频对象创建一个分析器
  3. 音频对象生成音频资源(从音频文件或者麦克风)
  4. 音频资源连上分析器
  5. 分析器链接对象目的地 (我不是很懂为啥这么来回串啊串的)
  6. 分析器将分析结果数值同步输出到指定长度的数组中了。

而拿到这个数值之后,再去怎么很漂亮的呈现,就属于绘画的部分了。 代码如下:

let array =  new Uint8Array(64);//装填数组

window.addEventListener('load', function(e) {
    
	let context1 = new AudioContext()//建立音频环境
	let analyserfa = context1.createAnalyser() //创建分析器
	let source1 = context1.createMediaElementSource($("myAudio"));  //指定具体的dom资源
	source1.connect(analyserfa)  //资源连上分析器
	analyserfa.connect(context1.destination)  //分析器连上音频对象
	drawSpectrumfa() //开始分析绘画
})

//绘画动作
function drawSpectrumfa(){
	analyserfa.getByteFrequencyData(array) //分析结果装填数组
	array.map((v,index)=>{
		$('w_'+index).style.height = v / 10 + 2 + 'px'
	});  //数组绘画
	requestAnimationFrame(drawSpectrumfa);  //循环下一次分析
}
半拉子前端的自留地,发际线逐渐后移的抠脚大叔!

【填坑日记】ES6的新语法用ES5怎么写?find、findIndex源码来了

上一篇

前后端分离彻底与后端说分手Mock.js + Node.js

下一篇

你也可能喜欢

发表评论

您的电子邮件地址不会被公开。 必填项已用 * 标注

提示:点击验证后方可评论!

插入图片

体验小程序

标签地图

分类

EA PLAYER &

历史记录 [ 注意:部分数据仅限于当前浏览器 ]清空

      00:00/00:00
      音乐可视化-Web Audio Api接口,AudioContext对象

      长按储存图像,分享给朋友

      微信扫一扫

      微信扫一扫