js浏览器录音功能 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>旋风</title>
</head>

<body>
    <div class="app">
        <button class="record-btn">录音</button>
        <audio controls class="audio-player" id="cc"></audio>
    </div>
    <script>
        if (navigator.mediaDevices.getUserMedia) {
            var constraints = { audio: true };
            navigator.mediaDevices.getUserMedia(constraints).then(
                stream => {
                    console.log("授权成功！");
                    var recordBtn = document.querySelector(".record-btn");
                    var mediaRecorder = new MediaRecorder(stream);
                    recordBtn.onclick = () => {
                        mediaRecorder.start();
                        console.log("录音中...");
                    };
                    recordBtn.onclick = () => {
                        if (mediaRecorder.state === "recording") {
                            mediaRecorder.stop();
                            recordBtn.textContent = "record";
                            console.log("录音结束");
                        } else {
                            mediaRecorder.start();
                            console.log("录音中...");
                            recordBtn.textContent = "停止";
                        }
                        console.log("录音器状态：", mediaRecorder.state);
                    };
                    var chunks = [];
                    mediaRecorder.ondataavailable = function (e) {
                        chunks.push(e.data);
                    };
                    mediaRecorder.onstop = e => {
                        var blob = new Blob(chunks, { type: "audio/ogg; codecs=opus" });
                        chunks = [];
                        var audioURL = window.URL.createObjectURL(blob);
                        document.getElementById('cc').src = audioURL;
                        console.log(audioURL);
                    };
                },
                () => {
                    console.error("授权失败！");
                }
            );
        } else {
            console.error("浏览器不支持 getUserMedia");
        }

    </script>
</body>

</html>

　　

posted @ 2023-02-03 17:15  Brian_白  阅读(569)  评论(0)    收藏  举报