Thêm nút microphone cho web

  Bài viết hay nhất1
HTML:

<div id="loading-outer">
   <div id="loading-inner">
       <img src="/sandbox/micoff.png" alt="">
   </div>
</div>

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



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;
}



JS:

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

// preload images
function preload() {
   on = createImg('/sandbox/micon.png');
   off = createImg('/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 * 200, 80 + vol * 200);
   // --------------------------
   
   // 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(e) {
   // prevent default action
   e.preventDefault();
   
   // if hover status is true... *
   if (hover === true) {
       // and if microphone is enabled... *
       if (listening === true && mic.enabled) {
           // * stop listening
           listening = false;
           mic.stop();
       // and 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
});
Bạn không có quyền trả lời bài viết