p5.js Microphone Toggle

p5-js-microphone-toggle.markdown

p5.js Microphone Toggle

Using the p5.js canvas drawing library, I was able to create a toggle button that enables/disables your computer microphone when clicked. It listens to this audio channel in real time and produces an animated ellipse that increases/decreases in amplitude based on the input volume.

A Pen by Mark Hillard on CodePen.

License.

script.js

// global variables
var on, off, mic, amp, hover, listening = false;

// preload images
function preload() {
    on = createImg('https://www.markhillard.com/sandbox/micon.png');
    off = createImg('https://www.markhillard.com/sandbox/micoff.png');
}

// initialize processing
function setup() {
    // create canvas element
    var canvas = createCanvas(windowWidth, windowHeight);
    canvas.id('canvas');
    canvas.parent('microphone');
    
    // audio input (microphone)
    mic = new p5.AudioIn();
    mic.stop();
    
    // microphone volume
    amp = new p5.Amplitude(.9);
    amp.setInput(mic);
    
    // remove loading placeholder
    $('#loading-outer').remove();
}

// draw canvas
function draw() {
    // canvas background color
    background('#161616');
    
    // microphone button
    // --------------------------
    // distance between mouse position and inner ellipse
    var d = dist(mouseX, mouseY, windowWidth / 2, windowHeight / 2);
    
    // if distance between mouse position is less than inner ellipse radius
    if (d < 35) {
        // set hover status to true
        hover = true;
    // if distance between mouse position is greater than inner ellipse radius
    } else {
        // set hover status to false
        hover = false;
    }
    
    // if hover status is true
    if (hover === true) {
        // display pointer cursor
        cursor(HAND);
    // if hover status is false
    } else {
        // display default cursor
        cursor(ARROW);
    }
    // --------------------------
    
    // outer ellipse
    // --------------------------
    // microphone volume level
    var vol = amp.getLevel();
    
    // if microphone is enabled
    if (listening === true && mic.enabled) {
        // use "enabled" fill color
        fill('#c1212d');
    // if microphone is enabled
    } else {
        // use "disabled" fill color
        fill('#01aea1');
    }
    
    noStroke();
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2, 80 + vol * 300, 80 + vol * 300);
    // --------------------------
    
    // inner ellipse
    // --------------------------
    // if microphone is enabled
    if (listening === true && mic.enabled) {
        // use "enabled" fill color
        fill('#da454f');
    // if microphone is enabled
    } else {
        // use "disabled" fill color
        fill('#25bab0');
    }
    
    stroke('rgba(0, 0, 0, .05)');
    strokeWeight(2);
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2, 70, 70);
    // --------------------------
    
    // swap images
    // --------------------------
    imageMode(CENTER);
    
    // if microphone is enabled
    if (listening === true && mic.enabled) {
        // display "on" icon
        image(on, windowWidth / 2, windowHeight / 2);
    // if microphone is disabled
    } else {
        // display "off" icon
        image(off, windowWidth / 2, windowHeight / 2);
    }
    // --------------------------
}

// responsive canvas
function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
}

// microphone toggle
function mouseClicked() {
    // if hover status is true
    if (hover === true) {
        // if microphone is enabled
        if (listening === true && mic.enabled) {
            // stop listening
            listening = false;
            mic.stop();
        // if microphone is disabled
        } else {
            // start listening
            listening = true;
            mic.start();
        }
    }
}

$(document).ready(function () {
    setup(); // initialize processing
    draw(); // draw canvas
    windowResized(); // responsive canvas
    mouseClicked(); // microphone toggle
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.js"></script>

style.css

html,body {
background-color:#161616;
overflow:hidden;
}

#loading-outer {
background-color:#01aea1;
border-radius:50%;
display:block;
height:80px;
left:50%;
margin:-40px 0 0 -40px;
position:absolute;
text-align:center;
top:50%;
width:80px;
}

#loading-inner {
background-color:#25bab0;
border-radius:50%;
box-shadow:0 0 2px rgba(0,0,0,.05);
display:block;
height:70px;
left:50%;
margin:-35px 0 0 -35px;
position:absolute;
text-align:center;
top:50%;
width:70px;
}

#loading-inner img {
bottom:0;
left:0;
margin:auto;
position:absolute;
right:0;
top:0;
}

test.html

<div id="loading-outer">
    <div id="loading-inner">
        <img src="http://www.markhillard.com/sandbox/micoff.png" alt="">
    </div>
</div>

<div id="microphone"></div>