Via Javascript generator audio/video object

[emresaracoglu]

Hi,

I am creating the audio object with the data received with Ajax, but the created object appears like the browser's default player. How can I display the audio/video objects I created with Javascript with Plyr?

const player = new Plyr(document.querySelector('.player'));
for (let i = 0; i < musics.length; i++) { 
    document.getElementById('songList').innerHTML += '<audio controls class="player" data-title="Song name"><source src="https://example.com/' + musics[i].vr + '" type="audio/ogg"></audio>';
}

Thank you!

[erikt9]

You are doing things backwards. Create the audio elements first, and then enhance them with new Plyr(...). As written, document.querySelector('.player') sees nothing as no matching elements exist at the time it's called.