Streambeats Dropbox audio preview snippet

README.md

Streambeats Dropbox audio preview snippet

Why?

Harris (https://twitter.com/HarrisHeller) has done a remarkable job with Streambeats (https://www.streambeats.com) and the massive library of high quality music for your streaming needs. The library was so vast that I didn't want to just download everything and listen to it locally, so instead I did what every programmer would do. I did a small code snippet to add a preview pane to the Dropbox experience.

How?

1. Copy the snippet below
2. Enter a folder in Dropbox containing music files; e.g. https://www.dropbox.com/sh/1cgxqyptl2jq8f5/AAAeQ1i1rwAV6zIDNN2VHJY6a/8.%20White?dl=0&subfolder_nav_tracking=1
3. Switch to table view in the folder view
4. Press CTRL+SHIFT+I (Windows) / CMD+SHIFT+I (Mac) to open Chrome Developer Tools
5. Paste in the snippet on the console and press Enter
6. Click a music file in the folder to get a preview below

Streambeat music libraries on Dropbox:

• Lofi: https://www.dropbox.com/sh/1cgxqyptl2jq8f5/AAAmcJ8o9N_yoAIpRmz0aASfa?dl=0
• EDM: https://www.dropbox.com/sh/hasxl12qzwp3i0i/AABPEhAlGjAMBAntxsvTFx7oa?dl=0
• SynthWave: https://www.dropbox.com/sh/bm07121lrzt0y4t/AAAywPkxo2loGGrZK_vBLx-wa?dl=0
• Hiphop: https://www.dropbox.com/sh/e2rc996buhxub5h/AADTLiHGaz60NSiE1c5Ab_9Fa?dl=0

Disclaimer

This is just a prototype, but could very easily be converted into a Chrome extension for automatic application to the Streambeat Dropbox-folders. @Harris, if you're seeing this please let me know if you're interested in this kind of thing on ah@allora.dk :)

prototype.js

    const IFRAME_ID = "streambeats-player-iframe";
    let current = null;    
    let framer = document.getElementById(IFRAME_ID);

    if(!framer) {
        const framerObject = document.createElement("iframe");
        framerObject.src = "about:blank";
        framerObject.id = IFRAME_ID;
        framerObject.frameborder = 0;
        framerObject.style = "border-top: 1px solid #ddd; background: #eee; position: fixed; bottom: 0; left: 0; width: 100%; height: 150px";
        document.body.appendChild(framerObject);
        framer = document.getElementById(IFRAME_ID);
        document.body.style = "margin-bottom: 170px;"
    }

    const startPlaying = link => {
        link.style = "background: rgba(0,0,255,0.1);";
        if(current !== link) current = link;
    }

    const stopPlaying = () => {
        if(!current) return;
        current.style = "";
        current = null;
    }

    const delay = async ms => await new Promise(r => setTimeout(r, ms));

    const playerLoaded = event => {
        delay(2000).then(() => {
            const frameWindow = framer.contentWindow;
            const audioTag = frameWindow.document.getElementsByTagName("audio");
            const audioFile = audioTag && audioTag.length > 0 ? audioTag[0] : null;
            if(!audioFile) return alert("Unable to play file.");
            audioFile.play();  
        })
    }

    const clickHandler = event => {
        event.preventDefault();
        event.stopPropagation();

        const url = event.target.href;

        if(framer && url) {
            framer.src = url;
            framer.addEventListener("load", playerLoaded);

            stopPlaying();
            startPlaying(event.target);
        }
    }

    document.querySelectorAll("tbody a, .sl-grid-body a").forEach(link => {
        if(!link) return;
        link.addEventListener("click", clickHandler);
    });