复制|粘贴 即可实现
基本结构：
页面标题和居中布局
录音控制按钮（开始/停止）
录音状态显示区域
录音列表展示区域
样式设计：
响应式设计，适配不同屏幕尺寸
清晰的按钮和状态提示
录音列表的整齐排列
JavaScript功能：
使用MediaRecorder API实现录音功能
浏览器兼容性检查
录音数据的收集和处理
录音文件的播放和下载
实时状态更新
用户体验：
按钮状态的自动切换
录音过程中的视觉反馈
错误处理和提示信息
录音文件的管理和回放
您可以将此代码保存为luyin.html文件使用
实现源码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>录音功能</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.recording-container {
text-align: center;
margin-top: 50px;
}
.controls {
margin: 20px 0;
}
button {
padding: 10px 20px;
margin: 0 10px;
font-size: 16px;
cursor: pointer;
}
#recordingsList {
margin-top: 30px;
text-align: left;
}
audio {
width: 100%;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="recording-container">
<h1>录音功能演示</h1>
<div class="controls">
<button id="recordButton">开始录音</button>
<button id="stopButton" disabled>停止录音</button>
</div>
<div id="recordingStatus">
<p>点击"开始录音"按钮开始录音</p>
</div>
<div id="recordingsList">
<h2>录音列表</h2>
<div id="recordings"></div>
</div>
</div>
<script>
let mediaRecorder;
let recordedChunks = [];
let recordingCount = 0;
const recordButton = document.getElementById('recordButton');
const stopButton = document.getElementById('stopButton');
const recordingStatus = document.getElementById('recordingStatus');
const recordings = document.getElementById('recordings');
// 检查浏览器是否支持录音功能
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log('录音功能可用');
} else {
recordingStatus.innerHTML = '<p style="color: red;">您的浏览器不支持录音功能</p>';
}
// 开始录音
recordButton.addEventListener('click', async () => {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
mediaRecorder = new MediaRecorder(stream);
recordedChunks = [];
mediaRecorder.start();
recordingStatus.innerHTML = '<p style="color: green;">正在录音...</p>';
recordButton.disabled = true;
stopButton.disabled = false;
mediaRecorder.addEventListener('dataavailable', event => {
if (event.data.size > 0) {
recordedChunks.push(event.data);
}
});
mediaRecorder.addEventListener('stop', () => {
const blob = new Blob(recordedChunks, { type: 'audio/webm' });
const url = URL.createObjectURL(blob);
recordingCount++;
const recordingElement = document.createElement('div');
recordingElement.innerHTML = `
<h3>录音 ${recordingCount}</h3>
<audio controls>
<source src="${url}" type="audio/webm">
您的浏览器不支持音频播放。
</audio>
<a href="${url}" download="recording${recordingCount}.webm">下载录音</a>
`;
recordings.prepend(recordingElement);
recordingStatus.innerHTML = '<p>录音已停止</p>';
recordButton.disabled = false;
stopButton.disabled = true;
});
} catch (error) {
console.error('录音失败:', error);
recordingStatus.innerHTML = '<p style="color: red;">录音失败: ' + error.message + '</p>';
}
});
// 停止录音
stopButton.addEventListener('click', () => {
if (mediaRecorder && mediaRecorder.state !== 'inactive') {
mediaRecorder.stop();
// 停止所有音轨
mediaRecorder.stream.getTracks().forEach(track => track.stop());
}
});
</script>
</body>
</html>
