如何使用浏览器上的手机麦克风记录？ [英] How to record using phone microphone on browsers?
本文介绍了如何使用浏览器上的手机麦克风记录？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想记录从浏览器中的声音，但它只能在Chrome浏览器在我的Mac，但同样不以任何其他浏览器。我的目标是从浏览器记录从手机的声音。
我一直想这个例子以下，但它并不适用于移动浏览器。它开辟了话筒，但并没有停止录像，从来没有播放出来。
我认为这个问题是某处大约recorder.stop（），它不会被调用。
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML的xmlns =http://www.w3.org/1999/xhtml＆GT;
＆LT; HEAD＆GT;
＆LT; META HTTP-EQUIV =Content-Type的CONTENT =text / html的;字符集= UTF-8/＆GT;
＆LT;标题＆GT;无标题文档＆LT; /标题＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.min.js＆GT;＆下; /脚本＆GT;
＆LT;脚本＆GT;＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;＆LT;身体GT;
＆LT;音响控制自动播放GT;＆LT; /音频＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =recorder.js＆GT; ＆LT; / SCRIPT＆GT;＆LT;输入的onclick =的startRecording（）类型=按钮值=开始录制/＆GT;
＆LT;输入的onclick =STO precording（）类型=按钮值=停止录制和播放/＆GT;＆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.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（功能（BLOB）{
//audio.src = window.URL.createObjectURL（S）; VAR URL = URL.createObjectURL（BLOB）;
audio.src =网址;
audio.controls = TRUE;
VAR HF =使用document.createElement（'A'）;
hf.href =网址;
hf.download =新的日期（）toISOString（）+'.WAV。
//上传（BLOB）;
audio.src =网址;
}）; } 功能上传（blobOrFile）{
VAR XHR =新XMLHtt prequest（）;
xhr.open（'POST'，'/upload.aspx'，真）;
xhr.onload =功能（E）{
VAR的结果= e.target.result;
}; xhr.send（blobOrFile）;
}
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
解决方案
只有Chrome支持像现在的AudioContext接口。
火狐也有一个实现，但只在每晚构建。
我不知道这是否是由这些浏览器的移动版本的支持。
I am trying to record a voice from browsers but it only works on chrome browser in my mac but the same doesn't work in any other browser. My goal is to record the voice from a phone from a browser.
I have been trying this below example but it doesn't works on mobile browsers. It opens up the microphone but doesn't stop recording and never plays it back.
I think the problem is somewhere around recorder.stop() which doesn't get called.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
</script>
</head>
<body>
<audio controls autoplay></audio>
<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" />
<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() {
//alert("hello");
recorder.stop();
recorder.exportWAV(function(blob) {
//audio.src = window.URL.createObjectURL(s);
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);
audio.src = url;
});
}
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);
}
</script>
</body>
</html>
解决方案
Only Chrome supports as of now the AudioContext interface. Firefox also has an implementation but only in the Nightly build.
I'm not sure if it is supported by the mobile version of these browsers.
这篇关于如何使用浏览器上的手机麦克风记录？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
