网页上的麦克风microphone的自定义

你的设备通过麦克风、耳机和其它设备获取电子信号，然后这个内部的进程单元处理哪些信号然后输出或存储为数字格式。
一个麦克风的tester可以做这些事情，去检测mic是否正常工作，这个工具有一些功能能够触发一些特别的案例。比如mic没有连接上设备就执行的话，将会提示一些自定义的消息或者警告。
这个软件的主要目的是帮助用户去发现这些问题并提供一个修复他们的方式。

如何做一个microphone的tester
做一个Microphone Tester ，你需要理解基本的技术，比如：核心的数据处理。
直接从CPU获取信息对初学者来说不容易。因此这个教程，我们打算去使用这个简单的方法去处理。
首先看看下面代码。
在你的电脑上创建一个文件夹，然后通过vscode或者其它编辑器打开。
创建三个文件：html，css，javascript。命名为index.html,style.css,mic.js. 下面是html的code，你需要将他们paste into 到html文件。

HTML code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microphone Test</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
    <div class="bar" id="volume-visualizer"></div>
    <div class="components">
        <button class="techkib-online-tool-button" id="start">
            <i class="fa fa-microphone"></i> Start The Test
        </button>
        <button class="techkib-online-tool-button" id="stop"><i class="fa fa-stop"></i> Stop</button>
        <button class="techkib-online-tool-button" onClick="window.location.reload();">
            <i class="fa fa-refresh"> </i> Reload Test Environment
        </button>
    </div>
    <h3 id="tex"></h3>
</body>
<script src="mic.js"></script>
</html>
这我们用了font-awesome库使用他们漂亮的字体和icon。
我们也可以linked这个Css和Javascript文件。
下一步你需要复制css代码到css文件里面
CSS code
.bar {
    --volume: 0%;
    position: relative;
    width: 100%;
    height: 50px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.bar::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    border-radius: 5px;
    width: var(--volume);
    background-color: green;
    transition: width 100ms linear;
}

.techkib-online-tool-button {
    background-color: black;
    border: none;
    border-radius: 5px;
    color: yellow;
    padding: 12px 16px;
    font-size: 16px;
    cursor: pointer;
    outline: none;
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 5px;
    margin-right: 5px;
}
这儿我们创建了一个volume bar和按钮。我们需要去改变这个volume的size和按钮，让他们变得好看点。
然后将下面的js代码放到js文件里面。

Javascript Code
(async () => {
    let volumeCallback = null;
    let volumeInterval = null;
    const volumeVisualizer = document.getElementById('volume-visualizer');
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    try {
        const audioStream = await navigator.mediaDevices.getUserMedia({
            audio: {
                echoCancellation: true
            }
        });
        const audioContext = new AudioContext();
        const audioSource = audioContext.createMediaStreamSource(audioStream);
        const analyser = audioContext.createAnalyser();
        analyser.fftSize = 512;
        analyser.minDecibels = -127;
        analyser.maxDecibels = 0;
        analyser.smoothingTimeConstant = 0.4;
        audioSource.connect(analyser);
        const volumes = new Uint8Array(analyser.frequencyBinCount);
        volumeCallback = () => {
            analyser.getByteFrequencyData(volumes);
            let volumeSum = 0;
            for (const volume of volumes)
                volumeSum += volume;
            const averageVolume = volumeSum / volumes.length;
            volumeVisualizer.style.setProperty('--volume', (averageVolume * 100 / 127) + '%');
            var taxi;
            taxi = document.getElementById("tex");
            taxi.innerHTML = "Your Microphone is Working! 😇";
        };
    }
    catch (e) {
        console.error('Failed to initialize volume visualizer, simulating instead...', e);
        let lastVolume = 50;
        volumeCallback = () => {
            const volume = Math.min(Math.max(Math.random() * 100, 0.8 * lastVolume), 1.2 * lastVolume);
            lastVolume = volume;
            volumeVisualizer.style.setProperty('--volume', volume + '%');
            var taxi;
            taxi = document.getElementById("tex");
            taxi.innerHTML = "Status: Microphone is not working! ❌";
        };
    }
    startButton.addEventListener('click', () => {
        if (volumeCallback !== null && volumeInterval === null)
            volumeInterval = setInterval(volumeCallback, 100);
    });
    stopButton.addEventListener('click', () => {
        if (volumeInterval !== null) {
            clearInterval(volumeInterval);
            volumeInterval = null;
        }
    });
})();

现在去HTML文件，在一个在线的服务器里面打开这个文件，或者进入文件夹里面点击进入这个HTMl文件。它会在浏览器里面打开。
这就是基于web-based应用程序，因此你可以需要一个decent browser，比如Chrome，Firefox。decent /ˈdiːsnt/ 还行的
第一次运行的时候它会请求Microphone的使用权限，如果用户给它这个权限，那么它就可以用，然后显示分析报告。
====
学习和分析下这个javascript代码：
第一行  (async () => { ...}) (); 这是一个立即调用的函数表达式，后面的括号会调用前一个括号里面的的函数表达式。 async () => {...} 这个async是声明异步函数, 用的是一个箭头方法的写法，有这些写法：  async function foo() {};   async function() {};  async () => {} ； 一个比一个简化。async让函数有异步的特性，但整体上还是同步求值的。如果async有return，那么默认会返回一个契约对象promise,也可以返回一个thenable对象的非契约对象。




阅读量: 896
发布于:
修改于: