I'm a hack, so forgive me if this is obvious.

I'm embedding a chatbot in a static html page and using events in the chat to control the source file for a plyr.io html5 audio object. So, for example, a user might experience three different audio files playing through the same plyr instance.

I've got 90% of it figured out... and understand the final step, but can't get the code to work.

Currently, the player is initialized with this script, which updates the tag on the page. I'm assuming I need to edit this script:

<script src="https://cdn.plyr.io/3.5.6/plyr.js"></script>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const player = Plyr.setup('.js-player');
    });
</script>

The github instructions to access the object offer two options:

1. It says "The easiest way to access the Plyr object is to set the return value from your call to the constructor to a variable. For example:"

   const player = new Plyr('#player', { /* options */ });

2. "also can be accessed through any events:"

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

(from this point in the github docs: https://github.com/sampotts/plyr#object )

I understand enough to know the two methods they de scribe need to replace the "const" line in the vanilla initializing code, but little beyond that. And I'm just not getting it to work. For example, when I put player.play(); in the console, I get:

VM1471:1 Uncaught TypeError: player.play is not a function at :1:8

For the record, the specific function I'm trying to use to update the src is:

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

That's based on this: https://github.com/sampotts/plyr#the-source-setter

So... what I'm I missing?

THANK YOU!