我在建设一个网站时,在实现多个音频录制选项上浪费了很多时间,但每个选项要么只适用于Chrome,要么只适用于Firefox,两者都可以,但Safari则不行,iOS上则完全不能使用。
该网站需要允许用户录制他们的信息并将其保存在表单状态以便提交。
我目前阅读的所有文章都是几个月前的,并且提到iOS不支持/即将支持。我已经尝试了在iOS上使用移动版Chrome,但它仍然无法工作。
是否有人找到一种简单的方法在浏览器和移动网站中录制音频?
我尝试过以下方法:
- Francium Voice(一个被放弃的JavaScript项目,适用于Chrome。记录并保存,我可以通过表单数据发送音频文件。 https://subinsb.com/html5-record-mic-voice/。但这使用了<audio>标签,显示为“错误”,不允许您进行录制。
- 我开始尝试getUserMedia(),因为它似乎是新标准,并且说它支持更多设备/浏览器,但麦克风也无法在iOS上工作。 https://www.html5rocks.com/en/tutorials/getusermedia/intro/
- 许多文章都说要使用Record.js,https://github.com/mattdiamond/Recorderjs,但那也是一个被放弃的项目。我只能录制音频,但它没有保存。同样不能在Safari或iOS上工作。
- 我尝试使用audio / *技术,但无法正确地使用它。它只会显示上传按钮,无法显示麦克风选项。根据文档,似乎是“应该”起作用的一个。 https://developers.google.com/web/fundamentals/media/recording-audio/
当前正在使用以下代码,在Chrome和Firefox中运行正常。
HTML
<audio controls src="" id="audio"></audio>
<a class="button" id="record">Record</a>
<input type="hidden" id="audiofile" name="audiofile" value="" aria-hidden="true"/>
使用Francium Voice库:
Javascript
// Audio Recording for Phone Calls
$(document).on("click", "#record:not(.stop)", function(){
elem = $(this);
$("#audio").attr("src","");
$("#audiofile").val("");
Fr.voice.record($("#live").is(":checked"), function(){
elem.addClass("stop");
});
elem.html("Stop <label id='minutes'>00</label>:<label id='seconds'>00</label>");
var minutesLabel = document.getElementById("minutes");
var secondsLabel = document.getElementById("seconds");
var totalSeconds = 0;
setInterval(setTime, 1000);
function setTime() {
++totalSeconds;
secondsLabel.innerHTML = pad(totalSeconds % 60);
minutesLabel.innerHTML = pad(parseInt(totalSeconds / 60));
}
function pad(val) {
var valString = val + "";
if (valString.length < 2) {
return "0" + valString;
} else {
return valString;
}
}
});
$(document).on("click", ".stop", function(){
elem = $(this);
elem.html("Record");
elem.removeClass("stop");
Fr.voice.export(function(base64){
$("#audio").attr("src", base64);
$("#audiofile").val(base64);
$("#audio")[0].play();
}, "base64");
Fr.voice.stop();
});
代码
- messerbill相关代码
。但如果您不想这样做,那也没关系——在这种情况下,我想您需要等很久才能得到答案……即便有一天回答也未必会出现。 - messerbill