HTML5录制音频到文件

blmhpbnm  于 2023-10-14  发布在  HTML5
关注(0)|答案(9)|浏览(302)

我最终想做的是从用户的麦克风记录，并在他们完成后将文件上传到服务器。到目前为止，我已经成功地使用以下代码创建了一个元素的流：

  1. var audio = document.getElementById("audio_preview");
  3. navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  4. navigator.getUserMedia({video: false, audio: true}, function(stream) {
  5.    audio.src = window.URL.createObjectURL(stream);
  6. }, onRecordFail);
  8. var onRecordFail = function (e) {
  9.    console.log(e);
  10. }

我如何从这一点，记录到一个文件？

Html

9条答案

按热度按时间
wf82jlnq

wf82jlnq1#

有一个相当完整的录音演示可在：http://webaudiodemos.appspot.com/AudioRecorder/index.html
它允许您在浏览器中录制音频，然后为您提供导出和下载录制内容的选项。
您可以查看该页面的源代码以找到指向JavaScript的链接，但总结一下，有一个Recorder对象，它包含一个exportWAV方法和一个forceDownload方法。

赞(0）分享  回复(0）举报  2023-10-14
ssm49v7z

ssm49v7z2#

下面显示的代码版权归Matt Diamond所有，可在MIT许可下使用。原始文件在这里：

保存此文件并使用

  1. (function(window){
  3.       var WORKER_PATH = 'recorderWorker.js';
  4.       var Recorder = function(source, cfg){
  5.         var config = cfg || {};
  6.         var bufferLen = config.bufferLen || 4096;
  7.         this.context = source.context;
  8.         this.node = this.context.createScriptProcessor(bufferLen, 2, 2);
  9.         var worker = new Worker(config.workerPath || WORKER_PATH);
  10.         worker.postMessage({
  11.           command: 'init',
  12.           config: {
  13.             sampleRate: this.context.sampleRate
  14.           }
  15.         });
  16.         var recording = false,
  17.           currCallback;
  19.         this.node.onaudioprocess = function(e){
  20.           if (!recording) return;
  21.           worker.postMessage({
  22.             command: 'record',
  23.             buffer: [
  24.               e.inputBuffer.getChannelData(0),
  25.               e.inputBuffer.getChannelData(1)
  26.             ]
  27.           });
  28.         }
  30.         this.configure = function(cfg){
  31.           for (var prop in cfg){
  32.             if (cfg.hasOwnProperty(prop)){
  33.               config[prop] = cfg[prop];
  34.             }
  35.           }
  36.         }
  38.         this.record = function(){
  39.        
  40.           recording = true;
  41.         }
  43.         this.stop = function(){
  44.         
  45.           recording = false;
  46.         }
  48.         this.clear = function(){
  49.           worker.postMessage({ command: 'clear' });
  50.         }
  52.         this.getBuffer = function(cb) {
  53.           currCallback = cb || config.callback;
  54.           worker.postMessage({ command: 'getBuffer' })
  55.         }
  57.         this.exportWAV = function(cb, type){
  58.           currCallback = cb || config.callback;
  59.           type = type || config.type || 'audio/wav';
  60.           if (!currCallback) throw new Error('Callback not set');
  61.           worker.postMessage({
  62.             command: 'exportWAV',
  63.             type: type
  64.           });
  65.         }
  67.         worker.onmessage = function(e){
  68.           var blob = e.data;
  69.           currCallback(blob);
  70.         }
  72.         source.connect(this.node);
  73.         this.node.connect(this.context.destination);    //this should not be necessary
  74.       };
  76.       Recorder.forceDownload = function(blob, filename){
  77.         var url = (window.URL || window.webkitURL).createObjectURL(blob);
  78.         var link = window.document.createElement('a');
  79.         link.href = url;
  80.         link.download = filename || 'output.wav';
  81.         var click = document.createEvent("Event");
  82.         click.initEvent("click", true, true);
  83.         link.dispatchEvent(click);
  84.       }
  86.       window.Recorder = Recorder;
  88.     })(window);
  90.     //ADDITIONAL JS recorderWorker.js
  91.     var recLength = 0,
  92.       recBuffersL = [],
  93.       recBuffersR = [],
  94.       sampleRate;
  95.     this.onmessage = function(e){
  96.       switch(e.data.command){
  97.         case 'init':
  98.           init(e.data.config);
  99.           break;
  100.         case 'record':
  101.           record(e.data.buffer);
  102.           break;
  103.         case 'exportWAV':
  104.           exportWAV(e.data.type);
  105.           break;
  106.         case 'getBuffer':
  107.           getBuffer();
  108.           break;
  109.         case 'clear':
  110.           clear();
  111.           break;
  112.       }
  113.     };
  115.     function init(config){
  116.       sampleRate = config.sampleRate;
  117.     }
  119.     function record(inputBuffer){
  121.       recBuffersL.push(inputBuffer[0]);
  122.       recBuffersR.push(inputBuffer[1]);
  123.       recLength += inputBuffer[0].length;
  124.     }
  126.     function exportWAV(type){
  127.       var bufferL = mergeBuffers(recBuffersL, recLength);
  128.       var bufferR = mergeBuffers(recBuffersR, recLength);
  129.       var interleaved = interleave(bufferL, bufferR);
  130.       var dataview = encodeWAV(interleaved);
  131.       var audioBlob = new Blob([dataview], { type: type });
  133.       this.postMessage(audioBlob);
  134.     }
  136.     function getBuffer() {
  137.       var buffers = [];
  138.       buffers.push( mergeBuffers(recBuffersL, recLength) );
  139.       buffers.push( mergeBuffers(recBuffersR, recLength) );
  140.       this.postMessage(buffers);
  141.     }
  143.     function clear(){
  144.       recLength = 0;
  145.       recBuffersL = [];
  146.       recBuffersR = [];
  147.     }
  149.     function mergeBuffers(recBuffers, recLength){
  150.       var result = new Float32Array(recLength);
  151.       var offset = 0;
  152.       for (var i = 0; i < recBuffers.length; i++){
  153.         result.set(recBuffers[i], offset);
  154.         offset += recBuffers[i].length;
  155.       }
  156.       return result;
  157.     }
  159.     function interleave(inputL, inputR){
  160.       var length = inputL.length + inputR.length;
  161.       var result = new Float32Array(length);
  163.       var index = 0,
  164.         inputIndex = 0;
  166.       while (index < length){
  167.         result[index++] = inputL[inputIndex];
  168.         result[index++] = inputR[inputIndex];
  169.         inputIndex++;
  170.       }
  171.       return result;
  172.     }
  174.     function floatTo16BitPCM(output, offset, input){
  175.       for (var i = 0; i < input.length; i++, offset+=2){
  176.         var s = Math.max(-1, Math.min(1, input[i]));
  177.         output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true);
  178.       }
  179.     }
  181.     function writeString(view, offset, string){
  182.       for (var i = 0; i < string.length; i++){
  183.         view.setUint8(offset + i, string.charCodeAt(i));
  184.       }
  185.     }
  187.     function encodeWAV(samples){
  188.       var buffer = new ArrayBuffer(44 + samples.length * 2);
  189.       var view = new DataView(buffer);
  191.       /* RIFF identifier */
  192.       writeString(view, 0, 'RIFF');
  193.       /* file length */
  194.       view.setUint32(4, 32 + samples.length * 2, true);
  195.       /* RIFF type */
  196.       writeString(view, 8, 'WAVE');
  197.       /* format chunk identifier */
  198.       writeString(view, 12, 'fmt ');
  199.       /* format chunk length */
  200.       view.setUint32(16, 16, true);
  201.       /* sample format (raw) */
  202.       view.setUint16(20, 1, true);
  203.       /* channel count */
  204.       view.setUint16(22, 2, true);
  205.       /* sample rate */
  206.       view.setUint32(24, sampleRate, true);
  207.       /* byte rate (sample rate * block align) */
  208.       view.setUint32(28, sampleRate * 4, true);
  209.       /* block align (channel count * bytes per sample) */
  210.       view.setUint16(32, 4, true);
  211.       /* bits per sample */
  212.       view.setUint16(34, 16, true);
  213.       /* data chunk identifier */
  214.       writeString(view, 36, 'data');
  215.       /* data chunk length */
  216.       view.setUint32(40, samples.length * 2, true);
  218.       floatTo16BitPCM(view, 44, samples);
  220.       return view;
  221.     }
  1. <html>
  2.     	<body>
  3.     		<audio controls autoplay></audio>
  4.     		<script type="text/javascript" src="recorder.js"> </script>
  5.                     <fieldset><legend>RECORD AUDIO</legend>
  6.     		<input onclick="startRecording()" type="button" value="start recording" />
  7.     		<input onclick="stopRecording()" type="button" value="stop recording and play" />
  8.                     </fieldset>
  9.     		<script>
  10.     			var onFail = function(e) {
  11.     				console.log('Rejected!', e);
  12.     			};
  14.     			var onSuccess = function(s) {
  15.     				var context = new webkitAudioContext();
  16.     				var mediaStreamSource = context.createMediaStreamSource(s);
  17.     				recorder = new Recorder(mediaStreamSource);
  18.     				recorder.record();
  20.     				// audio loopback
  21.     				// mediaStreamSource.connect(context.destination);
  22.     			}
  24.     			window.URL = window.URL || window.webkitURL;
  25.     			navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
  27.     			var recorder;
  28.     			var audio = document.querySelector('audio');
  30.     			function startRecording() {
  31.     				if (navigator.getUserMedia) {
  32.     					navigator.getUserMedia({audio: true}, onSuccess, onFail);
  33.     				} else {
  34.     					console.log('navigator.getUserMedia not present');
  35.     				}
  36.     			}
  38.     			function stopRecording() {
  39.     				recorder.stop();
  40.     				recorder.exportWAV(function(s) {
  41.                                 
  42.                                  	audio.src = window.URL.createObjectURL(s);
  43.     				});
  44.     			}
  45.     		</script>
  46.     	</body>
  47.     </html>
展开查看全部
赞(0）分享  回复(0）举报  2023-10-14
mi7gmzs6

mi7gmzs63#

更新现在Chrome也支持v47的MediaRecorder API。同样的事情要做的是使用它（猜测本机记录方法肯定会比变通方法更快），API真的很容易使用，你会发现关于如何为服务器上传一个blob的答案。

Demo-可以在Chrome和Firefox中工作，故意忽略了将blob推送到服务器.
Code Source
目前，有三种方法可以做到这一点：
1.作为wav [所有代码客户端，未压缩录制]，可以查看--> Recorderjs。问题：文件太大，需要更多的上传带宽。
1.作为mp3 [所有代码客户端，压缩记录]，可以查看--> mp3Recorder.问题：就我个人而言，我觉得质量不好，也有这个许可证的问题。
1.作为ogg [客户端+服务器端（node.js）代码，压缩录制，无限小时录制而不崩溃浏览器]，你可以查看--> recordOpus，要么只客户端录制，要么客户端-服务器捆绑，选择是你的。
ogg记录示例（仅限firefox）：

  1. var mediaRecorder = new MediaRecorder(stream);
  2. mediaRecorder.start();  // to start recording.    
  3. ...
  4. mediaRecorder.stop();   // to stop recording.
  5. mediaRecorder.ondataavailable = function(e) {
  6.     // do something with the data.
  7. }

Fiddle Demo用于ogg记录。

展开查看全部
赞(0）分享  回复(0）举报  2023-10-14
goqiplq2

goqiplq24#

这是一个简单的JavaScript录音机和编辑器。你可以试试。
https://www.danieldemmel.me/JSSoundRecorder/
可以从这里下载**
https://github.com/daaain/JSSoundRecorder

赞(0）分享  回复(0）举报  2023-10-14
olhwl3o2

olhwl3o25#

这个问题很老，许多答案在当前版本的浏览器中不受支持。我尝试使用简单的html、css和js创建音频记录器。我进一步在electron中使用相同的代码来制作一个跨平台应用程序。

  1. <html>
  2.   <head>
  3.     <title>Recorder App</title>
  4.     
  5.   </head>
  6.   <h2>Recorder App</h2>
  7.   <p>
  8.     <button type="button" id="record">Record</button>
  9.     <button type="button" id="stopRecord" disabled>Stop</button>
  10.   </p>
  11.   <p>
  12.     <audio id="recordedAudio"></audio>        
  13.   </p>
  15.   <script> 
  16.     navigator.mediaDevices.getUserMedia({audio:true})
  17.     .then(stream => {handlerFunction(stream)})
  19.     function handlerFunction(stream) {
  20.       rec = new MediaRecorder(stream);
  21.       rec.ondataavailable = e => {
  22.         audioChunks.push(e.data);
  23.         if (rec.state == "inactive"){
  24.           let blob = new Blob(audioChunks,{type:'audio/mp3'});
  25.           recordedAudio.src = URL.createObjectURL(blob);
  26.           recordedAudio.controls=true;
  27.           recordedAudio.autoplay=true;
  28.           sendData(blob)
  29.           }
  30.         }
  31.       }
  32.     
  33.     function sendData(data) {}
  34.       record.onclick = e => {
  35.         record.disabled = true;
  36.         record.style.backgroundColor = "blue"
  37.         stopRecord.disabled=false;
  38.         audioChunks = [];
  39.         rec.start();
  40.         }
  41.       stopRecord.onclick = e => {
  42.         record.disabled = false;
  43.         stop.disabled=true;
  44.         record.style.backgroundColor = "red"
  45.         rec.stop();
  46.         }
  47.   </script>
  48. </html>

上面的代码可以在Windows 10、Mac、Linux中运行，当然，也可以在谷歌Chrome和火狐上运行。

展开查看全部
赞(0）分享  回复(0）举报  2023-10-14
6kkfgxo0

6kkfgxo06#

您可以使用GitHub中的Recordmp3js来实现您的要求。您可以从用户的麦克风录制，然后将文件作为mp3。最后上传到你的服务器。
我在我的demo中使用了这个。已经有一个示例与源代码由作者在这个位置：https://github.com/Audior/Recordmp3js
demo在这里：http://audior.ec/recordmp3js/
但目前仅适用于Chrome和Firefox。
似乎工作得很好，很简单。希望这对你有帮助。

赞(0）分享  回复(0）举报  2023-10-14
q1qsirdb

q1qsirdb7#

这里有一个gitHub项目可以做到这一点。
它以mp3格式记录浏览器中的音频，并自动将其保存到Web服务器。https://github.com/Audior/Recordmp3js
您还可以查看实现的详细说明：http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/

赞(0）分享  回复(0）举报  2023-10-14
7ivaypg9

7ivaypg98#

实时流式传输音频，无需等待录制结束：https://github.com/noamtcohen/AudioStreamer
这将传输PCM数据，但您可以修改代码以传输mp3或Speex

赞(0）分享  回复(0）举报  2023-10-14
oug3syen

oug3syen9#

如果你只需要wav文件格式，你可以使用这个npm包，不需要做任何修改。https://www.npmjs.com/package/extendable-media-recorder

  1. import { MediaRecorder, register } from 'extendable-media-recorder';
  2. import { connect } from 'extendable-media-recorder-wav-encoder';
  4. await register(await connect());
  6. const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  7. const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/wav' });
赞(0）分享  回复(0）举报  2023-10-14
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com