在适用于所有浏览器和 iOS 的网站上录制音频

Question

我浪费了大量时间在我正在构建的网站中实施多个音频录制选项，但每个选项要么只能在 Chrome 中使用，要么只能在 Firefox 中使用，但不能在 Safari 中使用，并且 none 继续 iOS。

该网站需要允许用户记录他们的消息并将其保存在表单状态以供提交。

我正在阅读的所有当前文章都是几个月前的文章，并且提到 iOS 不t/will 很快支持它。我已经在 iOS 上尝试了移动设备 Chrome，但仍然无法正常工作。

有没有人找到在浏览器和移动网站上简单录制音频的方法？？

我尝试过的事情：

Francium Voice（废弃的 javascript 项目，为 Chrome 工作。录制并保存，我可以通过表单数据发送音频文件。https://subinsb.com/html5-record-mic-voice/。但是这个使用显示为 "error" 的
我开始尝试 getUserMedia()，因为这似乎是新标准，并表示它在更多 devices/browsers 上受支持，但麦克风在 iOS 上也不起作用。 https://www.html5rocks.com/en/tutorials/getusermedia/intro/
很多文章都说要用Record.js，https://github.com/mattdiamond/Recorderjs，但那也是一个废弃的项目。我只能录制音频，但没有保存。同样不能在 Safari 或 iOS 中工作。
我尝试使用 audio/* 技术但无法正常工作。它只会显示上传按钮，无法显示麦克风选项。根据文档，"should" 似乎可以工作。 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 语音库：

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

Answer 1

我发现了一种最终在 Chrome、Firefox 和 iOS Safari 上起作用的技术。虽然 Safari 中的 getUserMedia 存在问题，但我现在正在调查。

https://github.com/GersonRosales/Record-Audios-and-Videos-with-getUserMedia

在适用于所有浏览器和 iOS 的网站上录制音频

Record Audio on Website that works on all browsers and iOS

html

javascript

audio-recording

ios

html5-audio