☰

Greasy Fork is available in English.

Youtube Audio Mode

Listen to only the audio on YouTube without loading the video.

// ==UserScript==
// @name        Youtube Audio Mode
// @description Listen to only the audio on YouTube without loading the video.
// @version     0.2.8
// @author      Burn
// @namespace   https://openuserjs.org/users/burn
// @copyright   2022, burn (https://openuserjs.org/users/burn)
// @include     https://www.youtube.com/*
// @match       https://www.youtube.com/*
// @license     MIT
// @run-at      document-end
// @grant       GM.setValue
// @grant       GM.getValue
// @noframes
// ==/UserScript==

/*

PLEASE NOTE

The original version of this userscript is written by Teaqu
and it's published here: https://github.com/teaqu/youtube-audio-mode

*/

(async function(open, originalFetch) {
    const DBG = false;
    let myLog = (msg) => {
        DBG && console.log(GM_info.script.name + " | " + msg);
    };

    window.addEventListener("yt-navigate-finish", audioMode);
    window.onYouTubeIframeAPIReady = await audioMode();

    async function audioMode() {
        if (location.pathname == "/watch") {
            let video = document.getElementsByTagName("video")[0];
            let audioMode = await GM.getValue("ytAudioMode");
            await addToMenu(audioMode);
            if (audioMode) {
                setPoster(video, ["maxres", "hq", "sd"]);
                watchFetchStream(video);
            } else { myLog("audiomode is disabled"); }
        }
    }

    function watchFetchStream(video) {
        const constantMock = originalFetch;
        unsafeWindow.fetch = function() {
            return new Promise((resolve, reject) => {
                constantMock.apply(this, arguments)
                .then((response) => {
                    if (response.url.indexOf("mime=audio") > -1) { // && response.type != "cors"){
                        !video.paused && video.pause();
                        myLog("current time after pausing video: " + video.currentTime);
                        let currentTimeStamp = video.currentTime;
                        video.src = response.url.split("&range")[0];
                        video.currentTime = currentTimeStamp;
                        myLog("current time before resuming video playback: " + video.currentTime);
                        video.paused && video.play();
                    }
                    resolve(response);
                })
                .catch((error) => {
                    reject(response);
                })
            });
        }
    }

    // Add audio mode to the settings menu
    async function addToMenu(audioMode) {
        let panel = document.getElementsByClassName("ytp-panel-menu")[0];
        if (!panel.innerHTML.includes("Audio Mode")) {
            panel.innerHTML += `
            <div class="ytp-menuitem"
                aria-checked="${audioMode}"
                id="audio-mode">
                <div class="ytp-menuitem-icon"></div>
                <div class="ytp-menuitem-label">Audio Mode</div>
                <div class="ytp-menuitem-content">
                    <div class="ytp-menuitem-toggle-checkbox">
                </div>
            </div>`;

            // Toggle audio mode on or off
            let audioToggle = document.getElementById("audio-mode");
            let videoElm = document.getElementsByTagName("video")[0];
            audioToggle.onclick = async function() {
                let audioMode = ! await GM.getValue("ytAudioMode");
                this.setAttribute("aria-checked", audioMode);
                GM.setValue("ytAudioMode", audioMode);
                location.href = location.protocol
                    + "//" + location.hostname
                    + location.pathname
                    + setGetVar("t", parseInt(videoElm.currentTime) + "s");
            }
        }
    }

    // Set the video poster from thumbnails with the best avaliable format
    // https://developers.google.com/youtube/v3/docs/thumbnails
    async function setPoster(video, fmts) {
        let img = new Image();
        let videoId = location.search.match(/v=(.+?)(&|$)/)[1];
        img.src = `//i.ytimg.com/vi/${videoId}/${fmts.shift()}default.jpg`
        img.onload = function() {
            myLog("thumbnail loaded");
            // A height 90 is YouTube "not found" image.
            if (img.height <= 90) {
                myLog("thumbnail should be youtube not found image");
                setPoster(video, fmts);
            } else {
                myLog("thumbnail found, now applying css rule to display it");
                video.style.background = `url(${img.src}) no-repeat center`;
                video.style.backgroundSize = "contain";
            }
        };
    }

    function setGetVar(name, value) {
        let vars = getVars();
        vars[name] = value;
        let strSearch = "?";
        for (let n in vars)
            strSearch += n + "=" + vars[n] + "&";
        return strSearch.substring(0, strSearch.length - 1);
    }
    function getVars() {
        // https://stackoverflow.com/questions/12049620/how-to-get-get-variables-value-in-javascript#12049703
        let GET = [];
        window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(a,name,value) {GET[name] = value;});
        return GET;
    }
})(XMLHttpRequest.prototype.open, window.fetch || unsafeWindow.fetch);