在 svelte 中使用第三方库（picobel.js）

Question

我正在尝试在一个精简的项目中使用 picobel.js 音频播放器。该库为 html5 音频播放器创建可设置样式的 html 元素。

它最初可以工作，但是当我更改音频元素的源时，picobel 播放器不会更新（播放时间和持续时间）。多次更改源后，它只是显示“加载音频时出错”。我尝试了一些操作，但没有成功（不确定我是否使用正确......）。我尝试在源更改时销毁/重新创建组件，但这根本不起作用（甚至在 svelte5 中使用 mount / unmoun 进行尝试），之前的实例未清理，并且我有 picobel 播放器的多个实例）

接下来我尝试通过 id 手动将其安装到特定的 div，第一次工作，删除 div 清理干净，但随后 div 消失了，我无法重新加载 picobel 播放器：

<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>

而且我认为这不是正确的方法，对我来说似乎真的是错误的。

解决问题的正确方法是什么？

1. 行动
2. 安装/卸载
3. 在 svelte 中重新创建 picobel.js 的代码？
4. 抛弃 svelte 并使用普通 js（在我看来最合理）

Answer 1

这是一个非常不灵活的库，不建议使用它。 它以更难处理的方式扰乱 DOM，并且几乎没有 API 来影响行为。

鉴于此，需要与

audio

元素进行大量手动交互。为此，将使用一个操作，该操作可以处理清理并更新元素，例如轨道发生变化。

import picobel from "picobel";

const tracks = [...]; // { src, title, artist } objects
let index = 0;
$: current = tracks[index];

function player(node, track) {
    const audio = document.createElement('audio');
    audio.setAttribute('controls', '');
    node.append(audio);
    picobel();

    function changeTrack(track) {
        const paused = audio.paused;
        audio.src = track.src;
        audio.setAttribute('title', track.title);
        audio.setAttribute('data-artist', track.artist);
        // TODO: reset play head while paused

        if (!paused) audio.play();
    }

    changeTrack(track);

    return {
        update: changeTrack,
        destroy() { audio.pause(); }
    };
}

<div use:player={current}></div>

REPL