AudioMediaRecorder —— 音频录制-QUI-Notes

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<style type="text/css">
		.box222{overflow: hidden;width: 100%;}
		.button{padding: 8px 15px;border: 1px solid #333;border-radius: 8px;display: inline-block;}
	</style>
</head>
<body>
		<audio id="myaudio" controls></audio>
		<audio id="recording" controls></audio>
		<div class="box222">
			<div id="startButton" class="button">开始录制</div>
			<div id="stopButton" class="button">停止录制</div>
		</div>
<script type="text/javascript">
	//音频盒子
	let myaudio = document.getElementById("myaudio")
	let recording = document.getElementById("recording")
	//控制按钮
	let startButton = document.getElementById("startButton")
	let stopButton = document.getElementById("stopButton")
	//录制流列表
	let dataChunks =[] //[Blob, Blob]
	let recorder
	//开始录制
	startButton.onclick = function(){
		getUserMedia(myaudio)
	}
	
	//拿到 摄像头 媒体流
	function getUserMedia(myaudio) {
		console.log(`Requesting  video stream`)
		//设置媒体参数
		const constraints = {
			video: false,
			audio: true
		};
		navigator.mediaDevices.getUserMedia(constraints)
			.then(stream => {
				if(myaudio) {
					//播放获取到的媒体流
					myaudio.srcObject = stream
					myaudio.onloadedmetadata = function(e) {
						myaudio.play()
					}
					//将当前媒体流记录下来
					myaudio.captureStream = myaudio.captureStream || myaudio.mozCaptureStream
					startRecording(myaudio.captureStream())
				}
			}).catch(error => {
				console.error(error)
			});
	}

	// 开始录制
	function startRecording(stream, lengthInMS) {
		recorder = new MediaRecorder(stream);
		//有效数据时将流保存起来
		recorder.ondataavailable = (event) => {
			let data = event.data;
			dataChunks.push(data);
		};
		//每秒记录一个Blob数据
		recorder.start(1000);
		console.log(recorder.state + " start to recording .....");
	}
	
	stopButton.onclick = function(){
		//清除预览数据
		myaudio.srcObject.getTracks().forEach((track) => track.stop());
		//停止录制
		recorder.stop();
		//录制媒体流转audio格式
		console.log(dataChunks)
		let recordedBlob = new Blob(dataChunks, { type: "audio/webm" });
		recording.src = URL.createObjectURL(recordedBlob);
	}
</script>
</body>
</html>
嗖一下，答案就来了！

AudioMediaRecorder —— 音频录制

效果展示：
