I have a particular use case of amplitudejs, and i have somes difficults…
I use the 3.5.2 version
I need to load severals independants players on a page, and i need each player has its one amplitude instance.
You can find a exemple source code here : GitHub - ErnadoO/amplitude-demo
The workflow in details: On one page, our customers add one or severals “tag” like this :
<div class="rwm-podcast-player" data-pid="1eb618ae-c6f7-6172-b48d-f98bdb3bb4ce"></div>
and at the bottom, they need to include a external js file (init.js) from our website. This file include the amplitude js library and find each tag (
.rwm-podcast-player) and include an external js file (like podcast-1eb618ae-c6f7-6172-b48d-f98bdb3bb4ce.js) by tag/player in the DOM
This file contains the player html code, the amplitude config with song list, callback events, and many more (the code on my github is very simplified). This file is dynamicaly build and depend of customer configuration (player size, colors, event, etc…) in our backoffice.
My problem is that each Player share the same Amplitude object loaded by the init.js and each call of Amplitude.init() in this files impact all displayed Players.
You can see this side effect here : https://www.erwan-projects.fr/amplitude-demo/ When the second Player is loaded, the first player get his metadata, and a play click launch play on both.
I even tried to initialize Amplitude in the init.js file and each Player file call the addPlaylist() function (with of course data-amplitude-playlist attribute); it’s work well but i can’t choose this solution, becasue each Player has it’s own configuration (custom callback function); i can’t share the same Amplitude instance.
I come here to know if you guys have a solution for create/use an instance of Amplitude by player. I’m not a js developper. If not, maybe add a feature to can specify a DOM target in the settings array (like sugered here : Allow multiple player on same webpage · Issue #189 · serversideup/amplitudejs · GitHub) ?
i would be eternally grateful to you