updated proposal - Githubissues

(function() {
    // Create the divs to display audio information
    function createAudioInfoDivs() {
        // Create "Currently Playing Audio" div
        const playingDiv = document.createElement('div');
        playingDiv.id = 'audio-info-playing';
        playingDiv.style.position = 'fixed';
        playingDiv.style.top = '10px';
        playingDiv.style.right = '10px';
        playingDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        playingDiv.style.color = 'white';
        playingDiv.style.padding = '10px';
        playingDiv.style.borderRadius = '5px';
        playingDiv.style.zIndex = '9999';
        playingDiv.style.maxWidth = '300px';
        playingDiv.style.fontFamily = 'Arial, sans-serif';
        document.body.appendChild(playingDiv);

        // Create "Finished Audio" div (to the right of the "Currently Playing" div)
        const finishedDiv = document.createElement('div');
        finishedDiv.id = 'audio-info-finished';
        finishedDiv.style.position = 'fixed';
        finishedDiv.style.top = '10px';
        finishedDiv.style.right = '320px';  // Place to the right of the playing div
        finishedDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        finishedDiv.style.color = 'white';
        finishedDiv.style.padding = '10px';
        finishedDiv.style.borderRadius = '5px';
        finishedDiv.style.zIndex = '9999';
        finishedDiv.style.maxWidth = '300px';
        finishedDiv.style.fontFamily = 'Arial, sans-serif';
        document.body.appendChild(finishedDiv);
    }

    // Track currently playing and finished audio nodes
    let audioNodes = [];
    let finishedAudioNodes = [];

    // Override AudioContext's createBufferSource method to monitor audio playback
    const originalCreateBufferSource = AudioContext.prototype.createBufferSource;

    AudioContext.prototype.createBufferSource = function() {
        const sourceNode = originalCreateBufferSource.apply(this, arguments);

        // When the source node starts, we add it to our tracking list
        const startOriginal = sourceNode.start;
        sourceNode.start = function() {
            // Track the node and its playback
            audioNodes.push({
                node: sourceNode,
                filename: 'Unknown'
            });

            // If the sourceNode has a buffer with a URL, try to extract the filename
            if (sourceNode.buffer && sourceNode.buffer.url) {
                const url = new URL(sourceNode.buffer.url);
                const filename = url.pathname.split('/').pop();
                audioNodes[audioNodes.length - 1].filename = filename;
            }

            updateAudioInfo();
            return startOriginal.apply(this, arguments);
        };

        // Listen for when playback ends and move the node to finished audio list
        sourceNode.onended = function() {
            audioNodes = audioNodes.filter(item => item.node !== sourceNode);
            finishedAudioNodes.push({
                node: sourceNode,
                filename: 'Unknown'
            });

            if (sourceNode.buffer && sourceNode.buffer.url) {
                const url = new URL(sourceNode.buffer.url);
                const filename = url.pathname.split('/').pop();
                finishedAudioNodes[finishedAudioNodes.length - 1].filename = filename;
            }

            updateAudioInfo();
            updateFinishedAudioInfo();
        };

        return sourceNode;
    };

    // Function to update the UI with current audio info
    function updateAudioInfo() {
        const playingDiv = document.getElementById('audio-info-playing');
        if (!playingDiv) return;

        let html = '<h4>Currently Playing Audio:</h4>';
        if (audioNodes.length > 0) {
            audioNodes.forEach((item, index) => {
                html += `
                    <ul>
                        <li><strong>${item.filename}</strong></li>
                        <li>Duration: ${(item.node.buffer ? item.node.buffer.duration : 'N/A')} seconds</li>
                        <li>Status: Playing</li>
                    </ul>
                `;
            });
        } else {
            html += '<p>No audio is playing.</p>';
        }

        playingDiv.innerHTML = html;
    }

    // Function to update the UI with finished audio info
    function updateFinishedAudioInfo() {
        const finishedDiv = document.getElementById('audio-info-finished');
        if (!finishedDiv) return;

        let html = '<h4>Finished Audio:</h4>';
        if (finishedAudioNodes.length > 0) {
            finishedAudioNodes.forEach((item, index) => {
                html += `
                    <ul>
                        <li><strong>${item.filename}</strong></li>
                        <li>Duration: ${(item.node.buffer ? item.node.buffer.duration : 'N/A')} seconds</li>
                        <li>Status: Finished</li>
                    </ul>
                `;
            });
        } else {
            html += '<p>No audio has finished yet.</p>';
        }

        finishedDiv.innerHTML = html;
    }

    // Create the info divs
    createAudioInfoDivs();
})();

(function() {
    // Create the divs to display audio information
    function createAudioInfoDivs() {
        // Create "Currently Playing Audio" div
        const playingDiv = document.createElement('div');
        playingDiv.id = 'audio-info-playing';
        playingDiv.style.position = 'fixed';
        playingDiv.style.top = '10px';
        playingDiv.style.right = '10px';
        playingDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        playingDiv.style.color = 'white';
        playingDiv.style.padding = '10px';
        playingDiv.style.borderRadius = '5px';
        playingDiv.style.zIndex = '9999';
        playingDiv.style.maxWidth = '300px';
        playingDiv.style.fontFamily = 'Arial, sans-serif';
        document.body.appendChild(playingDiv);

        // Create "Finished Audio" div
        const finishedDiv = document.createElement('div');
        finishedDiv.id = 'audio-info-finished';
        finishedDiv.style.position = 'fixed';
        finishedDiv.style.top = '10px';
        finishedDiv.style.right = '320px';
        finishedDiv.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
        finishedDiv.style.color = 'white';
        finishedDiv.style.padding = '10px';
        finishedDiv.style.borderRadius = '5px';
        finishedDiv.style.zIndex = '9999';
        finishedDiv.style.maxWidth = '300px';
        finishedDiv.style.fontFamily = 'Arial, sans-serif';
        document.body.appendChild(finishedDiv);
    }

    // Track currently playing and finished audio nodes
    let audioNodes = [];
    let finishedAudioNodes = [];

    // Override AudioContext's createBufferSource method to monitor audio playback
    const originalCreateBufferSource = AudioContext.prototype.createBufferSource;

    AudioContext.prototype.createBufferSource = function(filename = 'Unknown') {
        const sourceNode = originalCreateBufferSource.apply(this, arguments);

        // When the source node starts, we add it to our tracking list
        const startOriginal = sourceNode.start;
        sourceNode.start = function() {
            // Track the node and its playback, using the provided filename
            audioNodes.push({
                node: sourceNode,
                filename: filename
            });

            updateAudioInfo();
            return startOriginal.apply(this, arguments);
        };

        // Listen for when playback ends and move the node to finished audio list
        sourceNode.onended = function() {
            audioNodes = audioNodes.filter(item => item.node !== sourceNode);

            // Move the audio to finished list, keeping the filename
            finishedAudioNodes.push({
                node: sourceNode,
                filename: filename
            });

            updateAudioInfo();
            updateFinishedAudioInfo();
        };

        return sourceNode;
    };

    // Function to create a list item template
    function createListItem(item, status) {
        return `
            <ul>
                <li><strong>${item.filename}</strong></li>
                <li>Duration: ${(item.node.buffer ? item.node.buffer.duration.toFixed(2) : 'N/A')} seconds</li>
                <li>Status: ${status}</li>
            </ul>
        `;
    }

    // Function to update the UI with current audio info
    function updateAudioInfo() {
        const playingDiv = document.getElementById('audio-info-playing');
        if (!playingDiv) return;

        let html = '<h4>Currently Playing Audio:</h4>';
        if (audioNodes.length > 0) {
            audioNodes.forEach(item => {
                html += createListItem(item, 'Playing');
            });
        } else {
            html += '<p>No audio is playing.</p>';
        }

        playingDiv.innerHTML = html;
    }

    // Function to update the UI with finished audio info
    function updateFinishedAudioInfo() {
        const finishedDiv = document.getElementById('audio-info-finished');
        if (!finishedDiv) return;

        let html = '<h4>Finished Audio:</h4>';
        if (finishedAudioNodes.length > 0) {
            finishedAudioNodes.forEach(item => {
                html += createListItem(item, 'Finished');
            });
        } else {
            html += '<p>No audio has finished yet.</p>';
        }

        finishedDiv.innerHTML = html;
    }

    // Create the info divs
    createAudioInfoDivs();
})();

torchiad / howler-sound-ui

updated proposal #1