js实现浏览器实时检测麦克风声音分贝大小代码

代码语言:html

所属分类:多媒体

代码描述:js实现浏览器实时检测麦克风声音分贝大小代码,有个进度表可视化显示当前分贝大小。

代码标签: js 浏览器 实时 检测 麦克风 声音分 大小 代码

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
   
<meta charset="UTF-8">
   
<meta name="viewport" content="width=device-width, initial-scale=1.0">
   
<title>声音分贝监测</title>
   
<style>
       
.container {
           
text-align: center;
           
padding: 20px;
       
}
       
#volume {
           
font-size: 48px;
           
margin: 20px 0;
       
}
       
#meter {
           
width: 300px;
           
height: 30px;
           
border: 1px solid #ccc;
           
margin: 20px auto;
           
position: relative;
       
}
       
#level {
           
height: 100%;
           
width: 0%;
           
background: linear-gradient(to right, green, yellow, red);
           
transition: width 0.1s;
       
}
   
</style>
</head>
<body>
   
<div class="container">
       
<h2>麦克风声音分贝监测</h2>
       
<button onclick="startMonitoring()">开始监测</button>
       
<div id="volume">0 dB</div>
       
<div id="meter">
           .........完整代码请登录后点击上方下载按钮下载查看

网友评论0