关于php：HTML5 | 码农家园

HTML5 & getUserMedia - Record Audio & Save to Web Server after Certain Time

在开发网页时，使用HTML5的getUserMedia遇到了一些困难。这是我第一次尝试实现此功能以记录用户的音频输入。 Flash不是该项目的选项，因为它也必须在移动设备上使用。

我来这里看看是否有人有经验，并且知道如何使用getUserMedia实现HTML5来录制用户麦克风一定时间(在PHP中使用会话完成)，然后保存并将音频文件发送到Web服务器。

如果这不可能，那么还有其他方法，也许用Java applet？

js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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);
});
}

HTML(从此处链接到recorder.js)：

1
2
3
4

相关讨论

可以使用XMLHttpRequest

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

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);