Estoy tratando de aprender la API de audio web del tutorial de MDN , pero incluso el ejemplo más básico, sin síntesis modular, solo reproduciendo un archivo mp3 simple, no parece funcionar en mi extremo.
Puedo ver que el valor del conjunto de datos se cambia en la consola, la reproducción/pausa en los controles cambia de estado, y en Firefox y Safari (pero no en Chrome) el localizador de pistas incluso avanza y el icono de "reproducción" se muestra en la pestaña del navegador.
(He agregado el atributo de controls
a la etiqueta de audio
solo para tener un indicador de progreso visible).
También puedo descargar el archivo desde los controles DOM y reproducirlo usando el sistema operativo, y lo probé con tres archivos MP3 diferentes. Los parlantes de la computadora obviamente están funcionando.
Por cierto, la creación de audio con osciladores y el objeto AudioContext
funciona bien.
Estoy fuera de las ideas.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <audio controls src="song.mp3"></audio> <button data-playing="false" role="switch" aria-checked="false"> <span>Play/Pause</span> </button> <script src="audio.js"></script> </body> </html>
'use-strict' const aCtx = new AudioContext(); const el = document.querySelector('audio'); const track = aCtx.createMediaElementSource(el); const button = document.querySelector('button'); button.addEventListener('click', function() { console.log(this); if (aCtx.state === 'suspended') { aCtx.resume(); } if (this.dataset.playing === 'false') { el.play(); this.dataset.playing = 'true'; } else { el.pause(); this.dataset.playing = 'false'; } }, false);