录制html5音频

时间:2012-05-23 10:33:40

标签: javascript html5-audio

是否可以使用html5录制声音?我已下载最新的金丝雀版Chrome并使用以下代码:

navigator.getUserMedia = navigator.webkitGetUserMedia || navigator.getUserMedia; navigator.getUserMedia({audio:true},gotAudio,noStream);

然后提示用户允许录音,如果您说“是”,则会显示一条消息,说明正在录制Chrome。但是可以使用原始数据访问音频缓冲区吗?我似乎无法弄清楚如何。有建议的规范尚未实现但有人知道它现在是否可以在任何浏览器上实现,并提供说明?

3 个答案:

答案 0 :(得分:3)

Webkit和Chrome音频API支持录制,但随着其API的发展,维护使用它们的代码将很困难。

一个名为Sink.js的活动开源项目允许记录,并允许您推送原始样本:https://github.com/jussi-kalliokoski/sink.js/。由于该项目非常活跃,因此他们能够随时了解Webkit和Chrome的变化。

答案 1 :(得分:2)

在这里你可以找到我的例子,但它不起作用(部分)。因为还没有对chrome实施AUDIO录制。这就是为什么你会得到404错误,据说无法找到BLOB。

下面还有一个表格是因为我的目的是将BLOB发送到php文件,但由于不能正常工作,我无法尝试。保存,以后可以使用。

<audio></audio>
<input onclick="startRecording()" type="button" value="start recording" />
<input onclick="stopRecording()" type="button" value="stop recording and play" />
<div></div>
<!--
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="button" value="Upload" />
</form>
-->

<script>
  var onFailed = function(e) {
    console.log('sorry :(', e);
  };

window.URL = window.URL || window.webkitURL;
navigator.getUserMedia  = navigator.getUserMedia || navigator.webkitGetUserMedia ||
                          navigator.mozGetUserMedia || navigator.msGetUserMedia || 
var localStream

var audio = document.querySelector('audio');
var stop = document.getElementById('stop');


    function startRecording(){
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true, video: false, toString : function() {return "video,audio";}}, function(stream) {
            audio.src = window.URL.createObjectURL(stream);
        document.getElementsByTagName('div')[0].innerHTML = audio.src;
            localStream = stream;
          }, onFailed);
        } else {
            alert('Unsupported');
          //audio.src = 'someaudio.ogg'; // fallback.
        }
    }



    function stopRecording(){
        localStream.stop();
        audio.play();
    }


    function sendAudio(){

    }
</script>

注意:firefox的一些信息和方法:https://hacks.mozilla.org/2012/07/getusermedia-is-ready-to-roll/

答案 2 :(得分:0)

现在可以使用Audio context API和getChannelData()来访问音频缓冲区。

这是gitHub上的一个项目,它直接以MP3格式录制音频并将其保存在网络服务器上:https://github.com/nusofthq/Recordmp3js

在recorder.js中,您将看到如何通过以下渠道单独访问音频缓冲区:

this.node.onaudioprocess = function(e){
      if (!recording) return;
      worker.postMessage({
        command: 'record',
        buffer: [
          e.inputBuffer.getChannelData(0),
          //e.inputBuffer.getChannelData(1)
        ]
      });
    }

有关实施的更详细说明,请阅读以下博文: http://nusofthq.com/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/