Аудиофайл не воспроизводится в Safari (MediaRecorder, rails carrierwave, S3) - PullRequest
Новая
       81

Аудиофайл не воспроизводится в Safari (MediaRecorder, rails carrierwave, S3)

0 голосов
/ 17 июня 2020

Я пытаюсь записать (js MediaRecorder), сохранить в s3 (ajax + rails carrierwave) и передать аудиофайлы, но сохраненные аудиофайлы воспроизводятся только на chrome, а не на safari.

Вот мои коды.

запись (js MediaRecorder в chrome) 

var audio_chunks, recorder, recording;
var toggle_recording_btn = $('#toggle_recording_btn');
toggle_recording_btn.on('click', toggleRecording);
function toggleRecording() {
    if (recorder && recorder.state == "recording") {
        recorder.onstop = function(e) {
            var audio_blob = new Blob(audio_chunks, {type: 'audio/mp3'});
            var audio_url = URL.createObjectURL(audio_blob);
            recording = {
                audio_blob: audio_blob,
                audio_url: audio_url,
            };
        };
        recorder.stop();
    } else {
        navigator.mediaDevices.getUserMedia({
            audio: true
        }).then(function(stream) {
            recorder = new MediaRecorder(stream);
            recorder.ondataavailable = function(e) {
                audio_chunks = [e.data]
            };
            recorder.start();
        });
    }
}

сохранение в s3 (ajax + rails carrierwave) 

var form_data = new FormData();
form_data.append('user[id]', user_id);
form_data.append('user[recording]', recording.audio_blob);
$.ajax({
    url: url,
    type: 'post',
    contentType: false,
    processData: false,
    cache: false,
    data: form_data,
    success: function() {
        // success
    },
    error: function() {
        // error
    }
});

class User < ActiveRecord::Base
    mount_uploader :recording, RecordingUploader
end

class RecordingUploader< CarrierWave::Uploader::Base
  include CarrierWave::MiniMagick
  storage :fog
  process :set_content_type

  def store_dir
    "uploads/user/#{model.id}"
  end

  def filename
    "recording.mp3"
  end

  def set_content_type
    file.content_type = "audio/mp3"
  end
end

обслуживание аудиофайлов 

<audio controls="controls" preload="none" autostart="false">
    <source src="<%= @user.recording.url %>" type="audio/mp3"></source>
</audio>

С указанными выше кодами аудиофайлы успешно записываются и сохраняются, но воспроизводятся только на chrome, а не в safari.

Точнее, аудиофайлы воспроизводятся при нажатии на safari play, но сразу после этого приостанавливаются, как если бы они были завершены.

Я не думаю, что это политика корзины s3 проблема или проблема cors, поскольку при загрузке нет ошибки, и теперь я без проблем обслуживаю аудиофайлы stati c с точно таким же кодом html.

Поиск и проба в соответствии со статьями SO, Medium et c.:

  1. Изменение content_type при записи (например, none, audi o, audio / mp3, audio / mpeg, audio / webm и т. д. c.)

  2. Изменение mimeType при записи (например, нет, audio / webm)

  3. Изменение расширения файла при сохранении (например, none, mp3, wav)

  4. Изменение content_type при сохранении (например, . none, audio / mp3, audio / mpeg и т. д. c.)

  5. Изменение html тега audio при обслуживании (например, с / без внутреннего тега источника, значений атрибутов предварительной загрузки)

Я видел ответ SO, в котором говорилось, что это может быть проблема со сжатием mp3-файла, но я не могу найти дополнительную информацию.

Буду признателен за любой ответ: )

...