{"id":3394,"date":"2025-02-14T18:36:18","date_gmt":"2025-02-14T18:36:18","guid":{"rendered":"https:\/\/grewesound.com\/?page_id=3394"},"modified":"2026-04-02T14:33:10","modified_gmt":"2026-04-02T14:33:10","slug":"test-page","status":"publish","type":"page","link":"https:\/\/grewesound.com\/de\/test-page\/","title":{"rendered":"TEST: Audio player &#8211; before\/after toggle"},"content":{"rendered":"\n<div class=\"et_pb_section_0 et_pb_section et_section_regular et_block_section\"><div class=\"et_pb_row_0 et_pb_row et_block_row\"><div class=\"et_pb_column_0 et_pb_column et_pb_column_4_4 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_code_0 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><!-- Canvas for Visualizer -->\n<canvas id=\"visualizer\" style=\"width:100%; max-width:100%; max-height:150px; display:block; margin:0px auto;\"><\/canvas>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const canvas = document.getElementById(\"visualizer\");\n    const canvasCtx = canvas.getContext(\"2d\");\n    const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n    const analyser = audioContext.createAnalyser();\n\n    analyser.fftSize = 256;\n    analyser.smoothingTimeConstant = 0.7;\n\n    const bufferLength = analyser.frequencyBinCount;\n    const dataArray = new Uint8Array(bufferLength);\n\n    let sourceNode = null;\n    let animationFrameId = null;\n    let isBeforeTrack = true; \/\/ Tracks if the current file is a \"before\" track\n\n    function draw() {\n        animationFrameId = requestAnimationFrame(draw);\n        analyser.getByteFrequencyData(dataArray);\n\n        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n\n        const barWidth = (canvas.width \/ bufferLength) * 3;\n        let barHeight;\n        let x = 0;\n\n        for (let i = 3; i < bufferLength; i++) {\n            barHeight = Math.max(0, dataArray[i] * 0.5);\n            if (i < 4) barHeight *= 0.7;\n\n            let r, g, b;\n            if (isBeforeTrack) {\n                \/\/ Blue hue for \"before\" tracks\n                if (barHeight < 128) {\n                    r = 0;\n                    g = (barHeight \/ 128) * 255;\n                    b = 255;\n                } else {\n                    r = 0;\n                    g = 255 - ((barHeight - 128) \/ 128) * 255;\n                    b = 255;\n                }\n            } else {\n                \/\/ Green hue for \"after\" tracks\n                if (barHeight < 128) {\n                    r = (barHeight \/ 128) * 255;\n                    g = 255;\n                    b = 0;\n                } else {\n                    r = 255;\n                    g = 255 - ((barHeight - 128) \/ 128) * 255;\n                    b = 0;\n                }\n            }\n\n            canvasCtx.fillStyle = `rgb(${r}, ${g}, ${b})`;\n            canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);\n\n            x += barWidth + 1;\n        }\n    }\n\n    function connectVisualizer(audioPlayer) {\n        if (sourceNode) sourceNode.disconnect();\n        sourceNode = audioContext.createMediaElementSource(audioPlayer);\n        sourceNode.connect(analyser);\n        analyser.connect(audioContext.destination);\n        startVisualization();\n    }\n\n    function startVisualization() {\n        if (!animationFrameId) {\n            draw();\n        }\n    }\n\n    function stopVisualization() {\n        if (animationFrameId) {\n            cancelAnimationFrame(animationFrameId);\n            animationFrameId = null;\n            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);\n        }\n    }\n\n    window.updateVisualizer = function(audioPlayer) {\n        audioContext.resume().then(() => {\n            connectVisualizer(audioPlayer);\n        });\n\n        \/\/ Check if the current audio source is a \"before\" or \"after\" track\n        isBeforeTrack = audioPlayer.src.includes(\"_before.mp3\");\n    };\n\n    window.clearVisualizer = function() {\n        stopVisualization();\n    };\n});\n<\/script>\n<\/div><\/div><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: center;\">Before\u00a0 &amp;\u00a0 After<\/p>\n<\/div><\/div><\/div><\/div><div class=\"et_pb_row_1 et_pb_row et_block_row\"><div class=\"et_pb_column_1 et_pb_column et_pb_column_1_2 et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_1 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p>mixes<\/p>\n<\/div><\/div><div class=\"et_pb_text_2 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: left;\">Song 1<\/p>\n<\/div><\/div><div class=\"et_pb_code_1 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"audio-players-module\">\n    <div class=\"audio-player\" data-track=\"test\"><\/div>\n<\/div><\/div><\/div><div class=\"et_pb_text_3 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: left;\">Song 2<\/p>\n<\/div><\/div><div class=\"et_pb_code_2 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"audio-players-module\">\n    <div class=\"audio-player\" data-track=\"test\"><\/div>\n<\/div><\/div><\/div><div class=\"et_pb_code_3 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const basePath = \"https:\/\/grewesound.com\/wp-content\/uploads\/audio\/\";\n    let currentPlayer = null;\n    \n    function isDiviBuilder() {\n        return document.body.classList.contains(\"et-fb\"); \/\/ Detects Divi Builder mode\n    }\n\n    function createAudioPlayer(container, trackName) {\n        if (container.hasAttribute(\"data-initialized\")) return;\n        container.setAttribute(\"data-initialized\", \"true\");\n\n        if (isDiviBuilder()) {\n            container.innerHTML = `\n                <div style=\"display: flex; justify-content: space-between; align-items: center;\">\n                    <p style=\"font-weight: bold; color: #666;\">[Audio Player: ${trackName}]<\/p>\n                    <span style=\"font-weight: bold; color: #666;\">[Status]<\/span>\n                <\/div>\n                <p style=\"text-align:center;\">Toggle Button Here<\/p>\n            `;\n            return;\n        }\n\n        \/\/ Create container for player & label\n        const playerWrapper = document.createElement(\"div\");\n        playerWrapper.style.display = \"flex\";\n        playerWrapper.style.alignItems = \"center\";\n        playerWrapper.style.justifyContent = \"space-between\";\n        playerWrapper.style.marginBottom = \"5px\";\n\n        \/\/ Create the audio player\n        const audioPlayer = document.createElement(\"audio\");\n        audioPlayer.controls = true;\n        audioPlayer.style.width = \"100%\";\n        audioPlayer.src = `${basePath}${trackName}_before.mp3`;\n\n        \/\/ Create status label (Unprocessed\/Processed)\n        const statusLabel = document.createElement(\"span\");\n        statusLabel.textContent = \"\ud83d\udfe9 Unprocessed\";\n        statusLabel.style.fontWeight = \"bold\";\n        statusLabel.style.color = \"#0073e6\";\n        statusLabel.style.display = \"block\";\n        statusLabel.style.marginTop = \"2px\";\n      \tstatusLabel.style.fontSize = \"16px\";\n\n        \/\/ Create toggle button\n        const toggleButton = document.createElement(\"button\");\n        toggleButton.textContent = \"pre\/post\";\n  \n\ttoggleButton.style.width =\n\"120px\";        \t\t\t\ttoggleButton.style.marginLeft = \"10px\";\n        toggleButton.style.padding = \"10px 10px\";\n        toggleButton.style.fontSize = \"16px\";\n        toggleButton.style.background = \"#0073e6\";\n        toggleButton.style.color = \"#fff\";\n        toggleButton.style.border = \"none\";\n        toggleButton.style.cursor = \"pointer\";\n        toggleButton.style.borderRadius = \"5px\";\n        \n        \/\/ Add hover effect to darken button\n        toggleButton.addEventListener(\"mouseover\", function() {\n            toggleButton.style.background = \"#005bb5\";\n        });\n        toggleButton.addEventListener(\"mouseout\", function() {\n            toggleButton.style.background = \"#0073e6\";\n        });\n\n        let isBefore = true;\n\n        toggleButton.addEventListener(\"click\", function() {\n            const currentTime = audioPlayer.currentTime;\n            isBefore = !isBefore;\n            audioPlayer.src = isBefore ? `${basePath}${trackName}_before.mp3` : `${basePath}${trackName}_after.mp3`;\n            audioPlayer.load();\n            audioPlayer.currentTime = currentTime;\n            audioPlayer.play();\n\n            \/\/ Update status label\n            statusLabel.textContent = isBefore ? \"\ud83d\udfe9 Unprocessed\" : \"\u2705 Processed\";\n            statusLabel.style.color = isBefore ? \"#0073e6\" : \"#28a745\";\n\n            updateVisualizer(audioPlayer);\n        });\n\n        audioPlayer.addEventListener(\"play\", function() {\n            if (currentPlayer && currentPlayer !== audioPlayer) {\n                currentPlayer.pause();\n            }\n            currentPlayer = audioPlayer;\n            updateVisualizer(audioPlayer);\n        });\n\n        audioPlayer.addEventListener(\"pause\", function() {\n            clearVisualizer();\n        });\n\n        audioPlayer.addEventListener(\"ended\", function() {\n            clearVisualizer();\n        });\n\n        \/\/ Append elements to container\n        playerWrapper.appendChild(audioPlayer);\n        playerWrapper.appendChild(toggleButton);\n        container.appendChild(playerWrapper);\n        container.appendChild(statusLabel);\n    }\n\n    document.querySelectorAll(\".audio-players-module .audio-player\").forEach(container => {\n        const trackName = container.getAttribute(\"data-track\");\n        createAudioPlayer(container, trackName);\n    });\n});\n<\/script>\n<\/div><\/div><\/div><div class=\"et_pb_column_2 et_pb_column et_pb_column_1_2 et-last-child et_block_column et_pb_css_mix_blend_mode_passthrough\"><div class=\"et_pb_text_4 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: left;\">masters<\/p>\n<\/div><\/div><div class=\"et_pb_text_5 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: left;\">Song 1<\/p>\n<\/div><\/div><div class=\"et_pb_code_4 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"audio-players-module\">\n    <div class=\"audio-player\" data-track=\"test\"><\/div>\n<\/div><\/div><\/div><div class=\"et_pb_text_6 et_pb_text et_pb_bg_layout_light et_pb_module et_block_module preset--group--divi-text--divi-font-body--default preset--group--divi-text--divi-font-header--default\"><div class=\"et_pb_text_inner\"><p style=\"text-align: left;\">Song 1<\/p>\n<\/div><\/div><div class=\"et_pb_code_5 et_pb_code et_pb_module\"><div class=\"et_pb_code_inner\"><div class=\"audio-players-module\">\n    <div class=\"audio-player\" data-track=\"test\"><\/div>\n<\/div><\/div><\/div><\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":53,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3394","page","type-page","status-publish","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/pages\/3394","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/comments?post=3394"}],"version-history":[{"count":61,"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/pages\/3394\/revisions"}],"predecessor-version":[{"id":4268,"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/pages\/3394\/revisions\/4268"}],"wp:attachment":[{"href":"https:\/\/grewesound.com\/de\/wp-json\/wp\/v2\/media?parent=3394"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}