index.html

<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <script>
        class LibOpenmptNode extends AudioWorkletNode {
            constructor(ctx, options) {
                const defaultOptions = {
                    numberOfInputs: 0,
                    numberOfOutputs: 1,
                    outputChannelCount: [2]
                };
                Object.assign(defaultOptions, options);
                super(ctx, 'libopenmpt-processor', defaultOptions);
            }

            setPosition(pos) {
                this.port.postMessage({setPosition: 0});
            }

            stop() {
                this.port.postMessage({songData: new ArrayBuffer(0)});
            }
        }

        let node;
        let ctx;

        async function init() {
            ctx = new AudioContext();

            await ctx.audioWorklet.addModule('mpt-worklet.js');

            node = new LibOpenmptNode(ctx);
            node.connect(ctx.destination);

            node.port.onmessage = (msg) => {
                if (msg.data.position != null) {
                    document.getElementById('position').innerText = Math.round(msg.data.position);
                }
            };

            setInterval(() => {
                node.port.postMessage({getPosition: 1});
            }, 1000);
        }

        async function play() {
            await initPromise;

            ctx.resume();
            const response = await fetch("milksun.it");
            const butterfl = await response.arrayBuffer();

            node.port.postMessage({songData: butterfl, setRepeatCount: -1});
        }

        const initPromise = init();

    </script>
    <button onclick="play()">Play</button>
    <button onclick="node.setPosition(0)">Restart</button>
    <button onclick="node.stop();">Stop</button>
    <p>Position: <span id="position"></span></p>
</body>

</html>