html5录音

酷盾叔 • 2024-03-23 13:30 • 互联网+ • 阅读 102

在HTML中，我们不能直接录音，我们可以使用Web API中的MediaDevices接口和MediaRecorder接口来实现录音功能，以下是一个简单的示例，展示了如何使用JavaScript在HTML页面上实现录音功能：

（图片来源网络，侵删）

1、我们需要在HTML页面上添加一个按钮和一个用于显示录音结果的元素：

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

2、接下来，在main.js文件中，我们将编写JavaScript代码来实现录音功能：

const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');
const audioElement = document.createElement('audio');
const recorder;
let chunks = [];
// 检查浏览器是否支持MediaDevices接口和MediaRecorder接口
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    alert('您的浏览器不支持录音功能');
} else {
    startButton.addEventListener('click', async () => {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
        recorder = new MediaRecorder(stream);
        recorder.ondataavailable = (e) => {
            chunks.push(e.data);
        };
        recorder.start();
        startButton.disabled = true;
        stopButton.disabled = false;
    });
    stopButton.addEventListener('click', () => {
        recorder.stop();
        startButton.disabled = false;
        stopButton.disabled = true;
        const blob = new Blob(chunks, { type: 'audio/ogg; codecs=opus' });
        audioElement.src = URL.createObjectURL(blob);
        audioElement.play();
    });
}

在这个示例中，我们首先检查浏览器是否支持MediaDevices接口和MediaRecorder接口，如果支持，我们将为开始和停止按钮添加事件监听器，当用户点击开始按钮时，我们将请求用户的麦克风权限，并创建一个MediaRecorder对象来录制音频，当音频数据可用时，我们将它们添加到chunks数组中，当用户点击停止按钮时，我们将停止录音，并将chunks数组中的音频数据合并成一个Blob对象，然后将其设置为audio元素的源，并播放录音结果。

注意：这个示例仅适用于支持Web Audio API的浏览器，例如Chrome、Firefox等，如果您需要在不支持Web Audio API的浏览器（如Safari）中使用此功能，您可能需要使用其他库或工具，例如RecorderJS。

原创文章，作者：酷盾叔，如若转载，请注明出处：https://www.kdun.com/ask/379063.html