blocks|key|105732|text|有一个相当完整的录音演示，网址为：http://webaudiodemos.appspot.com/AudioRecorder/index.html|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|105733|它允许您在浏览器中录制音频，然后提供导出和下载您录制的内容的选项。|105734|您可以查看该页面的源代码以查找到javascript的链接，但总而言之，这里有一个Recorder对象，其中包含一个exportWAV方法和一个forceDownload方法。|style|CODE|105735|entityMap|0|LINK|mutability|MUTABLE|url|http://webaudiodemos.appspot.com/AudioRecorder/index.html^0|H|1L|0|0|0|15|8|1M|9|20|D|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]]|C|$]]|$1|D|3|E|5|6|7|V|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|W|8|@$A|X|B|Y|H|I]|$A|Z|B|10|H|I]|$A|11|B|12|H|I]]|9|@]|C|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|C|$]]]|K|$L|$5|M|N|O|C|$P|Q]]]]

<p>There is a fairly complete recording demo available at:  <a href="http://webaudiodemos.appspot.com/AudioRecorder/index.html">http://webaudiodemos.appspot.com/AudioRecorder/index.html</a></p>

<p>It allows you to record audio in the browser, then gives you the option to export and download what you've recorded.</p>

<p>You can view the source of that page to find links to the javascript, but to summarize, there's a <code>Recorder</code> object that contains an <code>exportWAV</code> method, and a <code>forceDownload</code> method.</p>


blocks|key|322865|text|这里有一个gitHub项目就可以做到这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|322866|它以mp3格式录制来自浏览器的音频，并自动将其保存到the服务器。https://github.com/Audior/Recordmp3js|offset|length|322867|您还可以查看实现的详细说明：http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/|322868|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/Audior/Recordmp3js|1|http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/^0|0|X|11|0|0|E|29|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>Here's a gitHub project that does just that.</p>

<p>It records audio from the browser in mp3 format, and it automatically saves it to the webserver.
<a href="https://github.com/Audior/Recordmp3js" rel="nofollow noreferrer">https://github.com/Audior/Recordmp3js</a></p>

<p>You can also view a detailed explanation of the implementation:
<a href="http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/" rel="nofollow noreferrer">http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/</a></p>


blocks|key|105833|text|无需等待录制结束即可实时播放音频：https://github.com/noamtcohen/AudioStreamer|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|105834|这会流式传输PCM数据，但您可以修改代码以流式传输mp3或Speex。|105835|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/noamtcohen/AudioStreamer|1|https://github.com/jpemartins/speex.js/^0|H|17|0|0|T|5|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>Stream audio in realtime without waiting for recording to end:
<a href="https://github.com/noamtcohen/AudioStreamer" rel="noreferrer">https://github.com/noamtcohen/AudioStreamer</a></p>

<p>This streams PCM data but you could modify the code to stream mp3 or <a href="https://github.com/jpemartins/speex.js/" rel="noreferrer">Speex</a></p>


blocks|key|322952|text|这个问题非常古老，当前版本的浏览器不支持许多答案。我尝试使用简单的html、css和js创建录音机。我继续在电子中使用相同的代码来制作跨平台的应用程序。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|322953|+<html>
++<head>
++++<title>Recorder+App</title>
++++
++</head>
++<h2>Recorder+App</h2>
++<p>
++++<button+type="button"+id="record">Record</button>
++++<button+type="button"+id="stopRecord"+disabled>Stop</button>
++</p>
++<p>
++++<audio+id=recordedAudio></audio>++++++++
++</p>

++<script>+
++++navigator.mediaDevices.getUserMedia({audio:true})
++++.then(stream+=>+{handlerFunction(stream)})

++++function+handlerFunction(stream)+{
++++++rec+=+new+MediaRecorder(stream);
++++++rec.ondataavailable+=+e+=>+{
++++++++audioChunks.push(e.data);
++++++++if+(rec.state+==+"inactive"){
++++++++++let+blob+=+new+Blob(audioChunks,{type:'audio/mp3'});
++++++++++recordedAudio.src+=+URL.createObjectURL(blob);
++++++++++recordedAudio.controls=true;
++++++++++recordedAudio.autoplay=true;
++++++++++sendData(blob)
++++++++++}
++++++++}
++++++}
++++
++++function+sendData(data)+{}
++++++record.onclick+=+e+=>+{
++++++++record.disabled+=+true;
++++++++record.style.backgroundColor+=+"blue"
++++++++stopRecord.disabled=false;
++++++++audioChunks+=+[];
++++++++rec.start();
++++++++}
++++++stopRecord.onclick+=+e+=>+{
++++++++record.disabled+=+false;
++++++++stop.disabled=true;
++++++++record.style.backgroundColor+=+"red"
++++++++rec.stop();
++++++++}
++</script>
</html>|code-block|syntax|javascript|322954|上面的代码可以在windows10、Mac、Linux上运行，当然也可以在google+chrome和firefox上运行。|322955|entityMap^0|X|4|12|3|16|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>The question is very old and many of the answers are not supported in the current version of the browser. I was trying to create the audio recorder using simple <code>html</code>, <code>css</code>, and <code>js</code>. I further went on to use the same code in electron to make a cross platform application.</p>
<pre><code> &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Recorder App&lt;/title&gt;
    
  &lt;/head&gt;
  &lt;h2&gt;Recorder App&lt;/h2&gt;
  &lt;p&gt;
    &lt;button type=&quot;button&quot; id=&quot;record&quot;&gt;Record&lt;/button&gt;
    &lt;button type=&quot;button&quot; id=&quot;stopRecord&quot; disabled&gt;Stop&lt;/button&gt;
  &lt;/p&gt;
  &lt;p&gt;
    &lt;audio id=recordedAudio&gt;&lt;/audio&gt;        
  &lt;/p&gt;

  &lt;script&gt; 
    navigator.mediaDevices.getUserMedia({audio:true})
    .then(stream =&gt; {handlerFunction(stream)})

    function handlerFunction(stream) {
      rec = new MediaRecorder(stream);
      rec.ondataavailable = e =&gt; {
        audioChunks.push(e.data);
        if (rec.state == &quot;inactive&quot;){
          let blob = new Blob(audioChunks,{type:'audio/mp3'});
          recordedAudio.src = URL.createObjectURL(blob);
          recordedAudio.controls=true;
          recordedAudio.autoplay=true;
          sendData(blob)
          }
        }
      }
    
    function sendData(data) {}
      record.onclick = e =&gt; {
        record.disabled = true;
        record.style.backgroundColor = &quot;blue&quot;
        stopRecord.disabled=false;
        audioChunks = [];
        rec.start();
        }
      stopRecord.onclick = e =&gt; {
        record.disabled = false;
        stop.disabled=true;
        record.style.backgroundColor = &quot;red&quot;
        rec.stop();
        }
  &lt;/script&gt;
&lt;/html&gt;
</code></pre>
<p>The above code works in Windows 10, Mac, Linux, and obviously, on both google chrome and firefox.</p>


<p>What I ultimately want to do is record from the user's microphone, and upload the file to the server when they're done. So far, I've managed to make a stream to an  element with the following code:</p>

<pre><code>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);
}
</code></pre>

<p>How do I go from that, to recording to a file?</p>


HTML5 record audio to file

服务器

Linux

我最终想要做的是从用户的麦克风中进行记录，并在完成后将文件上传到服务器。到目前为止，我已经成功地使用以下代码向元素创建了一个流：var audio = document.getElementById("audio_preview");navigator.getUserMedia  = navigator.getUser...

问HTML5将音频录制到文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5将音频录制到文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5将音频录制到文件
EN