当前位置：首页 > 行业动态 > 正文

html5 如何录音

admin
行业动态
2024-04-01
1

HTML5 提供了一种在网页上录音的方法，即使用 <audio> 元素和 JavaScript，以下是详细的步骤和小标题：

1、创建 HTML 结构

创建一个 <audio> 元素用于显示录音控件和播放录音文件。

添加一个 <button> 元素作为开始录音的按钮。

添加一个 <button> 元素作为停止录音的按钮。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF8">
    <meta name="viewport" content="width=devicewidth, initialscale=1.0">
    <title>HTML5 录音示例</title>
</head>
<body>
    <audio id="audio" controls></audio>
    <button id="start">开始录音</button>
    <button id="stop">停止录音</button>
    <script src="script.js"></script>
</body>
</html>

2、获取音频上下文

使用 JavaScript 获取 <audio> 元素的音频上下文。

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

3、创建 MediaRecorder 对象

使用音频上下文创建一个 MediaRecorder 对象。

设置录音参数，如采样率、位深等。

设置录音源为麦克风。

navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        const mediaRecorder = new MediaRecorder(stream, {
            mimeType: 'audio/webm',
            audioBitsPerSecond: 16000,
            sampleRate: 44100,
        });
        mediaRecorder.start(); // 开始录音
    })
    .catch(error => {
        console.error('无法访问麦克风：', error);
    });

4、监听录音事件

监听 MediaRecorder 对象的 dataavailable 事件，当有录音数据可用时进行处理。

将录音数据添加到 <audio> 元素中进行播放。

mediaRecorder.addEventListener('dataavailable', event => {
    const audioData = event.data;
    const audioBuffer = audioContext.createBuffer(1, audioData.length, audioContext.sampleRate);
    audioBuffer.getChannelData(0).set(new Int16Array(audioData));
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start(); // 播放录音数据
});

5、控制录音开始和结束

为开始录音和停止录音的按钮添加点击事件处理函数。

在点击开始录音按钮时，开始录音并显示录音控件。

在点击停止录音按钮时，停止录音并隐藏录音控件。

document.getElementById('start').addEventListener('click', () => {
    mediaRecorder.start(); // 开始录音并显示录音控件
});
document.getElementById('stop').addEventListener('click', () => {
    mediaRecorder.stop(); // 停止录音并隐藏录音控件
});