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

目前我正在制作基于网络的语音录像机，它将录制的音频上传到服务器。在上传到服务器之前，用户需要录制音频并输入几个字段，如音频名称等

我正在使用MattDiamond的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（“文件名”）.value=url；给出一个错误。能否请论坛中的任何人给出如何设置的建议？

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

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

之后，必须使用createDownloadLink（）函数中生成的blob url设置输入值

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