获取本地的音频
| <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]; |
| |
| 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') { |
| 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, |
| |
| }) |
| .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> |
| <!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.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.ogg"; |
| |
| 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:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Linux系列:如何调试 malloc 的底层源码
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 因为Apifox不支持离线,我果断选择了Apipost!
· 零经验选手,Compose 一天开发一款小游戏!
· 通过 API 将Deepseek响应流式内容输出到前端