Estoy trabajando en una pequeña aplicación que toma el audio del usuario y lo envía al servicio de back-end. Para esto, estoy usando Angular.
Hasta ahora, he creado una aplicación que toma el audio del usuario y lo envía, también puedo descargar el archivo y escucharme a mí mismo (para fines de prueba).
Ahora, cuando el audio del usuario es demasiado grande, digamos más de 10 segundos, me gustaría dividirlo en trozos. Tengo el código implementado para ello. Puedo obtener los fragmentos, pasarlos a la matriz y descargarlos todos. Pero cuando trato de reproducirlos, solo puedo reproducir el primer fragmento de audio, el resto ni siquiera puedo abrirlos.
Aquí es donde estoy cortando mi blob en sub-blobs.
if (this.duration > this.audioLimitBeforeChunking) { let numChunks = this.duration/this.audioLimitBeforeChunking; Math.floor(numChunks/1000); console.log('numChunks is: ', numChunks); for (let index = 0; index <= numChunks; index++) { var byteEnd = Math.ceil((size/numChunks) * (index + 1)); this.blobArray.push(blob.slice(this.byteIndex, byteEnd)); this.byteIndex += (byteEnd - this.byteIndex); } }Aquí es donde estoy descargando todos los sub-blobs.
for (let i = 0; i <= this.blobArray.length; i++) { this.url = URL.createObjectURL(this.blobArray[i]); this.audioFile = new File([this.blobArray[i]], "I_like_apples" + i + ".wav"); let postBody = { 'file': this.audioFile, 'user_token': '*******', 'reference_text': '******', 'model_id': '******' } console.log("inside sendData() component"); this.httpService.getStatus(postBody).subscribe( (response:any) => { console.log(response) } ) const a = document.createElement('a'); a.style.display = 'none'; a.href = this.url; a.download = 'test.wav'; document.body.appendChild(a); a.click(); } }Como mencioné anteriormente, solo puedo reproducir el primer sub-blob para el resto, ni siquiera puedo abrir el archivo de audio. ¿Alguna idea de lo que está pasando aquí? ¿Me estoy perdiendo de algo?
No puede simplemente dividir los archivos de audio en fragmentos como este y luego intentar usarlos en la reproducción a menos que incluya los metadatos del formato de audio .wav RIFF dentro de cada uno de los blobs. Estos metadatos permiten que el navegador interprete el archivo como un archivo de audio y luego reproduzca el audio. Es por eso que su primer blob funciona, pero el resto no, porque el primero incluye los metadatos originales del archivo.
Hacer esto desde cero no es precisamente trivial.
El encabezado de un archivo WAV (RIFF) tiene una longitud de 44 bytes y tiene el siguiente formato
Positions Sample Value Description 1 - 4 “RIFF” Marks the file as a riff file. Characters are each 1 byte long. 5 - 8 File size (integer) Size of the overall file - 8 bytes, in bytes (32-bit integer). Typically, you'd fill this in after creation. 9 -12 “WAVE” File Type Header. For our purposes, it always equals “WAVE”. 13-16 “fmt” Format chunk marker. Includes trailing null 17-20 16 Length of format data as listed above 21-22 1 Type of format (1 is PCM) - 2 byte integer 23-24 2 Number of Channels - 2 byte integer 25-28 44100 Sample Rate - 32 byte integer. Common values are 44100 (CD), 48000 (DAT). Sample Rate = Number of Samples per second, or Hertz. 29-32 176400 (Sample Rate * BitsPerSample * Channels) / 8. 33-34 4 (BitsPerSample * Channels) / 8.1 - 8 bit mono2 - 8 bit stereo/16 bit mono4 - 16 bit stereo 35-36 16 Bits per sample 37-40 “data” “data” chunk header. Marks the beginning of the data section. 41-44 File size (data) Size of the data section.
Recomendaría usar una biblioteca como https://github.com/rochars/wavefile para ayudarlo a generar estos blobs.
Alternativamente, podría tomar los primeros 44 bytes del formato de archivo original y anteponer esto al comienzo de todos sus blobs; sin embargo, no sé si esto realmente funcionaría.