如何使用Web浏览器录制的音频作为HTML格式的值？

Question

目前，我正在制作基于Web的录音机，它将记录的音频上传到服务器。 在将其上传到服务器之前，用户需要记录音频并输入一些字段，例如音频名称等。

我正在使用来自MattDiamond https://github.com/mattdiamond/Recorderjs的 RecordJs。 当用户单击停止录制按钮时，将出现一个音频播放器，用户可以播放它。 如果用户决定使用它，他们将单击一个按钮以使用该音频，并且它将是文件类型输入字段的输入值。 代码如下所示：

var url;

function stopRecording() {
    mediaStream.stop();
    rec.stop();
    rec.exportWAV(function(e) {
        rec.clear();
        //Recorder.forceDownload(e, "test.wav");
        url = Recorder.getAudioUrl(e, "audio.wav");
        document.getElementById("audioPlayer").src = url;
        document.getElementById("audioPlayer").style.display = "";
    });
}

function setInputFile() {
    document.getElementById("filename").value = url;
} 

到目前为止，我设法从浏览器捕获音频并播放录制的音频，但是我坚持下一步，那就是将录制的音频设置为输入字段的值。 使用document.getElementById（“ filename”）。value = url; 给出一个错误。 能否请论坛中的任何人提供任何设置建议？

Answer 1

您必须为输入文件创建一个表单元素。 例如，在函数createDownloadLink（）中，您必须添加以下行

 var x = document.createElement("INPUT");
      x.setAttribute("type", "file");

之后，您必须使用在createDownloadLink（）函数中生成的Blob网址设置输入值。

x.setAttribute("value", url);

然后，您必须将输入文件标签与列表标签一起附加。

li.appendChild(x);

完整的实现如下所示。

 function createDownloadLink() {
    recorder && recorder.exportWAV(function(blob) {
      var url = URL.createObjectURL(blob);
      var li = document.createElement('li');
      var au = document.createElement('audio');
      var hf = document.createElement('a');
      var x = document.createElement("INPUT");
      x.setAttribute("type", "file");
      x.setAttribute("value", url);

      au.controls = true;
      au.src = url;
      hf.href = url;
      hf.download = new Date().toISOString() + '.wav';
      hf.innerHTML = hf.download;
      li.appendChild(au);
      li.appendChild(hf);
      li.appendChild(x);
      recordingslist.appendChild(li);
    });
  }