Vue JS Blob to WAV

Question

Доброго времени суток.

Стоит задача: записать голос человека на фронтенде и передать данную запись в формате wave на сервер.

Основное непонимание связанно скорее с тем, что я не знаю что такое Blob. Ну то-есть абстрактные байты, а дальше всё.

Много гуглил, но четкого ответа так и не нашел.

<template>
  <div class="workspace">
    <textarea readonly ref="log"></textarea>
    <vue-record-audio @result="on_record_voice"/>
  </div>
</template>


on_record_voice: function (data) {
      // data var is already blob

      let reader = new window.FileReader();
      let blob = new Blob([data], {'type': 'audio/wav'});  // trying to make wave
      reader.readAsDataURL(blob);  // convert to base64
      reader.onloadend = () => {
        let result = reader.result.replace('data:audio/wav;base64,', '');

        let requestData = {
          'target': 'test',
          'method': 'record',
          'record': result
        }

        fetch('http://localhost:6003/benvenist/new_command', {
          method: 'POST',
          headers: {
            "Content-Type": "application/json"
          },
          body: JSON.stringify(requestData)
        }).then(
            response => response.json()
        ).then(
            success => console.log(success)
        ).catch(
            error => console.log(error)
        );
      }
    }

На сервер приходят данные, но точно не wave, потому что другие библиотеки считают эти данные битыми, хотя я все равно могу их прослушать на штатном медиаплеере.

Answer 1

Решилась данная проблема путем взаимодействия с библиотекой audiobuffer-to-wav:

on_record_voice: function (data) {
      function arrayBufferToBase64 ( buffer ) {
        let binary = '';
        let bytes = new Uint8Array( buffer );
        let len = bytes.byteLength;
        for (let i = 0; i < len; i++) {
          binary += String.fromCharCode( bytes[ i ] );
        }
        return btoa( binary );
      }
      let toWav = require('audiobuffer-to-wav')
      let context = new AudioContext()
      data.arrayBuffer().then((buffer) => {
        context.decodeAudioData(buffer, function (buffer) {
          let wav = toWav(buffer)

          let encodedWav = arrayBufferToBase64(wav);
          ...

БЛОГ НА HUSL

Vue JS Blob to WAV

Ответы (1 шт):