问题描述
我有一些困难getUserMedia用HTML5开发的同时我的网页。这是我第一次尝试实现这个记录一个用户的音频输入。 Flash是不是这个项目的选择,因为它必须在移动设备上使用过
我来这里看看,如果任何人有经验,知道如何实现与getUserMedia的HTML5记录了一定的时间(在PHP中的会话完成)一个用户的麦克风,然后保存和音频文件发送到Web服务器
如果这是不可能的,那么有没有任何其他的方式,或许与Java小程序?
JS的:
<脚本>
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.webkitURL;
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);
});
}
< / SCRIPT>
中的HTML(与从):
<脚本类型=文/ JavaScript的SRC =recorder.js> < / SCRIPT> <输入的onclick =的startRecording()类型=按钮值=开始录制>
<输入的onclick =STO precording()类型=按钮值=停止录制和播放>
可以使用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服务器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!