猿问
下载APP

HTML5录制音频到文件

HTML5录制音频到文件

我最终想要做的是从用户的麦克风录制,并在完成后将文件上传到服务器。到目前为止,我已设法使用以下代码为元素创建流:


var audio = document.getElementById("audio_preview");


navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;

navigator.getUserMedia({video: false, audio: true}, function(stream) {

   audio.src = window.URL.createObjectURL(stream);

}, onRecordFail);


var onRecordFail = function (e) {

   console.log(e);

}

我如何从那里,到录制到文件?



宝慕林4294392
浏览 101回答 3
3回答

胡子哥哥

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

LEATH

下面的代码版权归Matt Diamond所有,可在MIT许可下使用。原始文件在这里:http://webaudiodemos.appspot.com/AudioRecorder/index.htmlhttp://webaudiodemos.appspot.com/AudioRecorder/js/recorderjs/recorderWorker.js保存这些文件并使用(function(window){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;WORKER_PATH&nbsp;=&nbsp;'recorderWorker.js'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;Recorder&nbsp;=&nbsp;function(source,&nbsp;cfg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;config&nbsp;=&nbsp;cfg&nbsp;||&nbsp;{}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bufferLen&nbsp;=&nbsp;config.bufferLen&nbsp;||&nbsp;4096; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.context&nbsp;=&nbsp;source.context; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.node&nbsp;=&nbsp;this.context.createScriptProcessor(bufferLen,&nbsp;2,&nbsp;2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;worker&nbsp;=&nbsp;new&nbsp;Worker(config.workerPath&nbsp;||&nbsp;WORKER_PATH); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;command:&nbsp;'init', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config:&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sampleRate:&nbsp;this.context.sampleRate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;recording&nbsp;=&nbsp;false, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currCallback; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.node.onaudioprocess&nbsp;=&nbsp;function(e){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!recording)&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;command:&nbsp;'record', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffer:&nbsp;[ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.inputBuffer.getChannelData(0), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.inputBuffer.getChannelData(1) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;] &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.configure&nbsp;=&nbsp;function(cfg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;prop&nbsp;in&nbsp;cfg){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(cfg.hasOwnProperty(prop)){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;config[prop]&nbsp;=&nbsp;cfg[prop]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.record&nbsp;=&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recording&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.stop&nbsp;=&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recording&nbsp;=&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.clear&nbsp;=&nbsp;function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage({&nbsp;command:&nbsp;'clear'&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.getBuffer&nbsp;=&nbsp;function(cb)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currCallback&nbsp;=&nbsp;cb&nbsp;||&nbsp;config.callback; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage({&nbsp;command:&nbsp;'getBuffer'&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.exportWAV&nbsp;=&nbsp;function(cb,&nbsp;type){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currCallback&nbsp;=&nbsp;cb&nbsp;||&nbsp;config.callback; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type&nbsp;=&nbsp;type&nbsp;||&nbsp;config.type&nbsp;||&nbsp;'audio/wav'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(!currCallback)&nbsp;throw&nbsp;new&nbsp;Error('Callback&nbsp;not&nbsp;set'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.postMessage({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;command:&nbsp;'exportWAV', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;type:&nbsp;type&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;worker.onmessage&nbsp;=&nbsp;function(e){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;blob&nbsp;=&nbsp;e.data; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;currCallback(blob); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;source.connect(this.node); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.node.connect(this.context.destination);&nbsp;&nbsp;&nbsp;&nbsp;//this&nbsp;should&nbsp;not&nbsp;be&nbsp;necessary &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Recorder.forceDownload&nbsp;=&nbsp;function(blob,&nbsp;filename){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;url&nbsp;=&nbsp;(window.URL&nbsp;||&nbsp;window.webkitURL).createObjectURL(blob); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;link&nbsp;=&nbsp;window.document.createElement('a'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link.href&nbsp;=&nbsp;url; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link.download&nbsp;=&nbsp;filename&nbsp;||&nbsp;'output.wav'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;click&nbsp;=&nbsp;document.createEvent("Event"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;click.initEvent("click",&nbsp;true,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;link.dispatchEvent(click); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.Recorder&nbsp;=&nbsp;Recorder; &nbsp;&nbsp;&nbsp;&nbsp;})(window); &nbsp;&nbsp;&nbsp;&nbsp;//ADDITIONAL&nbsp;JS&nbsp;recorderWorker.js &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;recLength&nbsp;=&nbsp;0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersL&nbsp;=&nbsp;[], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersR&nbsp;=&nbsp;[], &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sampleRate; &nbsp;&nbsp;&nbsp;&nbsp;this.onmessage&nbsp;=&nbsp;function(e){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;switch(e.data.command){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'init': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;init(e.data.config); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'record': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;record(e.data.buffer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'exportWAV': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;exportWAV(e.data.type); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'getBuffer': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getBuffer(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'clear': &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clear(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;init(config){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;sampleRate&nbsp;=&nbsp;config.sampleRate; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;record(inputBuffer){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersL.push(inputBuffer[0]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersR.push(inputBuffer[1]); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recLength&nbsp;+=&nbsp;inputBuffer[0].length; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;exportWAV(type){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bufferL&nbsp;=&nbsp;mergeBuffers(recBuffersL,&nbsp;recLength); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;bufferR&nbsp;=&nbsp;mergeBuffers(recBuffersR,&nbsp;recLength); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;interleaved&nbsp;=&nbsp;interleave(bufferL,&nbsp;bufferR); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;dataview&nbsp;=&nbsp;encodeWAV(interleaved); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;audioBlob&nbsp;=&nbsp;new&nbsp;Blob([dataview],&nbsp;{&nbsp;type:&nbsp;type&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.postMessage(audioBlob); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;getBuffer()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;buffers&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffers.push(&nbsp;mergeBuffers(recBuffersL,&nbsp;recLength)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;buffers.push(&nbsp;mergeBuffers(recBuffersR,&nbsp;recLength)&nbsp;); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;this.postMessage(buffers); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;clear(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recLength&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersL&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;recBuffersR&nbsp;=&nbsp;[]; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;mergeBuffers(recBuffers,&nbsp;recLength){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result&nbsp;=&nbsp;new&nbsp;Float32Array(recLength); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;offset&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;recBuffers.length;&nbsp;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result.set(recBuffers[i],&nbsp;offset); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;offset&nbsp;+=&nbsp;recBuffers[i].length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;interleave(inputL,&nbsp;inputR){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;length&nbsp;=&nbsp;inputL.length&nbsp;+&nbsp;inputR.length; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;result&nbsp;=&nbsp;new&nbsp;Float32Array(length); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;index&nbsp;=&nbsp;0, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inputIndex&nbsp;=&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;while&nbsp;(index&nbsp;<&nbsp;length){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[index++]&nbsp;=&nbsp;inputL[inputIndex]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;result[index++]&nbsp;=&nbsp;inputR[inputIndex]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;inputIndex++; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;result; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;floatTo16BitPCM(output,&nbsp;offset,&nbsp;input){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;input.length;&nbsp;i++,&nbsp;offset+=2){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;Math.max(-1,&nbsp;Math.min(1,&nbsp;input[i])); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;output.setInt16(offset,&nbsp;s&nbsp;<&nbsp;0&nbsp;?&nbsp;s&nbsp;*&nbsp;0x8000&nbsp;:&nbsp;s&nbsp;*&nbsp;0x7FFF,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;writeString(view,&nbsp;offset,&nbsp;string){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0;&nbsp;i&nbsp;<&nbsp;string.length;&nbsp;i++){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint8(offset&nbsp;+&nbsp;i,&nbsp;string.charCodeAt(i)); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;encodeWAV(samples){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;buffer&nbsp;=&nbsp;new&nbsp;ArrayBuffer(44&nbsp;+&nbsp;samples.length&nbsp;*&nbsp;2); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;view&nbsp;=&nbsp;new&nbsp;DataView(buffer); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;RIFF&nbsp;identifier&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writeString(view,&nbsp;0,&nbsp;'RIFF'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;file&nbsp;length&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint32(4,&nbsp;32&nbsp;+&nbsp;samples.length&nbsp;*&nbsp;2,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;RIFF&nbsp;type&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writeString(view,&nbsp;8,&nbsp;'WAVE'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;format&nbsp;chunk&nbsp;identifier&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writeString(view,&nbsp;12,&nbsp;'fmt&nbsp;'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;format&nbsp;chunk&nbsp;length&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint32(16,&nbsp;16,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;sample&nbsp;format&nbsp;(raw)&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint16(20,&nbsp;1,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;channel&nbsp;count&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint16(22,&nbsp;2,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;sample&nbsp;rate&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint32(24,&nbsp;sampleRate,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;byte&nbsp;rate&nbsp;(sample&nbsp;rate&nbsp;*&nbsp;block&nbsp;align)&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint32(28,&nbsp;sampleRate&nbsp;*&nbsp;4,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;block&nbsp;align&nbsp;(channel&nbsp;count&nbsp;*&nbsp;bytes&nbsp;per&nbsp;sample)&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint16(32,&nbsp;4,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;bits&nbsp;per&nbsp;sample&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint16(34,&nbsp;16,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;data&nbsp;chunk&nbsp;identifier&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;writeString(view,&nbsp;36,&nbsp;'data'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;data&nbsp;chunk&nbsp;length&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;view.setUint32(40,&nbsp;samples.length&nbsp;*&nbsp;2,&nbsp;true); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;floatTo16BitPCM(view,&nbsp;44,&nbsp;samples); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;view; &nbsp;&nbsp;&nbsp;&nbsp;}<html> &nbsp;&nbsp;&nbsp;&nbsp; <body> &nbsp;&nbsp;&nbsp;&nbsp; <audio&nbsp;controls&nbsp;autoplay></audio> &nbsp;&nbsp;&nbsp;&nbsp; <script&nbsp;type="text/javascript"&nbsp;src="recorder.js">&nbsp;</script> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<fieldset><legend>RECORD&nbsp;AUDIO</legend> &nbsp;&nbsp;&nbsp;&nbsp; <input&nbsp;onclick="startRecording()"&nbsp;type="button"&nbsp;value="start&nbsp;recording"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp; <input&nbsp;onclick="stopRecording()"&nbsp;type="button"&nbsp;value="stop&nbsp;recording&nbsp;and&nbsp;play"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</fieldset> &nbsp;&nbsp;&nbsp;&nbsp; <script> &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;onFail&nbsp;=&nbsp;function(e)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; console.log('Rejected!',&nbsp;e); &nbsp;&nbsp;&nbsp;&nbsp; }; &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;onSuccess&nbsp;=&nbsp;function(s)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;context&nbsp;=&nbsp;new&nbsp;webkitAudioContext(); &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;mediaStreamSource&nbsp;=&nbsp;context.createMediaStreamSource(s); &nbsp;&nbsp;&nbsp;&nbsp; recorder&nbsp;=&nbsp;new&nbsp;Recorder(mediaStreamSource); &nbsp;&nbsp;&nbsp;&nbsp; recorder.record(); &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;audio&nbsp;loopback &nbsp;&nbsp;&nbsp;&nbsp; //&nbsp;mediaStreamSource.connect(context.destination); &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; window.URL&nbsp;=&nbsp;window.URL&nbsp;||&nbsp;window.webkitURL; &nbsp;&nbsp;&nbsp;&nbsp; navigator.getUserMedia&nbsp;&nbsp;=&nbsp;navigator.getUserMedia&nbsp;||&nbsp;navigator.webkitGetUserMedia&nbsp;||&nbsp;navigator.mozGetUserMedia&nbsp;||&nbsp;navigator.msGetUserMedia; &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;recorder; &nbsp;&nbsp;&nbsp;&nbsp; var&nbsp;audio&nbsp;=&nbsp;document.querySelector('audio'); &nbsp;&nbsp;&nbsp;&nbsp; function&nbsp;startRecording()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; if&nbsp;(navigator.getUserMedia)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; navigator.getUserMedia({audio:&nbsp;true},&nbsp;onSuccess,&nbsp;onFail); &nbsp;&nbsp;&nbsp;&nbsp; }&nbsp;else&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; console.log('navigator.getUserMedia&nbsp;not&nbsp;present'); &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; function&nbsp;stopRecording()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp; recorder.stop(); &nbsp;&nbsp;&nbsp;&nbsp; recorder.exportWAV(function(s)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; audio.src&nbsp;=&nbsp;window.URL.createObjectURL(s); &nbsp;&nbsp;&nbsp;&nbsp; }); &nbsp;&nbsp;&nbsp;&nbsp; } &nbsp;&nbsp;&nbsp;&nbsp; </script> &nbsp;&nbsp;&nbsp;&nbsp; </body> &nbsp;&nbsp;&nbsp;&nbsp;</html>

翻翻过去那场雪

您可以使用GitHub中的Recordmp3js来满足您的要求。您可以从用户的麦克风录制,然后将该文件作为mp3播放。最后将其上传到您的服务器。我在演示中使用了这个。作者在此位置已提供源代码示例:https:&nbsp;//github.com/Audior/Recordmp3js演示在这里:http:&nbsp;//audior.ec/recordmp3js/但目前仅适用于Chrome和Firefox。似乎工作得很好,非常简单。希望这可以帮助。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答