录制用户的音频，视屏 navigator.mediaDevices.getUserMedia

获取本地的音频

  <input type="file" accept="audio/*" capture="microphone" id="recorder">
  <audio id="player" controls></audio>
  <script>
    var recorder = document.getElementById('recorder');
    var player = document.getElementById('player')
 
    recorder.addEventListener('change', function (e) {
      var file = e.target.files[0];
      // Do something with the audio file.
      player.src = URL.createObjectURL(file);
    });
  </script>

获取麦克风声音

声音极小

<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>
		a,
		button {
			border: 0;
			background-color: #448aff21;
			text-decoration: none;
			padding: 10px;
			border-radius: 2px;
			color: #448aff !important;
		}
	</style>
</head>
 
<body style="margin-top: 20px;">
	<a id="download">Download</a>
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	<script>
		let l = console.log
		navigator.permissions.query({
			name: 'microphone'
		}).then(function (result) {
			if (result.state == 'granted') { // 用户之前已授予对麦克风的访问权
				l('ok')
			} else if (result.state == 'prompt') { // 用户尚未授予访问权，调用 getUserMedia 时将会收到提示
				l('ready')
			} else if (result.state == 'denied') { // 系统或用户已显式屏蔽对麦克风的访问权，您将无法获得对其的访问权
				l('...')
			}
			result.onchange = function () {
				l('change..')
			};
		});
		const downloadLink = document.getElementById('download');
		const stopButton = document.getElementById('stop');
		const startButton = document.getElementById('start');
 
		navigator.mediaDevices.getUserMedia({
				audio: true,
				video: false
			})
			.then(stream => {
				stopButton.addEventListener('click', e => {
					mediaRecorder.stop();
				})
 
				startButton.addEventListener('click', e => {
					mediaRecorder.start();
				})
				const recordedChunks = [];
				const mediaRecorder = new MediaRecorder(stream);
 
				mediaRecorder.addEventListener('dataavailable', function (e) {
					if (e.data.size > 0) {
						recordedChunks.push(e.data);
					}
				});
 
				mediaRecorder.addEventListener('stop', function () {
					l('暂停')
					downloadLink.href = URL.createObjectURL(new Blob(recordedChunks));
					downloadLink.download = 'acetest.wav';
				});
 
				mediaRecorder.addEventListener('start', e => {
					l('开始')
				})
			});
	</script>
</body>

镶嵌在 audio元素里面

<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>
		a,
		button {
			border: 0;
			background-color: #448aff21;
			text-decoration: none;
			padding: 10px;
			border-radius: 2px;
			color: #448aff !important;
		}
	</style>
</head>
 
<body style="margin-top: 20px;">
	<button id="start">Start</button>
	<button id="stop">Stop</button>
	<div>
		<audio id="audio" controls></audio>
	</div>
	<script>
		let l = console.log
		const stopButton = document.getElementById('stop');
		const startButton = document.getElementById('start');
 
		navigator.mediaDevices.getUserMedia({
				audio: true,
				// video: true
			})
			.then(stream => {
				stopButton.addEventListener('click', e => {
					mediaRecorder.stop();
				})
 
				startButton.addEventListener('click', e => {
					mediaRecorder.start();
				})
				const recordedChunks = [];
				const mediaRecorder = new MediaRecorder(stream);
				mediaRecorder.addEventListener('dataavailable', function (e) {
					if (e.data.size > 0) {
						recordedChunks.push(e.data);
					}
				});
 
				mediaRecorder.addEventListener('stop', function () {
					l('暂停')
					var audio = document.getElementById('audio');
					audio.src = URL.createObjectURL(new Blob(recordedChunks));
					audio.play();
				});
 
				mediaRecorder.addEventListener('start', e => {
					l('开始')
				})
			});
	</script>
</body>

录制视频 github地址

<!DOCTYPE html>
<html lang="en">
  <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>
      a,
      button {
        border: 0;
        background-color: #448aff21;
        text-decoration: none;
        padding: 10px;
        border-radius: 2px;
        color: #448aff !important;
      }
    </style>
  </head>
 
  <body style="margin-top: 20px;">
    <button id="start">Start</button> <button id="stop">Stop</button>
    <div>
      <p>live. <span class="timer"></span></p>
      <video
        width="600"
        id="live"
        style="box-sizing: border-box; border: 4px solid #f48"
      ></video>
    </div>
    <script>
      let l = console.log;
      let n = 0;
 
      let mediaRecorder;
      let timer;
      const stopButton = document.getElementById("stop");
      const startButton = document.getElementById("start");
 
      navigator.mediaDevices
        .getUserMedia({
          audio: true,
          video: true,
        })
        .then(stream => {
          let liveVideo = document.getElementById("live");
          // liveVideo.src = URL.createObjectURL(stream); // 你会看到一些警告
          liveVideo.srcObject = stream;
          liveVideo.play();
 
          stopButton.addEventListener("click", stopLive);
          startButton.addEventListener("click", e => {
            startLive(stream);
          });
        });
 
      // 显示录制的秒数
      function logger() {
        const timerEl = document.querySelector(".timer");
        timer = setInterval(() => {
          n += 1;
          timerEl.textContent = `${n}s`;
        }, 1000);
      }
 
      // 暂停后下载视频
      function downLoadVideo(chunks) {
        let downloadLink = document.createElement("a");
        downloadLink.href = URL.createObjectURL(
          new Blob(chunks, {
            type: "application/video",
          })
        );
        // downloadLink.download = 'live.webm';
        downloadLink.download = "live.ogg";
        // downloadLink.download = 'live.mp4';
        downloadLink.click();
      }
 
      // 结束录制
      function stopLive() {
        clearInterval(timer);
        n = 0;
        if (mediaRecorder) {
          mediaRecorder.stop();
        } else {
          alert("还没有开始。");
        }
      }
 
      function startLive(stream) {
        logger();
        let recordedChunks = [];
        mediaRecorder = new MediaRecorder(stream);
        mediaRecorder.start();
 
        mediaRecorder.addEventListener("dataavailable", function(e) {
          if (e.data.size > 0) recordedChunks.push(e.data);
        });
 
        mediaRecorder.addEventListener("stop", function() {
          l("暂停 自动下载");
          downLoadVideo(recordedChunks);
        });
 
        mediaRecorder.addEventListener("start", e => {
          l("开始 录制");
        });
      }
    </script>
  </body>
</html>

See alse:

posted @   Ajanuw  阅读(5197)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何调试 malloc 的底层源码
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
阅读排行：
· 25岁的心里话
· 因为Apifox不支持离线，我果断选择了Apipost！
· 零经验选手，Compose 一天开发一款小游戏！
· Trae 开发工具与使用技巧
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示