p5.js 交互应用实战 —— 音乐可视化(案例)

案例一将振幅转化为图形

准备工作：打开编辑器左边菜单，upload mp3音乐素材（不超过5m）

//定义变量
//Sound--声音, amplitude--振幅
let Sound, amplitude;
//1.预读器（新建函数用来读取上传的音频）
function preload(){Sound = loadSound('sound.mp3');
}
//2.初始化
function setup(){createCanvas(400,400);amplitude = new p5.Amplitude();//将振幅生成线noStroke();
}
//3.开始绘制
function draw(){background(0.5);//自由填充颜色fill(255,random(255),random(255));//映射振幅,并转换成图形let level = amplitude.getLevel();//振幅是0-1的，画布为400x400，振幅最高不能超过400let r = map(level,0,1,0,400);ellipse(width/2, height/2, r, r);
}
//4.点击按钮播放/停止
function mousePressed(){if(Sound.isPlaying()){Sound.pause();}else{Sound.play();background(255,255,0);}
}

截图：

案例二将振幅转换成波形

let Sound, fft;
//预读器
function preload(){Sound = loadSound('sound.mp3');
}
//初始化
function setup(){createCanvas(800,320);fft = new p5.FFT();frameRate(20);//变化频率
}
//开始绘制
function draw(){background(255);//获取波形let waveform = fft.waveform();noFill();stroke('skyblue');strokeWeight(2);beginShape();for(let i=0; i<waveform.length; i++){let x = map(i,0,waveform.length,0,width);//读取波形数组中的每一个元素的数值let y = map(waveform[i],-1,1,0,320);//line(i,160,i,y);vertex(x,y);}endShape();
}
//按钮控制播放停止
function mousePressed(){if(Sound.isPlaying()){Sound.pause();}else{Sound.play();background(255,255,0);}
}

截图：

案例三声音交互，麦克风捕获，创建振幅

//mic--麦克风， amp--振幅
let mic, amp, r;
function setup(){createCanvas(600,600);background(0);//调用麦克风和振幅库mic = new p5.AudioIn();amp = new p5.Amplitude();mic.start();//转换麦克风的振幅amp.setInput(mic);
}
function draw(){fill(0,10);rect(0,0,width,height);r = map(amp.getLevel(),0,1,20,600);fill(random(255),random(255),random(255));ellipse(width/2,height/2,r,r);
}
function mousePressed(){if(getAudioContext().state!='running'){getAudioContext().resum();}
}
function touchStarted(){if(getAudioContext().state!='running'){getAudioContext().resum();}
}

案例四综合应用

let Sound,amp,fft
//预读器
function preload(){Sound = loadSound('sound.mp3');
}
//初始化
function setup(){createCanvas(400,400);amp = new p5.Amplitude();noStroke();fft = new p5.FFT();frameRate(20);
}
//开始绘制
function draw(){background(0,80);//振幅转换为图形let level = amp.getLevel();let r = map(level,0,1,0,150);fill(random(255),80,80);ellipse(width/2,height/2,r,r);//振幅转换为波形let waveform = fft.waveform();noFill();stroke(255,80,80,60);strokeWeight(2);for(let i=0;i<waveform.length;i++){//let x = map(i,0,waveform.length,0,width);//let y = map(waveform[i],-1,1,0,400);let angle = map(i,0,1024,0,360);x = width/2 + cos(angle) * 180;y = height/2 + sin(angle) * 180;let r = map(waveform[i],-0.8,0.8,50,220);x1 = width/2 + cos(angle) * r;y1 = height/2 + sin(angle) * r;line(x,y,x1,y1);}
}
//点击播放暂停
function mousePressed(){if(Sound.isPlaying()){Sound.pause();}else{Sound.play();background(255,255,0);}
}

截图：

p5.js 交互应用实战 —— 音乐可视化(案例)相关推荐

three.js 中国城市PM2.5可视化案例
Three.js零基础入门教程(郭隆邦) 中国城市PM2.5可视化案例: 数据文件数据.json给出了各个城市的PM2.5值和城市坐标.解析的时候把城市的PM2.5大小用圆圈大小表示,城市坐标直接通过 ...
互动应用开发p5.js——音视频交互
音视频交互一.实验内容: 音频可视化,是指一种以视觉为核心,以音频为载体,以大众为诉求对象,借助多种新媒体技术等传播媒介,通过画面.影像来诠释音乐内容的.视听结合的大众化传播方式.它能为理解.分析和 ...
Three.js音乐可视化
Three.js音乐可视化本文是Three.js电子书的13.2节通过Threejs音频相关的APi可以获得音乐音频的频率数据然后可视化. 查看平均频率 var analyser = null; ...
d3中文案例_D3js初探及数据可视化案例设计实战
摘要:本文以本人目前所做项目为基础,从设计的角度探讨数据可视化的设计的方法.过程和结果,起抛砖引玉之效.在技术方案上,我们采用通用web架构和d3js作为主要技术手段:考虑到项目需求,这里所做的可视化 ...
第十二课从宠物商店案例看DAPP架构和WEB3.JS交互接口
1. 文章摘要 [本文目标] 了解ETH生态下DAPP去中心化应用程序的框架和交互流程,了解WEB3.JS的作用和接口函数. [前置条件] 完成了<第六课技术小白如何开发一个DAPP区块链应用 ...
p5.js案例（二）：创意作品——USP消音版手枪模型
文章目录前言原图编程语言实现逻辑效果图完整代码前言根据老师的要求,创作一幅介绍自己的作品,可以是具象化地描绘形象,也可以是任何形式表现自己的兴趣.追求.特色.经历等. 由于最近比较喜欢 ...
D3.js音乐可视化
今天做的是一个音乐的可视化,好像是音乐频段的音量大小的可视化,不过本人音痴,不懂这个.(感觉有一点点像音乐喷泉吧!) 可视化效果图:(这是一首歌的某一秒的截图) 然后要注意!!--这个代码在chrom ...
利用HTML5 Web Audio API给网页JS交互增加声音
转自张鑫旭老师博客原文地址一.庞然的HTML5 Web Audio API 首先务必要弄清这一点,本文这里所说的HTML5 Web Audio API和HTML5 元素完全不是一个东西,其体量也完 ...
Vue.js 打造酷炫的可视化数据大屏
可视化技术与 Vue 介绍实验介绍在本节实验中,将对可视化技术的应用场景.发展历程进行介绍,让大家对可视化技术有一个基础的概念.随后将介绍如今流行的可视化框架与其之间的优缺点对比.最后介绍 Vue ...

p5.js 交互应用实战 —— 音乐可视化(案例)

案例一将振幅转化为图形

案例二将振幅转换成波形

案例三声音交互，麦克风捕获，创建振幅

案例四综合应用

p5.js 交互应用实战 —— 音乐可视化(案例)相关推荐

最新文章

热门文章

p5.js 交互应用实战 —— 音乐可视化(案例)

案例一 将振幅转化为图形

案例二 将振幅转换成波形

案例三 声音交互，麦克风捕获，创建振幅

案例四 综合应用

p5.js 交互应用实战 —— 音乐可视化(案例)相关推荐

最新文章

热门文章

案例一将振幅转化为图形

案例二将振幅转换成波形

案例三声音交互，麦克风捕获，创建振幅

案例四综合应用