HTML5将音频录制到文件
HTML5将音频录制到文件
提问于 2013-05-07 15:00:49
我最终想要做的是从用户的麦克风中进行记录，并在完成后将文件上传到服务器。到目前为止，我已经成功地使用以下代码向元素创建了一个流：
var audio = document.getElementById("audio_preview");
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
navigator.getUserMedia({video: false, audio: true}, function(stream) {
audio.src = window.URL.createObjectURL(stream);
}, onRecordFail);
var onRecordFail = function (e) {
console.log(e);
}我如何从那开始，录制到一个文件？
回答 4
Stack Overflow用户
回答已采纳
发布于 2013-05-11 22:43:11
有一个相当完整的录音演示，网址为：http://webaudiodemos.appspot.com/AudioRecorder/index.html
它允许您在浏览器中录制音频，然后提供导出和下载您录制的内容的选项。
您可以查看该页面的源代码以查找到javascript的链接，但总而言之，这里有一个Recorder对象，其中包含一个exportWAV方法和一个forceDownload方法。
Stack Overflow用户
发布于 2014-03-27 17:05:12
这里有一个gitHub项目就可以做到这一点。
它以mp3格式录制来自浏览器的音频，并自动将其保存到the服务器。https://github.com/Audior/Recordmp3js
您还可以查看实现的详细说明：http://audior.ec/blog/recording-mp3-using-only-html5-and-javascript-recordmp3-js/
Stack Overflow用户
发布于 2021-06-16 02:37:33
这个问题非常古老，当前版本的浏览器不支持许多答案。我尝试使用简单的html、css和js创建录音机。我继续在电子中使用相同的代码来制作跨平台的应用程序。
<html>
<head>
<title>Recorder App</title>
</head>
<h2>Recorder App</h2>
<p>
<button type="button" id="record">Record</button>
<button type="button" id="stopRecord" disabled>Stop</button>
</p>
<p>
<audio id=recordedAudio></audio>
</p>
<script>
navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {handlerFunction(stream)})
function handlerFunction(stream) {
rec = new MediaRecorder(stream);
rec.ondataavailable = e => {
audioChunks.push(e.data);
if (rec.state == "inactive"){
let blob = new Blob(audioChunks,{type:'audio/mp3'});
recordedAudio.src = URL.createObjectURL(blob);
recordedAudio.controls=true;
recordedAudio.autoplay=true;
sendData(blob)
}
}
}
function sendData(data) {}
record.onclick = e => {
record.disabled = true;
record.style.backgroundColor = "blue"
stopRecord.disabled=false;
audioChunks = [];
rec.start();
}
stopRecord.onclick = e => {
record.disabled = false;
stop.disabled=true;
record.style.backgroundColor = "red"
rec.stop();
}
</script>
</html>上面的代码可以在windows10、Mac、Linux上运行，当然也可以在google chrome和firefox上运行。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16413063
复制相关文章
相似问题