Аудиофайлы POST HTML5 на сервер

В настоящее время я внедряю веб-приложение, и я хочу, чтобы пользователи записывали некоторый звук, а затем я хочу кнопку отправки, чтобы ПОСТ mp3 файл, записанный на сервер.

Основной маршрут моего сервера (Flask) '/' ожидает запроса POST:

@app.route('/', methods=['GET', 'POST'])
def index():
  if request.method == "GET":
    return render_template('index.html', request="GET")
  else:
    print request.files
    print request.form
    print request.form['file']
    if 'file' not in request.files:
      flash('No file part')
      return redirect(request.url)
    file = request.files['file']
    if file.filename == '':
      flash('No selected file')
      return redirect(request.url)
    if file and allowed_file(file.filename):
      handle_file(file)
    return render_template('index.html', request="POST")

Вот мой код JS:

Jsfiddle

Здесь есть два основных вопроса:

1) Когда я загружаю mp3 файл после записи, он не может быть открыт медиаплеером. Кажется, я делаю что-то неправильно, просто записывая звук.

2) Когда я print request.form на моем сервере после получения запроса POST, я получаю только это:

ImmutableMultiDict([('file', u'')])

И print request.form['file'] возвращает пустую строку.

Почему это происходит? Что-то не так с запросом POST.

Наконец, я хочу иметь возможность декодировать строку, которую я отправляю, чтобы преобразовать обратно в mp3. Как это сделать?

Примечание: Ничто из этого не должно оставаться прежним. Задача состоит в том, чтобы записать звук, а затем отправить его на сервер. Если есть более эффективный способ сделать это, любые советы приветствуются. Кроме того, мне все равно, будет ли файл wav или mp3.

Ответ 1

Примечание. Этот ответ рассматривает только текущие реализации как в Chrome, так и в Firefox. Все это может измениться в ближайшее время.

Я не уверен, что что-то не так в вашем серверном коде, но не отправляйте двоичные данные в виде строки. Вместо этого используйте FormData для отправки его как multipart (вы получите 30% данных + целостность).

Кроме того, кажется, что в вашем коде MediaRecorder вы завершаете файл в каждом событии dataavailable. Обычно это не то, что вы хотите.

В настоящее время ни один браузер не поддерживает запись как mp3 изначально.

var mimes = ['mpeg', 'mpeg3', 'x-mpeg3', 'mp3', 'x-mpeg']
console.log(mimes.some(m=>MediaRecorder.isTypeSupported('audio/'+m)));

Ответ 2

Попробуйте преобразовать аудиокабель в Base64 и отправить строку base64 на сервер.

function submit(blob) {
  var reader = new window.FileReader();
  reader.readAsDataURL(blob);
  reader.onloadend = function() {

    var fd = new FormData();
    base64data = reader.result;
    fd.append('file', base64data, 'audio.mp3');

    $.ajax({
      type: 'POST',
      url: '/',
      data: fd,
      cache: false,
      processData: false,
      contentType: false,
      enctype: 'multipart/form-data'
    }).done(function(data) {
      console.log(data);
    });
  }

}

Теперь преобразуем base64 String в двоичный поток на вашем сервере.

Создайте дополнительную информацию о том, как декодировать Base64 в python checkout этого сообщения. Python base64 декодирует