js检测麦克风输入声音大小输出条状图效果代码-html代码-BFW代码库

js检测麦克风输入声音大小输出条状图效果代码

代码语言：html

所属分类：多媒体

代码描述：js检测麦克风输入声音大小输出条状图效果代码

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

<html>
<head>
    <style>
        div {
            --volume: 0%;
            position: relative;
            width: 200px;
            height: 20px;
            margin: 50px;
            background-color: #DDD;
        }

        div::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: var(--volume);
            background-color: green;
            transition: width 100ms linear;
        }

        button {
            margin-left: 50px;
        }

        h3 {
            margin: 20px;
            font-family: sans-serif;
        }
    </style>
</head>
<body>

    <div id="volume-visualizer" style="--volume:56.1327%;"></div>
    <button id="start">Start</button>
    <button id="stop">Stop</button>
    <script type="text/javascript">
        (async () => {
            let volumeCallback = null;
            let volumeInterval = null;
            const volumeVisualizer = document.getElementById('volume-visualizer');
            const startButton = document.getElementById('start');
            const stopButton = document.getElementById('stop');
            // Initialize
            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.smoothing.........完整代码请登录后点击上方下载按钮下载查看