{"product_id":"song-placeholder-last-unicorn-tomex","title":"Letztes Einhorn - TOMEX ","description":"\u003cdiv class=\"notranslate\"\u003e\n\u003cdiv id=\"custom-audio-container\" style=\"\n    \/* Main container styling for dark background *\/\n    background-color: #1a1a1a; \n    border-radius: 8px; \n    padding: 10px 15px; \n    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); \n    user-select: none; \n    pointer-events: auto;\n\" oncontextmenu=\"return false;\"\u003e\n    \n    \u003caudio id=\"previewPlayer\" preload=\"auto\" style=\"display: none;\"\u003e\n        Dein Browser unterstützt kein Audioelement.\n    \u003c\/audio\u003e\n\n    \u003cdiv style=\"display: flex; align-items: center; gap: 10px;\"\u003e\n        \n        \u003cbutton id=\"playPauseBtn\" style=\"\n            background-color: #4a4a4a; \n            border: none; \n            color: white; \n            width: 40px; \n            height: 40px; \n            border-radius: 50%; \n            font-size: 16px; \n            cursor: pointer;\n            transition: background-color 0.2s;\n        \"\u003e\n            ▶\n        \u003c\/button\u003e\n\n        \u003cdiv style=\"flex-grow: 1; display: flex; flex-direction: column; gap: 5px;\"\u003e\n            \u003cdiv id=\"progressBarContainer\" style=\"\n                background-color: #4a4a4a; \n                height: 8px; \n                border-radius: 4px; \n                cursor: pointer; \n                overflow: hidden;\n            \"\u003e\n                \u003cdiv id=\"progressBarFill\" style=\"\n                    width: 0%; \n                    height: 100%; \n                    background-color: #8a2be2; \/* Purple\/Violet for the progress color *\/\n                \"\u003e\u003c\/div\u003e\n            \u003c\/div\u003e\n            \u003cdiv id=\"timeDisplay\" style=\"\n                color: #cccccc; \n                font-size: 12px; \n                text-align: left;\n            \"\u003e\n                0:00 \/ 0:40\n            \u003c\/div\u003e\n        \u003c\/div\u003e\n\n    \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cscript\u003e\n    \/\/ === CONFIGURATION START ===\n    const maxDuration = 40; \/\/ Set maximum playback time to 40 seconds.\n    \n    \/\/ **CRITICAL:** PASTE YOUR FULL SONG URL HERE.\n    const songUrl = \"https:\/\/cdn.shopify.com\/s\/files\/1\/0962\/9224\/1756\/files\/last_unicord_preview.mp3?v=1763044979\"; \n    \/\/ === CONFIGURATION END ===\n    \n    \/\/ Element References\n    const audio = document.getElementById(\"previewPlayer\");\n    const playPauseBtn = document.getElementById(\"playPauseBtn\");\n    const progressBarFill = document.getElementById(\"progressBarFill\");\n    const progressBarContainer = document.getElementById(\"progressBarContainer\");\n    const timeDisplay = document.getElementById(\"timeDisplay\");\n\n    \/\/ Helper Function to format time (seconds to m:ss)\n    function formatTime(seconds) {\n        const minutes = Math.floor(seconds \/ 60);\n        const remainingSeconds = Math.floor(seconds % 60);\n        return `${minutes}:${remainingSeconds \u003c 10 ? '0' : ''}${remainingSeconds}`;\n    }\n\n    \/\/ --- 1. Initialization (Link Obfuscation) ---\n    \/\/ Dynamically inject the source to hide it from the initial HTML source view.\n    const source = document.createElement('source');\n    source.src = songUrl;\n    source.type = 'audio\/mpeg';\n    audio.appendChild(source);\n    audio.load(); \/\/ Load the audio file\n\n    \/\/ Update the time display immediately after loading to ensure max duration is shown\n    audio.addEventListener('loadedmetadata', () =\u003e {\n        timeDisplay.textContent = `0:00 \/ ${formatTime(maxDuration)}`;\n    });\n\n    \/\/ --- 2. Custom Player Controls ---\n    playPauseBtn.addEventListener('click', () =\u003e {\n        if (audio.paused) {\n            audio.play();\n            playPauseBtn.textContent = '⏸';\n        } else {\n            audio.pause();\n            playPauseBtn.textContent = '▶';\n        }\n    });\n\n    \/\/ Handle seeking via the progress bar\n    progressBarContainer.addEventListener('click', (e) =\u003e {\n        const clickPosition = e.offsetX;\n        const totalWidth = progressBarContainer.offsetWidth;\n        const clickRatio = clickPosition \/ totalWidth;\n        const seekTime = clickRatio * maxDuration;\n        \n        if (seekTime \u003e= 0 \u0026\u0026 seekTime \u003c= maxDuration) { \/\/ Ensure seeking is within the limit\n            audio.currentTime = seekTime;\n        } else if (seekTime \u003e maxDuration) {\n            \/\/ If they click past the max, jump to the max time\n            audio.currentTime = maxDuration - 0.01;\n        }\n    });\n\n    \/\/ --- 3. Time Limit and Updates ---\n    audio.addEventListener(\"timeupdate\", () =\u003e {\n        let currentTime = audio.currentTime;\n        \n        \/\/ Enforce max duration limit\n        if (currentTime \u003e= maxDuration) {\n            audio.pause();\n            audio.currentTime = 0; \/\/ Reset to start\n            playPauseBtn.textContent = '▶';\n            progressBarFill.style.width = '0%';\n            timeDisplay.textContent = `0:00 \/ ${formatTime(maxDuration)}`;\n            alert(\"Die Vorschau ist nach \" + maxDuration + \" Sekunden beendet.\");\n            return;\n        }\n\n        \/\/ Update progress bar\n        const progressPercent = (currentTime \/ maxDuration) * 100;\n        progressBarFill.style.width = progressPercent + '%';\n        \n        \/\/ Update time display\n        timeDisplay.textContent = `${formatTime(currentTime)} \/ ${formatTime(maxDuration)}`;\n    });\n\n    \/\/ Reset button on song end (if it somehow finishes before maxDuration)\n    audio.addEventListener('ended', () =\u003e {\n        audio.currentTime = 0;\n        playPauseBtn.textContent = '▶';\n    });\n\n    \/\/ --- 4. Frontend Protections (Right-Click, Save, etc.) ---\n    document.addEventListener('selectstart', e =\u003e e.preventDefault());\n    document.addEventListener('dragstart', e =\u003e e.preventDefault());\n\n    document.addEventListener('keydown', e =\u003e {\n      \/\/ Prevents keyboard shortcut for saving (Ctrl+S or Cmd+S)\n      if ((e.ctrlKey || e.metaKey) \u0026\u0026 e.key === 's') {\n        e.preventDefault();\n        alert(\"Speichern ist deaktiviert.\");\n      }\n    });\n    \n    \/\/ Small deterrent for console access\n    Object.defineProperty(window, 'previewPlayer', { value: null });\n\u003c\/script\u003e\n\u003c\/div\u003e","brand":"MF Radio Shop","offers":[{"title":"Gewerblich","offer_id":55880663892316,"sku":null,"price":49.0,"currency_code":"EUR","in_stock":true},{"title":"Exklusivlizenz","offer_id":56324790681948,"sku":null,"price":199.0,"currency_code":"EUR","in_stock":true},{"title":"Medien- und Werbelizenz","offer_id":56324790714716,"sku":null,"price":499.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/0962\/9224\/1756\/files\/rockband_unicorn_cover.final.jpg?v=1762175114","url":"https:\/\/shop.mfradio.de\/de\/products\/song-placeholder-last-unicorn-tomex","provider":"MF Radio Shop ","version":"1.0","type":"link"}