Three.js音乐可视化

本文是Three.js电子书的13.2节

通过Threejs音频相关的APi可以获得音乐音频的频率数据然后可视化。

查看平均频率

var analyser = null; // 声明一个分析器变量
// 渲染函数
function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧if (analyser) {// getAverageFrequency()返回平均音频var frequency = analyser.getAverageFrequency();mesh.scale.y = 5 * frequency / 256;mesh.material.color.r = 3 * frequency / 256;// 返回傅里叶变换得到的所有频率// console.log(analyser.getFrequencyData())}
}
render();var listener = new THREE.AudioListener() //监听者
var audio = new THREE.Audio(listener); //非位置音频对象
var audioLoader = new THREE.AudioLoader(); //音频加载器
// 加载音频文件
audioLoader.load('中国人.mp3', function(AudioBuffer) {audio.setBuffer(AudioBuffer); // 音频缓冲区对象关联到音频对象audioaudio.setLoop(true); //是否循环audio.setVolume(0.5); //音量audio.play(); //播放// 音频分析器和音频绑定，可以实时采集音频时域数据进行快速傅里叶变换analyser = new THREE.AudioAnalyser(audio);
});

频率数据可视化案例

获取频率数据，然后通过频率数据控制网格模型的长度方向伸缩变化。

/*** 创建多个网格模型组成的组对象*/var group = new THREE.Group();let N = 128; //控制音频分析器返回频率数据数量for (let i = 0; i < N / 2; i++) {var box = new THREE.BoxGeometry(10, 100, 10); //创建一个立方体几何对象var material = new THREE.MeshPhongMaterial({color: 0x0000ff}); //材质对象var mesh = new THREE.Mesh(box, material); //网格模型对象// 长方体间隔20，整体居中mesh.position.set(20 * i - N / 2 * 10, 0, 0)group.add(mesh)}scene.add(group)

var analyser = null; // 声明一个分析器变量
// 渲染函数
function render() {renderer.render(scene, camera); //执行渲染操作requestAnimationFrame(render); //请求再次执行渲染函数render，渲染下一帧if (analyser) {// 获得频率数据N个var arr = analyser.getFrequencyData();// console.log(arr);// 遍历组对象，每个网格子对象设置一个对应的频率数据group.children.forEach((elem, index) => {elem.scale.y = arr[index] / 80elem.material.color.r = arr[index] / 200;});}
}
...var listener = new THREE.AudioListener() //监听者
var audio = new THREE.Audio(listener); //非位置音频对象
var audioLoader = new THREE.AudioLoader(); //音频加载器
// 加载音频文件
audioLoader.load('中国人.mp3', function(AudioBuffer) {audio.setBuffer(AudioBuffer); // 音频缓冲区对象关联到音频对象audioaudio.setLoop(true); //是否循环audio.setVolume(0.5); //音量audio.play(); //播放// 音频分析器和音频绑定，可以实时采集音频时域数据进行快速傅里叶变换analyser = new THREE.AudioAnalyser(audio,2*N);
});

Three.js音乐可视化相关推荐

D3.js音乐可视化
今天做的是一个音乐的可视化,好像是音乐频段的音量大小的可视化,不过本人音痴,不懂这个.(感觉有一点点像音乐喷泉吧!) 可视化效果图:(这是一首歌的某一秒的截图) 然后要注意!!--这个代码在chrom ...
Html5音乐可视化之音乐的获取和播放
---恢复内容开始--- Html5音乐可视化之音乐的获取和播放最近沉迷与数据可视化无法自拔,但是自己的水平实在不够,所以先从一些小Gimmicks开始吧! 下面来一张应用核心结构图感受以下:前端( ...
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档
java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档 java计算机毕业设计Vue.js音乐播放器设计与实现源码+数据库+系统+lw文档本源码技术栈: 项目架构:B/S ...
lkmusic项目改进版本之WebAudio版本支持音乐可视化已更新至github 欢迎下载
亲们如果觉得好请fork我的github lkmusic 效果预览图(2016-4-26日已经改进) 更新: 优化界面效果修复播放完成后不会自动切换处于暂停状态的bug 已经上传至github(敬请 ...
js插件---10个免费开源的JS音乐播放器插件
js插件---10个免费开源的JS音乐播放器插件一.总结一句话总结:各种插件都有很多,多去找. 二.js插件---10个免费开源的JS音乐播放器插件亲测可用音乐播放器在网页设计中有时候会用到, ...
《D3.js数据可视化实战手册》——2.5 使用子选择器
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第2章,第2.5节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
《D3.js数据可视化实战手册》—— 1.1 简介
本节书摘来异步社区<D3.js数据可视化实战手册>一书中的第1章,第1.1节,作者: [加拿大]Nick Qi Zhu,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
第15章音乐可视化（《Python趣味创意编程》教学视频）
(图书介绍:童晶:<Python趣味创意编程>新书预告) 15 音乐可视化本章我们将实现音乐可视化的效果,如图所示.首先学习Minim库的下载配置,并利用Minim库播放音乐文件.绘制音 ...
php项目网页音乐播放器插件,10个免费开源的JS音乐播放器插件
10个免费开源的JS音乐播放器插件三月 24, 2015 评论 (3) Sponsor 音乐播放器在网页设计中有时候会用到,比如一些时尚类.音乐或影视类等项目,但这些网页播放器插件比较少见,所以这里 ...

Three.js音乐可视化

Three.js音乐可视化

查看平均频率

频率数据可视化案例

Three.js音乐可视化相关推荐

最新文章

热门文章