javascript - 录制音频并提交到 ActiveStorage

Question

我有一个带有指向 ActiveStorage 的文件字段的 Rails 表单。使用 MediaRecorder API（和 Safari 的 polyfill），我还构建了一个录音机。

到目前为止一切顺利：在<audio>提交表单之前，可以将录制的音频附加到元素并播放。如下所示，代码作为 blob 添加到<audio>标签中。

<audio controls="" data-target="audio-player.player" preload="true" src="blob:http://localhost:3000/5bb2e66f-afc0-6a46-b3f5-a95564afca55"</audio>

该表单还允许定期上传音频文件，该文件有效，并使用 ActiveStorage 存储，定义如下：

has_one_attached :audio_file

现在我想提交整个表单，包括 Rails 的音频。问题是file_field由于浏览器安全限制，无法直接设置。

所以我正在尝试一种解决方法：捕获表单submit，对其进行序列化并使用 POST fetch。这也有效（需要 a 的形式remote: true），现在唯一缺少的就是音频。

工作回调是：

  var form = self.fileFieldTarget.form;
  form.addEventListener('submit', function(e){
    e.preventDefault();
    fetch(e.target.action, {
      method: 'POST',
      body: new URLSearchParams(new FormData(e.target))
    }).then((resp) => {
      console.log(resp);
    });
  });

我看到两个选项：

1）以某种方式将编码的音频添加到表单json中，并将其视为ActiveStorage对象，然后将它们一起提交。2）在表单的其余部分保存后，单独调用仅加载音频

如果某些 HTML / JS 看起来有点奇怪，我将它们全部包装在 StimulusJS 中。如果需要，我很乐意分享所有的录音代码。