web及h5录音wav下载
效果图
注意必须要 https环境
代码如下:
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Cache" content="no-cache">
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"><head><title>WAV音频录制</title>
<script src="https://raw.githubusercontent.com/mattdiamond/Recorderjs/master/dist/recorder.js"></script>
</head><body><h1>WAV音频录制</h1><button id="startRecord">开始录制</button><button id="stopRecord" disabled>停止录制</button><button id="downloadRecord" disabled>下载WAV</button><audio id="audioPlayback" controls></audio><div id="status"></div><script>document.addEventListener('DOMContentLoaded', function () {const startButton = document.getElementById('startRecord');const stopButton = document.getElementById('stopRecord');const downloadButton = document.getElementById('downloadRecord');const audioPlayback = document.getElementById('audioPlayback');const statusDiv = document.getElementById('status');let audioContext;let recorder;let audioStream;let audioBlob;// 兼容性处理：确保 mediaDevices 存在if (!navigator.mediaDevices) {navigator.mediaDevices = {};}if (!navigator.mediaDevices.getUserMedia) {navigator.mediaDevices.getUserMedia = function (constraints) {const legacyGetUserMedia = navigator.webkitGetUserMedia || navigator.mozGetUserMedia;if (!legacyGetUserMedia) {return Promise.reject(new Error('getUserMedia is not supported!'));}return new Promise((resolve, reject) => {legacyGetUserMedia.call(navigator, constraints, resolve, reject);});};}// 开始录制startButton.addEventListener('click', async function () {statusDiv.textContent = "正在请求麦克风权限...";try {audioStream = await navigator.mediaDevices.getUserMedia({ audio: true });audioContext = new (window.AudioContext || window.webkitAudioContext)({latencyHint: 'interactive' // iOS 兼容});const source = audioContext.createMediaStreamSource(audioStream);recorder = new Recorder(source);recorder.record();startButton.disabled = true;stopButton.disabled = false;statusDiv.textContent = "正在录制...";} catch (err) {statusDiv.textContent = "错误: " + err.message;console.error(err);}});// 停止录制stopButton.addEventListener('click', function () {if (recorder) {recorder.stop();startButton.disabled = false;stopButton.disabled = true;statusDiv.textContent = "正在处理音频...";recorder.exportWAV(function (blob) {audioBlob = blob;const audioUrl = URL.createObjectURL(blob);audioPlayback.src = audioUrl;downloadButton.disabled = false;statusDiv.textContent = "录制完成！";audioStream.getTracks().forEach(track => track.stop());});}});// 下载录音downloadButton.addEventListener('click', function () {if (!audioBlob) {alert('请先完成录音！');return;}// 创建Blob URL（明确指定MIME类型）const url = URL.createObjectURL(new Blob([audioBlob], { type: 'audio/wav' }));// 创建隐藏的<a>标签const a = document.createElement('a');a.href = url;a.download = 'recording_' + Date.now() + '.wav'; // 避免文件名冲突a.style.display = 'none';document.body.appendChild(a);// 直接触发点击（不再使用MouseEvent模拟）a.click();// 延迟清理（确保下载开始后再移除）setTimeout(() => {document.body.removeChild(a);URL.revokeObjectURL(url);}, 1000); // 延长延迟时间确保下载});});</script>
</body></html>