☰

Suno AI Download Button

Adds a download button to Suno.ai audio player

// ==UserScript==
// @name         Suno AI Download Button
// @namespace    http://tampermonkey.net/
// @version      0.2.3
// @description  Adds a download button to Suno.ai audio player
// @author       Lyte
// @match        https://app.suno.ai/
// @match        https://suno.com
// @icon         https://www.google.com/s2/favicons?sz=64&domain=suno.ai
// @grant        none
// @license      CC-BY 4.0; https://creativecommons.org/licenses/by/4.0/
// ==/UserScript==

(function() {
    'use strict';

    function addDownloadButton() {
        const selector = 'body > div.css-fhtuey > div.css-bhm5u7 > div > div.css-l9hfgy > div.css-18kfqph > div.chakra-stack.css-18y9vo3';
        const buttonsContainer = document.querySelector(selector);

        if (buttonsContainer) {
            const audioElement = document.querySelector('audio:not([src*="silence.mp3"])');

            if (audioElement && audioElement.src) {
                const audioLink = audioElement.src;

                const existingDownloadButton = buttonsContainer.querySelector('.download-button');
                if (existingDownloadButton) {
                    existingDownloadButton.setAttribute('data-audio-link', audioLink);
                } else {
                    const downloadButton = document.createElement('button');
                    downloadButton.setAttribute('data-theme', 'dark');
                    downloadButton.setAttribute('type', 'button');
                    downloadButton.setAttribute('class', 'chakra-button css-oj2z91 download-button');
                    downloadButton.setAttribute('aria-label', 'Download');
                    downloadButton.setAttribute('data-audio-link', audioLink);
                    downloadButton.innerHTML = `
                        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 512 512" aria-hidden="true" focusable="false" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
                            <path d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></path>
                        </svg>`;

                    downloadButton.addEventListener('click', function() {
                        const audioLink = this.getAttribute('data-audio-link');
                        window.open(audioLink, '_blank');
                    });

                    buttonsContainer.appendChild(downloadButton);
                }
            } else {
                const existingDownloadButton = buttonsContainer.querySelector('.download-button');
                if (existingDownloadButton) {
                    existingDownloadButton.remove();
                }
            }
        }
    }

    const observer = new MutationObserver(function(mutations) {
        addDownloadButton();
    });

    const config = { childList: true, subtree: true };
    observer.observe(document.body, config);

    addDownloadButton();
})();