問(wèn)題描述

在開(kāi)發(fā)我的網(wǎng)頁(yè)時(shí)，我在使用 HTML5 的 getUserMedia 時(shí)遇到了一些困難.這是我第一次嘗試實(shí)現(xiàn)它來(lái)記錄用戶的音頻輸入.Flash 不適合該項(xiàng)目，因?yàn)樗脖仨氃谝苿?dòng)設(shè)備上使用.

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.

我來(lái)這里是想看看是否有人有經(jīng)驗(yàn)并知道如何使用 getUserMedia 實(shí)現(xiàn) HTML5 來(lái)錄制用戶麥克風(fēng)一段時(shí)間(通過(guò) PHP 會(huì)話完成)，然后保存音頻文件并將其發(fā)送到一個(gè)網(wǎng)絡(luò)服務(wù)器.

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.

如果這是不可能的，那么還有其他方法嗎，也許是使用 Java 小程序?

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

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>

HTML(從這里鏈接到recorder.js):

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">

推薦答案

可以使用 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);

這篇關(guān)于HTML5 &getUserMedia - 錄制音頻 &一定時(shí)間后保存到 Web 服務(wù)器的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！