Hola, estoy creando una página de carga simple donde el usuario carga sus archivos locales y los reproduce. Durante una hora, no estoy subiendo al servidor, solo quiero crear una entrada de archivo y luego reproducir el archivo de audio con Tone.js si es posible.
Estoy usando para esta biblioteca P5.js de prueba y el marco de audio Tone.js, el siguiente código:
let inputFile, bttPlayFile; let files; window.AudioContext = window.AudioContext || window.webkitAudioContext; let context = new Tone.Context(); let source; function setup() { inputFile = createFileInput(uploadTrack); bttPlayFile = createButton('play'); bttPlayFile.mousePressed(tooglePlay); } function playSound(arraybuffer) { context.decodeAudioData(arraybuffer, function(buf) { source = new Tone.BufferSource(); source.connect(context).toDestinattion(); source.Tone.Buffer = buf; source.start(0); }); } function selectedFile(evt) { files = evt.target.files; playFile(files[0]); } function playFile(file) { let reader = new FileReader(); reader.onload = function(e) { console.log(e.target.result); playSound(e.target.result); } reader.readAsArrayBuffer(file); } function uploadTrack() { inputFile.changed(selectedFile, false); } function tooglePlay() { Tone.Transport.start(); } <!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.32/Tone.js" integrity="sha512-USKCQh+O8BX/a2K06xPNTwduhmQvN/m9FhkR7PRysCRlPoqIItl7Qz3xVTZC/oIHe6g5XvnLHDUgGpRMZZTmFQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> </head> <body> <script src="sketch.js"></script> </body> </html>Por el momento, no pasa nada y quiero entender por qué y cómo proceder con esto. ¡Gracias!
Si abre la consola de su navegador, debería ver una advertencia.
El AudioContext está "suspendido". Invoque Tone.start() desde una acción del usuario para iniciar el audio.
Creo que funcionará si llama a Tone.start() en el controlador de clic de su botón "reproducir" antes de cargar y decodificar el archivo de audio seleccionado.
No está relacionado con su pregunta, pero debería ser seguro eliminar window.AudioContext = window.AudioContext || window.webkitAudioContext de su código. Tone.js usa un contexto de audio estandarizado internamente que debería manejar esto por usted.