HTML5＆安培; getUserMedia - 录音和放;保存到一定时间后Web服务器 [英] HTML5 & getUserMedia - Record Audio & Save to Web Server after Certain Time

问题描述

我有一些困难getUserMedia用HTML5开发的同时我的网页。这是我第一次尝试实现这个记录一个用户的音频输入。 Flash是不是这个项目的选择，因为它必须在移动设备上使用过

我来这里看看，如果任何人有经验，知道如何实现与getUserMedia的HTML5记录了一定的时间（在PHP中的会话完成）一个用户的麦克风，然后保存和音频文件发送到Web服务器

如果这是不可能的，那么有没有任何其他的方式，或许与Java小程序？

JS的：

 ＆LT;脚本＆GT;
      VAR onFail =功能（E）{
        的console.log（'拒绝！'，E）;
      };      变种的onSuccess =函数（多个）{
        VAR语境=新webkitAudioContext（）;
        VAR MediaStreamSource的= context.createMediaStreamSource（S）;
        记录=新记录（MediaStreamSource的）;
        recorder.record（）;        //音频回环
        // mediaStreamSource.connect（context.destination）;
      }      window.URL = window.URL || window.webkitUR​​L;
      navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;      VAR记录;
      VAR音频= document.querySelector（'声音'）;      功能的startRecording（）{
        如果（navigator.getUserMedia）{
          navigator.getUserMedia（{音频：真正}的onSuccess，onFail）;
        }其他{
          的console.log（'navigator.getUserMedia不是present'）;
        }
      }      功能STO precording（）{
        recorder.stop（）;
        recorder.exportWAV（功能（S）{
          audio.src = window.URL.createObjectURL（S）;
        }）;
      }
    ＆LT; / SCRIPT＆GT;
 

中的HTML（与从 recorder.js这里）：

 ＆LT;脚本类型=文/ JavaScript的SRC =recorder.js＆GT; ＆LT; / SCRIPT＆GT;    ＆LT;输入的onclick =的startRecording（）类型=按钮值=开始录制＆GT;
    ＆LT;输入的onclick =STO precording（）类型=按钮值=停止录制和播放＆GT;
 

解决方案

可以使用XMLHtt prequest

 函数上传（blobOrFile）{
    VAR XHR =新XMLHtt prequest（）;
    xhr.open（'POST'，'/upload.aspx'，真）;
    xhr.onload =功能（E）{
        VAR的结果= e.target.result;
    };    xhr.send（blobOrFile）;
}//停止录制函数调用上传方法
//我使用recorder.jsrecorder.exportWAV（功能（BLOB）{
    VAR URL = URL.createObjectURL（BLOB）;
    audio.src =网址;
    audio.controls = TRUE;
    VAR HF =使用document.createElement（'A'）;
    hf.href =网址;
    hf.download =新的日期（）toISOString（）+'.WAV。
    上传（BLOB）;
}）;//服务器端ASPX页面加载 - 可以节省服务器.wav文件Request.SaveAs（使用Server.Mappath（/富/+1+.WAV），FALSE）;
 

I'm having some difficulties with getUserMedia with HTML5 whilst developing my web page. This is the first time I've tried to implement this to record a users audio input. Flash is not an option for this project as it has to be used on mobile devices too.

I come here to see if anyone has experience with and knows how to implement an HTML5 with getUserMedia to record a users microphone for a certain amount of time (done with a session in PHP) and then saves and sends the audio file to a web server.

If this isn't possible then is there any other way, perhaps with a Java applet?

The js:

<script>
      var onFail = function(e) {
        console.log('Rejected!', e);
      };

      var onSuccess = function(s) {
        var context = new webkitAudioContext();
        var mediaStreamSource = context.createMediaStreamSource(s);
        recorder = new Recorder(mediaStreamSource);
        recorder.record();

        // audio loopback
        // mediaStreamSource.connect(context.destination);
      }

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

      var recorder;
      var audio = document.querySelector('audio');

      function startRecording() {
        if (navigator.getUserMedia) {
          navigator.getUserMedia({audio: true}, onSuccess, onFail);
        } else {
          console.log('navigator.getUserMedia not present');
        }
      }

      function stopRecording() {
        recorder.stop();
        recorder.exportWAV(function(s) {
          audio.src = window.URL.createObjectURL(s);
        });
      }
    </script>

The HTML (linked to recorder.js from here):

    <script type="text/javascript" src="recorder.js"> </script>

    <input onclick="startRecording()" type="button" value="start recording">
    <input onclick="stopRecording()" type="button" value="stop recording and play">

解决方案

can use XMLHttpRequest

function upload(blobOrFile) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload.aspx', true);
    xhr.onload = function (e) {
        var result = e.target.result;
    };

    xhr.send(blobOrFile);
}

// stop recording function calls the upload method
// I am using recorder.js

recorder.exportWAV(function (blob) {
    var url = URL.createObjectURL(blob);
    audio.src = url;
    audio.controls = true;
    var hf = document.createElement('a');
    hf.href = url;
    hf.download = new Date().toISOString() + '.wav';
    upload(blob);   
});

// on server side ASPX pageload - can save .wav file on server

Request.SaveAs(Server.MapPath("/foo/" + "1" + ".wav"), false);

这篇关于HTML5＆安培; getUserMedia - 录音和放;保存到一定时间后Web服务器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！