captbaritone / webamp

Winamp 2 reimplemented for the browser
https://webamp.org
MIT License
10.21k stars 688 forks source link

How would I go about using the track tag to have multiple files? #1061

Closed MarshmelloSUCKS closed 3 years ago

MarshmelloSUCKS commented 3 years ago

I'm trying to set up a Webamp player for my site to handle playback of my two Icecast streams, but I can't figure out how to properly use the "track" tag. I'd also want to use it for multiple streams. Here's my current setup:

<div id="app" style="height: 100vh">
        <!-- Webamp will attempt to center itself within this div -->
    </div>
    <script src="https://unpkg.com/webamp@1.4.2/built/webamp.bundle.min.js"></script>
    <script>
        const Webamp = window.Webamp;
        const webamp = new Webamp();
        const track = {
    // Either `url` or `blob` must be specified
    // Note: This URL must be served the with correct CORs headers.
    url: 'https://streamlink:8443/mount',

    // Optional. Name to be used until ID3 tags can be resolved.
    // If the track has a `url`, and this property is not given,
    // the filename will be used instead.
    defaultName: 'streamname'
};
        // Returns a promise indicating when it's done loading.
        webamp.renderWhenReady(document.getElementById('app'));
    </script>

When I have an initialTrack in the const webamp = new Webamp(); line, it loads the initialTrack but not any of the other tracks.

MarshmelloSUCKS commented 3 years ago

Joined the Discord server and sorted this out with the dev, I wound up doing this:

<!--Start Webamp Player-->
        <div id="app" style="width: 275px; height: 350px; margin-left: 2px;">
            <!-- Webamp will attempt to center itself within this div -->
            </div>
            <script src="webamp.bundle.min.js"></script>
            <script>
            const Webamp = window.Webamp;
            const webamp = new Webamp({
                initialTracks: [
                    {
                    metaData: {title: "stream1"},
                    url: "https://server:8443/mount",
                    duration: 0.000,
                    },
                    {
                    metaData: {title: "stream2"},
                    url: "https://server:8443/mount2",
                    duration: 0.000,
                    },
                ],
            });

            // Returns a promise indicating when it's done loading.
            webamp.renderWhenReady(document.getElementById('app'));
            </script>
            <!--End Webamp Player-->

Doesn't seem to support Icecast metadata but it works.