Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

115
Vistas
Cómo reproducir audio cargado a través de la entrada de archivos

Quiero cargar un archivo de audio a través del lector de archivos de entrada y luego poder reproducirlo...

Este es el proceso de creación de un archivo blob y asignación de la fuente de audio a este blob:

 fileInput.on('change', readFile); function readFile(e) { const input = e.target; if(input.files && input.files[0]) { const reader = new FileReader(); reader.onload = (e) => { const binaryData = e.target.result; const binary = convertDataURIToBinary(binaryData); const blob = new Blob(binary, {type: input.files[0].type }); console.log('inserting blobXX', blob); recordedAudioComponent.src = URL.createObjectURL(blob); data.instructAudios[component] = blob; console.log('recordedAudioComponent.src', recordedAudioComponent.src); } reader.readAsDataURL(input.files[0]); } }

Y aquí está el resultado del código anterior en la consola:

ingrese la descripción de la imagen aquí

Ahora estoy tratando de reproducir el componente de audio recordedAudioComponent , que es una etiqueta de audio con la fuente, ¿verdad?

 const recordedAudioComponent = document.getElementById(`recordedAudio-instruct-${component}`); console.log(recordedAudioComponent) recordedAudioComponent.play();

Y aquí está el error que produce:

ingrese la descripción de la imagen aquí

¿Cómo puedo arreglar esto y reproducir el audio?

EDITAR: Aquí está la función para obtener el blob en el primer código:

 var BASE64_MARKER = ';base64,'; function convertDataURIToBinary(dataURI) { var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length; var base64 = dataURI.substring(base64Index); var raw = window.atob(base64); var rawLength = raw.length; var array = new Uint8Array(new ArrayBuffer(rawLength)); for(i = 0; i < rawLength; i++) { array[i] = raw.charCodeAt(i); } return array; }
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

No necesita ninguna conversión, blob es bastante similar al archivo en sí y el método URL.createObjectURL acepta el archivo como argumento, todo lo que necesita hacer para reproducir el archivo de audio desde su navegador es establecer el atributo src como la url creado, algo como esto:

 <body> <input style="display: block;" type="file" onchange="loadAudioFile(this)"> <audio src=" " id="track" controls> </audio> <script> function loadAudioFile(e) { const url = URL.createObjectURL(e.files[0]); document.getElementById('track').setAttribute('src', url); } </script> </body>

about 4 years ago · Juan Pablo Isaza Denunciar

0

<input type="file" name="fileInput" id="fileInput"> <script> const fileInput = document.querySelector('#fileInput'); fileInput.onchange = readFile; /** @type {AudioNode} */ const audio = document.createElement( 'audio' ); function readFile(e) { const input = e.target; if(input.files && input.files[0]) { const reader = new FileReader(); reader.onloadend = function (e){ audio.src = e.target.result; audio.play(); } reader.readAsDataURL(input.files[0]); } } </body>
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda