Skip to content

Instantly share code, notes, and snippets.

@hcastillaq

hcastillaq/Captura de microfono - Efecto de sonido.html

Created December 15, 2017 15:09
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hcastillaq/edd9438b8854ad98dc6d98becb04b4ea to your computer and use it in GitHub Desktop.
Save hcastillaq/edd9438b8854ad98dc6d98becb04b4ea to your computer and use it in GitHub Desktop.
Download ZIP
Como capturar el microfono y crear un efecto de sonido utilizando javascript con p5js
Raw
Captura de microfono - Efecto de sonido.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
</style>
</head>
<body>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/addons/p5.sound.min.js"></script>
<script>
var mic;
var colors = ['#e1225b', '#5bead6', '#b580c4'];
function setup()
{
mic = new p5.AudioIn();
mic.start();
createCanvas(windowWidth, windowHeight);
}
function draw()
{
var val = mic.getLevel();
val = parseInt(map(val, 0, 0.5, 1, 20));
background('rgba(0, 0, 0, 0.2)');
translate(width/2, height/2);
translate(-200, 0);
fill(random(colors));
for(i = 0; i<val; i++)
{
rect(i*15, 0, 20, -i*10);
}
translate(400, 0);
fill(random(colors));
for(i = 0; i<val; i++)
{
rect(-i*15, 0, 20, i*10);
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment