How can I use external JavaScript library into dynamically generated DOM elements?

[mahadeer]

Imagine my application as a music player, where I've crafted the entire user interface using Leptos. Upon page load, I initiate an API call to retrieve a collection of songs, which I intend to present as album art in the form of cards. Upon clicking the play button on a card, my intention is to seamlessly integrate a music player into the page using https://github.com/goldfire/howler.js/.

I wanted to call a javascript function,

var sound = new Howl({
  src: ['{mp3Url}'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    console.log('Finished!');
  }
});

[mahadeer]

Consider i have created a Player wrapper and wanted to provide my DOM and list of url as parameter after the api is resolved.

[mahadeer]

Got an answer from #1206 (comment)