Ajax를 통해 Rails Controller에서 오디오 (mp3) 재생

우리는 ajax 호출에서 오디오 파일을 생성하고 해당 파일에서 데이터를 반환하고 Javascript가 페이지에서 오디오를 재생하도록하고 싶습니다. 하지만 우리는

Uncaught (in promise) DOMException: Failed to load because no supported source was found.

# in the controller
def preview
    file_name = Tempfile.new(["preview", '.mp3'], binmode: true)
  # fill file with data here

# after writing out file

    Rails.logger.debug Mp3Info.open(file_name.path)
    soundfile = File.open(file_name.path, 'r')
    binary = soundfile.read
  
    send_data binary, filename: 'preview.mp3', type: 'audio/mp3', disposition: 'inline'
end

페이지에서

<form id='test-gallery'>
<%= text_field_tag 'input-field-thing' %>
</form>

<script>
        $( "#control-thing" ).on( "click", function() {       
          var identifyingStuff = $("#input-field-thing").val();
          console.log(identifyingStuff);

          Rails.ajax({
            type: "post",
            url: "/sound_gallery/preview.js",
            data: Rails.serializeElement(Rails.$("form")[0]),
            success: (response) => {
              console.log(response);

              var blob = new Blob([response], { type: 'audio/mp3' });
              console.log(blob);

              var url = window.URL.createObjectURL(blob); //where value is the blob
              console.log(url);
              var audio = new Audio();
              audio.src = url;
              audio.play();
            },
          });
        });
</script>

console.log(response)프론트 엔드에 이진 파일로 보이는 기록합니다. 다음과 같이 보입니다 (붙여 넣기로 인해 저장되지 않기 때문에 이미지를 사용해야했습니다!).

그리고 console.log(blob)쓴다

Blob {size: 17989, type: "audio/mpeg"}

데이터가 제대로 전송되고 있다고 믿게되지만이 시점에서는 전혀 모르겠습니다.

브라우저의 '네트워크'패널 Status: 206에는 blob이 재생 될 때 표시됩니다. 이것이 브라우저 오류의 원인이 될 것이지만 '왜?'라는 질문은 여전히 ​​남아 있습니다.