js柱状图实时显示麦克风输入音量效果代码
代码语言:html
所属分类:多媒体
代码描述:js柱状图实时显示麦克风输入音量效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { color: #888; background: #262626; margin: 0; padding: 40px; text-align: center; font-family: "helvetica Neue", Helvetica, Arial, sans-serif; } #canvas { width: 100px; height: 100px; position: absolute; top: 150px; left: 45%; text-align: center; } </style> </head> <body> <h3>VU meter from mic input (getUserMedia API)</h3> <canvas id="canvas" width="150" height="300" style='background:blue'></canvas> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> console.log ("starting..."); navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; if (navigator.getUserMedia) { navigator.getUserMedia({ audio: true }, function(stream) { audioContext = new AudioContext(); analyser = audioContext.createAnalyser(); microphone = audioContext.createMediaStreamSource(stream); javascriptNode = audioContext.createScriptProcessor(2048, 1, 1); analyser.smoothingTimeConstant = 0.8; analyser.fftSize = 1024; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0