Soy un hack, así que perdóname si esto es obvio.

Estoy incrustando un chatbot en una página html estática y usando eventos en el chat para controlar el archivo fuente para un objeto de audio plyr.io html5. Entonces, por ejemplo, un usuario puede experimentar la reproducción de tres archivos de audio diferentes a través de la misma instancia de plyr.

Tengo el 90% resuelto... y entiendo el paso final, pero no puedo hacer que el código funcione.

Actualmente, el reproductor se inicializa con este script, que actualiza la etiqueta en la página. Supongo que necesito editar este script:

 <script src="https://cdn.plyr.io/3.5.6/plyr.js"></script> <script> document.addEventListener('DOMContentLoaded', () => { const player = Plyr.setup('.js-player'); }); </script>

Las instrucciones de github para acceder al objeto ofrecen dos opciones:

1. Dice "La forma más fácil de acceder al objeto Plyr es establecer el valor de retorno de su llamada al constructor a una variable. Por ejemplo:"

   const jugador = new Plyr('#jugador', { /* opciones */ });

2. "también se puede acceder a través de cualquier evento:"

   element.addEventListener('ready', event => { const player = event.detail.plyr; });

(desde este punto en los documentos de github: https://github.com/sampotts/plyr#object )

Entiendo lo suficiente como para saber que los dos métodos que describen necesitan reemplazar la línea "const" en el código de inicialización de vainilla, pero poco más allá de eso. Y simplemente no estoy haciendo que funcione. Por ejemplo, cuando pongo player.play(); en la consola me sale:

VM1471: 1 TypeError no detectado: player.play no es una función en: 1: 8

Para que conste, la función específica que estoy tratando de usar para actualizar el src es:

 player.source = { type: 'audio', sources: [ { src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3', type: 'audio/mp3', }, ], };

Eso se basa en esto: https://github.com/sampotts/plyr#the-source-setter

Entonces... ¿qué me estoy perdiendo?

¡GRACIAS!