javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JS调用麦克风录音

JavaScript调用麦克风录音完整实现步骤

作者：Rysxt

在JavaScript中调用手机的录音功能是我最近遇到的一个需求,下面这篇文章主要介绍了JavaScript调用麦克风录音的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

一、前置准备：浏览器与权限

在开始之前，请确保你的项目运行在​​HTTPS环境​​（或localhost本地环境），因为现代浏览器（如Chrome、Firefox、Edge）要求通过安全上下文访问麦克风。同时，用户需要手动授权麦克风权限，这是录音功能的必要前提。

二、核心API说明

实现录音功能主要依赖三个Web API：

  1. ​​navigator.mediaDevices.getUserMedia()​​：请求访问用户麦克风，返回一个Promise，成功时得到MediaStream对象（包含音频流）；
  2. ​​MediaRecorder​​：用于录制MediaStream中的音频数据，支持start()（开始录音）、stop()（停止录音）等方法；
  3. ​​Blob​​：用于存储录制的二进制音频数据，可转换为URL供播放或上传。

三、完整实现步骤

1. HTML结构：搭建用户界面

首先创建三个按钮（开始录音、停止录音、保存录音）和一个<audio>元素（用于播放录音）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS麦克风录音教程</title>
    <style>
        .btn {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        #startBtn { background-color: #4CAF50; color: white; }
        #stopBtn { background-color: #f44336; color: white; }
        #saveBtn { background-color: #2196F3; color: white; display: none; }
        #audioPlayer { margin-top: 20px; width: 300px; }
    </style>
</head>
<body>
    <h1>JS麦克风录音示例</h1>
    <button id="startBtn" class="btn">开始录音</button>
    <button id="stopBtn" class="btn" disabled>停止录音</button>
    <button id="saveBtn" class="btn" disabled>保存录音</button>
    


    <audio id="audioPlayer" controls></audio>

    <script src="recorder.js"></script>
</body>
</html>

2. JavaScript逻辑：实现录音功能

创建recorder.js文件，编写以下代码：

（1）获取麦克风权限并初始化MediaRecorder

let mediaRecorder; // MediaRecorder实例
let audioChunks = []; // 存储录音数据块
let audioBlob; // 最终录音文件

// 请求麦克风权限
async function startRecording() {
    try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        
        // 创建MediaRecorder实例（指定音频格式为opus）
        mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/ogg; codecs=opus' });
        
        // 监听数据可用事件，收集录音数据
        mediaRecorder.ondataavailable = (event) => {
            if (event.data.size > 0) {
                audioChunks.push(event.data);
            }
        };
        
        // 监听停止事件，生成录音文件
        mediaRecorder.onstop = () => {
            audioBlob = new Blob(audioChunks, { type: 'audio/ogg; codecs=opus' });
            const audioUrl = URL.createObjectURL(audioBlob);
            
            // 绑定录音文件到audio元素，供播放
            const audioPlayer = document.getElementById('audioPlayer');
            audioPlayer.src = audioUrl;
            audioPlayer.style.display = 'block';
            
            // 显示保存按钮
            document.getElementById('saveBtn').disabled = false;
            
            // 清空数据块，准备下次录音
            audioChunks = [];
        };
        
        // 开始录音
        mediaRecorder.start();
        console.log('录音开始...');
        
        // 更新按钮状态
        document.getElementById('startBtn').disabled = true;
        document.getElementById('stopBtn').disabled = false;
        
    } catch (error) {
        console.error('获取麦克风权限失败:', error);
        alert('无法访问麦克风，请检查权限设置！');
    }
}

// 停止录音
function stopRecording() {
    if (mediaRecorder && mediaRecorder.state !== 'inactive') {
        mediaRecorder.stop();
        console.log('录音停止...');
        
        // 更新按钮状态
        document.getElementById('startBtn').disabled = false;
        document.getElementById('stopBtn').disabled = true;
    }
}

// 保存录音文件
function saveRecording() {
    if (!audioBlob) return;
    
    // 创建下载链接
    const downloadLink = document.createElement('a');
    downloadLink.href = URL.createObjectURL(audioBlob);
    downloadLink.download = `录音_${new Date().toISOString()}.ogg`;
    downloadLink.style.display = 'none';
    document.body.appendChild(downloadLink);
    
    // 触发下载
    downloadLink.click();
    
    // 清理
    setTimeout(() => {
        document.body.removeChild(downloadLink);
        URL.revokeObjectURL(downloadLink.href);
    }, 100);
}

// 绑定按钮事件
document.getElementById('startBtn').addEventListener('click', startRecording);
document.getElementById('stopBtn').addEventListener('click', stopRecording);
document.getElementById('saveBtn').addEventListener('click', saveRecording);

（2）关键点说明

3. 运行与测试

将HTML和JavaScript文件放在同一目录下，通过本地服务器（如http-server、Live Server）打开页面（直接双击HTML文件可能因安全策略无法访问麦克风）。点击“开始录音”按钮，授权麦克风权限后开始录音；点击“停止录音”生成音频文件并自动播放；点击“保存录音”将文件下载到本地。

四、常见问题与优化

1. 浏览器兼容性问题

不同浏览器对MediaRecorder的支持程度不同，建议通过以下方式检测：

if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    alert('您的浏览器不支持麦克风访问功能，请升级至最新版本！');
}

2. 录音质量调整

若需提高录音质量，可通过MediaRecorder的bitsPerSecond属性设置比特率（单位：bps）：

mediaRecorder = new MediaRecorder(stream, {
    mimeType: 'audio/ogg; codecs=opus',
    bitsPerSecond: 128000 // 128kbps
});

3. 长时间录音的内存管理

长时间录音会导致audioChunks数组占用过多内存，建议定期清理或使用Blob分段存储：

// 每30秒清理一次数据块（示例）
setInterval(() => {
    if (audioChunks.length > 10) {
        audioChunks = [];
    }
}, 30000);

通过以上步骤，你可以快速实现JS调用麦克风录音的功能，并根据需求扩展（如上传录音到服务器、实时音频可视化等）。

总结

到此这篇关于JavaScript调用麦克风录音完整实现步骤的文章就介绍到这了,更多相关JS调用麦克风录音内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文