I’m trying to use picobel.js audio player in a svelte project. The library creates stylable html elements for the html5 audio player.

It works initially but when I change the source of the audio element the picobel player isn’t updated (playback time and duration). After changing the source a few more times it just says “error loading audio”. I tried actions but I don’t it didn’t work (not sure if I used it right..). I tried destroying / recreating the component on source change but that doesn’t work at all (even tried in svelte5 with mount / unmoun), the previous instance isnt cleaned up and I have multiple instances of the picobel player)

Next I tried manually mounting it to a specific div by id, works the first time, removing the div cleans up but then the div is gone and I can’t reload the picobel player:

<script>
    import { mount, unmount } from 'svelte';
    import { playlistObject, playlistItems } from '$lib/playlist.js';
    import { authHeader, userId, jellyUrl, apiKey } from '$lib/jellyfin.js';
    import { audioObject, audioPlayer } from '$lib/audio.js';
    let loaded = false;
    let cvsdfge;
    $: $audioObject, LoadAudio();
    async function LoadAudio() {
        if (!$audioObject) return;

        if (loaded) {
            unmount(cvsdfge);
            let as = document.querySelector('#myDiv');
            as.remove();
        }
        loaded = true;
        let tt = document.appendChild(document.createElement('div'));
        tt.id = 'myDiv';
        cvsdfge = mount(Player, { target: document.querySelector('#myDiv') });
    }


</script>

<div id="myDiv"></div>

And I don’t think that’s the right way to go about it, seems really wrong to me.

What’s the right way to solve the issue?

1. Actions
2. Mount / Unmount
3. recreate the code of picobel.js in svelte?
4. throw out svelte and use plain js (seems to me the most reasonable)