{"id":1602,"date":"2024-07-02T14:25:35","date_gmt":"2024-07-02T14:25:35","guid":{"rendered":"http:\/\/landing.anderskisling.dk\/?page_id=1602"},"modified":"2024-07-28T23:31:18","modified_gmt":"2024-07-28T23:31:18","slug":"iss-gpt","status":"publish","type":"page","link":"https:\/\/landing.anderskisling.dk\/index.php\/iss-gpt\/","title":{"rendered":"iss gpt"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1602\" class=\"elementor elementor-1602\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c2d663b e-flex e-con-boxed e-con e-parent\" data-id=\"c2d663b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-81d7965 elementor-widget elementor-widget-html\" data-id=\"81d7965\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"audio-player\" style=\"text-align:center;\">\n    <audio id=\"audio\" src=\"http:\/\/landing.anderskisling.dk\/wp-content\/uploads\/2024\/07\/testblues.wav\"><\/audio>\n    <div>\n        <input id=\"progressBar\" type=\"range\" min=\"0\" max=\"100\" value=\"0\" step=\"1\">\n    <\/div>\n    <div id=\"eq-container\" style=\"display:flex; justify-content:center; width:100%;\">\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq30\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>30<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq60\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>60<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq120\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>120<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq200\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>200<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq400\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>400<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq800\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>800<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq1.5k\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>1.5k<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq3.2k\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>3.2k<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq6.4k\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>6.4k<\/label>\n        <\/div>\n        <div class=\"eq-slider\">\n            <div class=\"db-scale\">\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line-0\"><\/div>\n                <div class=\"db-line db-line-3px\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n                <div class=\"db-line\"><\/div>\n            <\/div>\n            <input id=\"eq12k\" type=\"range\" min=\"-15\" max=\"15\" value=\"0\" step=\"1\" orient=\"vertical\">\n            <label>12k<\/label>\n        <\/div>\n    <\/div>\n    <div id=\"vu-meters\" style=\"display:flex; justify-content:center; width:100%;\">\n        <canvas id=\"vu-meter-left\" width=\"15\" height=\"300\"><\/canvas>\n        <canvas id=\"vu-meter-right\" width=\"15\" height=\"300\"><\/canvas>\n    <\/div>\n    <div id=\"controls\">\n        <button id=\"playPauseBtn\">Play<\/button>\n        <button id=\"bypassBtn\">Bypass EQ<\/button>\n        <button id=\"loopBtn\">Loop Off<\/button>\n    <\/div>\n<\/div>\n\n<script>\n    const audio = document.getElementById('audio');\n    const playPauseBtn = document.getElementById('playPauseBtn');\n    const progressBar = document.getElementById('progressBar');\n    const bypassBtn = document.getElementById('bypassBtn');\n    const loopBtn = document.getElementById('loopBtn');\n    const eqBands = [\n        document.getElementById('eq30'),\n        document.getElementById('eq60'),\n        document.getElementById('eq120'),\n        document.getElementById('eq200'),\n        document.getElementById('eq400'),\n        document.getElementById('eq800'),\n        document.getElementById('eq1.5k'),\n        document.getElementById('eq3.2k'),\n        document.getElementById('eq6.4k'),\n        document.getElementById('eq12k')\n    ];\n\n    const frequencies = [30, 60, 120, 200, 400, 800, 1500, 3200, 6400, 12000];\n    let audioContext, audioSource, filters = [], bypass = false, analyserL, analyserR, splitter;\n\n    const initializeAudioContext = () => {\n        audioContext = new (window.AudioContext || window.webkitAudioContext)();\n        audioSource = audioContext.createMediaElementSource(audio);\n\n        frequencies.forEach((freq, index) => {\n            const filter = createEQ(freq);\n            filters.push(filter);\n            if (index === 0) {\n                audioSource.connect(filter);\n            } else {\n                filters[index - 1].connect(filter);\n            }\n        });\n\n        analyserL = audioContext.createAnalyser();\n        analyserR = audioContext.createAnalyser();\n        splitter = audioContext.createChannelSplitter(2);\n\n        \/\/ EQ path\n        filters[filters.length - 1].connect(splitter);\n\n        \/\/ Bypass path\n        audioSource.connect(splitter);\n\n        \/\/ Connect splitters to analyzers and destination\n        splitter.connect(analyserL, 0);\n        splitter.connect(analyserR, 1);\n        splitter.connect(audioContext.destination);\n\n        updateVU();\n    };\n\n    const createEQ = (frequency) => {\n        const filter = audioContext.createBiquadFilter();\n        filter.type = 'peaking';\n        filter.frequency.value = frequency;\n        filter.Q.value = 1;\n        filter.gain.value = 0;\n        return filter;\n    };\n\n    const updateEQ = () => {\n        if (audioContext && !bypass) {\n            filters.forEach((filter, index) => {\n                filter.gain.value = eqBands[index].value;\n            });\n        }\n    };\n\n    eqBands.forEach(band => {\n        band.addEventListener('input', updateEQ);\n    });\n\n    playPauseBtn.addEventListener('click', () => {\n        if (!audioContext) {\n            initializeAudioContext();\n        }\n        if (audio.paused) {\n            audio.play();\n            playPauseBtn.textContent = 'Pause';\n        } else {\n            audio.pause();\n            playPauseBtn.textContent = 'Play';\n        }\n    });\n\n    audio.addEventListener('timeupdate', () => {\n        const progress = (audio.currentTime \/ audio.duration) * 100;\n        progressBar.value = progress;\n    });\n\n    progressBar.addEventListener('input', () => {\n        const seekTime = (progressBar.value \/ 100) * audio.duration;\n        audio.currentTime = seekTime;\n    });\n\n    bypassBtn.addEventListener('click', () => {\n        if (bypass) {\n            \/\/ EQ enabled\n            audioSource.disconnect(splitter);\n            audioSource.connect(filters[0]);\n            bypassBtn.textContent = 'Bypass EQ';\n        } else {\n            \/\/ EQ bypassed\n            audioSource.disconnect(filters[0]);\n            audioSource.connect(splitter);\n            bypassBtn.textContent = 'Enable EQ';\n        }\n        bypass = !bypass;\n    });\n\n    loopBtn.addEventListener('click', () => {\n        audio.loop = !audio.loop;\n        loopBtn.textContent = audio.loop ? 'Loop On' : 'Loop Off';\n    });\n\n    const updateVU = () => {\n        const canvasLeft = document.getElementById('vu-meter-left');\n        const canvasRight = document.getElementById('vu-meter-right');\n        const ctxLeft = canvasLeft.getContext('2d');\n        const ctxRight = canvasRight.getContext('2d');\n        const bufferLength = analyserL.frequencyBinCount;\n        const dataArrayL = new Uint8Array(bufferLength);\n        const dataArrayR = new Uint8Array(bufferLength);\n\n        const draw = () => {\n            analyserL.getByteFrequencyData(dataArrayL);\n            analyserR.getByteFrequencyData(dataArrayR);\n\n            ctxLeft.clearRect(0, 0, canvasLeft.width, canvasLeft.height);\n            ctxRight.clearRect(0, 0, canvasRight.width, canvasRight.height);\n\n            const leftValue = Math.max(...dataArrayL) \/ 300;  \/\/ Adjusted to 320 for more sensitivity\n            const rightValue = Math.max(...dataArrayR) \/ 300;  \/\/ Adjusted to 320 for more sensitivity\n\n            ctxLeft.fillStyle = '#dfdfdf';\n            ctxLeft.fillRect(0, canvasLeft.height - leftValue * canvasLeft.height, canvasLeft.width, leftValue * canvasLeft.height);\n\n            ctxRight.fillStyle = '#dfdfdf';\n            ctxRight.fillRect(0, canvasRight.height - rightValue * canvasRight.height, canvasRight.width, rightValue * canvasRight.height);\n\n            requestAnimationFrame(draw);\n        };\n\n        draw();\n    };\n<\/script>\n<style>\n    #audio-player {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n    }\n    #eq-container {\n        display: flex;\n        justify-content: center;\n        gap: 10px;\n        margin: 20px 0;\n    }\n    .eq-slider {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n    }\n    input[type=\"range\"][orient=\"vertical\"] {\n        writing-mode: bt-lr;\n        -webkit-appearance: slider-vertical;\n        width: 20px;\n        height: 150px;\n        padding: 0;\n        margin: 0;\n    }\n    label {\n        margin-top: 5px;\n        font-size: 12px;\n    }\n    .db-scale {\n        position: absolute;\n        left: -8px;\n        top: 0;\n        height: 150px;\n        display: flex;\n        flex-direction: column;\n        justify-content: space-between;\n    }\n    .db-line {\n        width: 5px;\n        height: 1px;\n        background-color: black;\n    }\n    .db-line-3px {\n        width: 5px;\n        height: 2px;\n    }\n    .db-line-0 {\n        width: 5px;\n        height: 2px;\n        background-color: red;\n    }\n    #vu-meters {\n        display: flex;\n        justify-content: center;\n        margin: 20px 0;\n    }\n    canvas {\n        border: 1px solid black;\n        margin: 0 10px;\n    }\n    #controls {\n        margin-top: 20px;\n    }\n    #progressBar {\n        width: 80%;\n        margin: 20px 0;\n    }\n<\/style>\n\n\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>30 60 120 200 400 800 1.5k 3.2k 6.4k 12k Play Bypass EQ Loop Off<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_kad_post_transparent":"","_kad_post_title":"hide","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"unboxed","_kad_post_vertical_padding":"hide","_kad_post_feature":"hide","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-1602","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1602","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/comments?post=1602"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1602\/revisions"}],"predecessor-version":[{"id":4316,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/1602\/revisions\/4316"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=1602"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}