Audio Player with Equalizer<\/title>\n <style>\n .eq-slider {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 5px; \/* Reduceret margin for t\u00e6ttere b\u00e5nd *\/\n }\n\n .eq-slider input[type=range] {\n writing-mode: bt-lr; \/* IE *\/\n -webkit-appearance: slider-vertical; \/* WebKit *\/\n width: 30px; \/* Justeret bredde *\/\n height: 150px; \/* Justeret h\u00f8jde *\/\n margin-bottom: 1px;\n }\n\n .eq-slider label {\n margin-top: 0px;\n }\n\n .db-scale {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: px;\n }\n\n .db-line {\n width: 100%;\n border-top: 2px solid #000;\n margin: px 5px; \/* Mindre margin mellem linjer *\/\n }\n\n .db-line-0 {\n width: 100%;\n border-top: 0px solid #000;\n }\n\n .db-line-3px {\n border-top-width: 0px;\n }\n\n #vu-meter-container {\n display: flex;\n justify-content: center;\n gap: 10px; \/* Afstand mellem VU-metre *\/\n }\n\n #vu-meter-left, #vu-meter-right {\n width: 20px; \/* Justeret bredde *\/\n height: 150px;\n border: 1px solid #000;\n }\n\n #controls {\n margin-top: 30px;\n }\n <\/style>\n<\/head>\n<body>\n <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 id=\"eq-container\" style=\"display:flex; justify-content:center; width:100%; margin-bottom: 20px;\">\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-meter-container\">\n <canvas id=\"vu-meter-left\"><\/canvas>\n <canvas id=\"vu-meter-right\"><\/canvas>\n <\/div>\n <div id=\"controls\">\n <button onclick=\"playPause()\">Play\/Pause<\/button>\n <button onclick=\"stop()\">Stop<\/button>\n <button onclick=\"bypassEq()\">Bypass EQ<\/button>\n <\/div>\n <\/div>\n <script>\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n const audioElement = document.getElementById('audio');\n const track = audioContext.createMediaElementSource(audioElement);\n const gainNodes = [];\n const frequencies = [30, 60, 120, 200, 400, 800, 1500, 3200, 6400, 12000];\n let isBypassed = false;\n\n frequencies.forEach((frequency, index) => {\n const eq = audioContext.createBiquadFilter();\n eq.type = \"peaking\";\n eq.frequency.value = frequency;\n eq.gain.value = 0;\n gainNodes.push(eq);\n });\n\n track.connect(gainNodes[0]);\n for (let i = 0; i < gainNodes.length - 1; i++) {\n gainNodes[i].connect(gainNodes[i + 1]);\n }\n gainNodes[gainNodes.length - 1].connect(audioContext.destination);\n\n document.querySelectorAll('.eq-slider input').forEach((slider, index) => {\n slider.addEventListener('input', (event) => {\n gainNodes[index].gain.value = event.target.value;\n });\n });\n\n function playPause() {\n if (audioContext.state === 'suspended') {\n audioContext.resume();\n }\n if (audioElement.paused) {\n audioElement.play();\n } else {\n audioElement.pause();\n }\n }\n\n function stop() {\n audioElement.pause();\n audioElement.currentTime = 0;\n }\n\n function bypassEq() {\n isBypassed = !isBypassed;\n if (isBypassed) {\n gainNodes.forEach(node => node.disconnect());\n track.connect(audioContext.destination);\n } else {\n track.connect(gainNodes[0]);\n for (let i = 0; i < gainNodes.length - 1; i++) {\n gainNodes[i].connect(gainNodes[i + 1]);\n }\n gainNodes[gainNodes.length - 1].connect(audioContext.destination);\n }\n }\n\n const leftChannelAnalyser = audioContext.createAnalyser();\n const rightChannelAnalyser = audioContext.createAnalyser();\n\n const splitter = audioContext.createChannelSplitter(2);\n const merger = audioContext.createChannelMerger(2);\n\n gainNodes[gainNodes.length - 1].connect(splitter);\n\n splitter.connect(leftChannelAnalyser, 0, 0);\n splitter.connect(rightChannelAnalyser, 1, 0);\n\n leftChannelAnalyser.connect(merger, 0, 0);\n rightChannelAnalyser.connect(merger, 0, 1);\n\n merger.connect(audioContext.destination);\n\n const canvasLeft = document.getElementById('vu-meter-left');\n const canvasRight = document.getElementById('vu-meter-right');\n const canvasLeftCtx = canvasLeft.getContext('2d');\n const canvasRightCtx = canvasRight.getContext('2d');\n\n function drawVuMeter() {\n requestAnimationFrame(drawVuMeter);\n\n const bufferLength = leftChannelAnalyser.frequencyBinCount;\n const dataArrayLeft = new Uint8Array(bufferLength);\n const dataArrayRight = new Uint8Array(bufferLength);\n\n leftChannelAnalyser.getByteFrequencyData(dataArrayLeft);\n rightChannelAnalyser.getByteFrequencyData(dataArrayRight);\n\n const averageLeft = dataArrayLeft.reduce((sum, value) => sum + value, 0) \/ bufferLength;\n const averageRight = dataArrayRight.reduce((sum, value) => sum + value, 0) \/ bufferLength;\n\n canvasLeftCtx.clearRect(0, 0, canvasLeft.width, canvasLeft.height);\n canvasRightCtx.clearRect(0, 0, canvasRight.width, canvasRight.height);\n\n const vuHeightLeft = (averageLeft \/ 255) * canvasLeft.height;\n const vuHeightRight = (averageRight \/ 255) * canvasRight.height;\n\n canvasLeftCtx.fillStyle = 'green';\n canvasLeftCtx.fillRect(0, canvasLeft.height - vuHeightLeft, canvasLeft.width, vuHeightLeft);\n\n canvasRightCtx.fillStyle = 'green';\n canvasRightCtx.fillRect(0, canvasRight.height - vuHeightRight, canvasRight.width, vuHeightRight);\n }\n\n drawVuMeter();\n <\/script>\n<\/body>\n<\/html>\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>Audio Player with Equalizer 30 60 120 200 400 800 1.5k 3.2k 6.4k 12k Play\/Pause Stop Bypass EQ<\/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-359","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359","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=359"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359\/revisions"}],"predecessor-version":[{"id":4323,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359\/revisions\/4323"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\n\n\n \n \n Audio Player with Equalizer<\/title>\n <style>\n .eq-slider {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin: 0 5px; \/* Reduceret margin for t\u00e6ttere b\u00e5nd *\/\n }\n\n .eq-slider input[type=range] {\n writing-mode: bt-lr; \/* IE *\/\n -webkit-appearance: slider-vertical; \/* WebKit *\/\n width: 30px; \/* Justeret bredde *\/\n height: 150px; \/* Justeret h\u00f8jde *\/\n margin-bottom: 1px;\n }\n\n .eq-slider label {\n margin-top: 0px;\n }\n\n .db-scale {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-bottom: px;\n }\n\n .db-line {\n width: 100%;\n border-top: 2px solid #000;\n margin: px 5px; \/* Mindre margin mellem linjer *\/\n }\n\n .db-line-0 {\n width: 100%;\n border-top: 0px solid #000;\n }\n\n .db-line-3px {\n border-top-width: 0px;\n }\n\n #vu-meter-container {\n display: flex;\n justify-content: center;\n gap: 10px; \/* Afstand mellem VU-metre *\/\n }\n\n #vu-meter-left, #vu-meter-right {\n width: 20px; \/* Justeret bredde *\/\n height: 150px;\n border: 1px solid #000;\n }\n\n #controls {\n margin-top: 30px;\n }\n <\/style>\n<\/head>\n<body>\n <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 id=\"eq-container\" style=\"display:flex; justify-content:center; width:100%; margin-bottom: 20px;\">\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-meter-container\">\n <canvas id=\"vu-meter-left\"><\/canvas>\n <canvas id=\"vu-meter-right\"><\/canvas>\n <\/div>\n <div id=\"controls\">\n <button onclick=\"playPause()\">Play\/Pause<\/button>\n <button onclick=\"stop()\">Stop<\/button>\n <button onclick=\"bypassEq()\">Bypass EQ<\/button>\n <\/div>\n <\/div>\n <script>\n const audioContext = new (window.AudioContext || window.webkitAudioContext)();\n const audioElement = document.getElementById('audio');\n const track = audioContext.createMediaElementSource(audioElement);\n const gainNodes = [];\n const frequencies = [30, 60, 120, 200, 400, 800, 1500, 3200, 6400, 12000];\n let isBypassed = false;\n\n frequencies.forEach((frequency, index) => {\n const eq = audioContext.createBiquadFilter();\n eq.type = \"peaking\";\n eq.frequency.value = frequency;\n eq.gain.value = 0;\n gainNodes.push(eq);\n });\n\n track.connect(gainNodes[0]);\n for (let i = 0; i < gainNodes.length - 1; i++) {\n gainNodes[i].connect(gainNodes[i + 1]);\n }\n gainNodes[gainNodes.length - 1].connect(audioContext.destination);\n\n document.querySelectorAll('.eq-slider input').forEach((slider, index) => {\n slider.addEventListener('input', (event) => {\n gainNodes[index].gain.value = event.target.value;\n });\n });\n\n function playPause() {\n if (audioContext.state === 'suspended') {\n audioContext.resume();\n }\n if (audioElement.paused) {\n audioElement.play();\n } else {\n audioElement.pause();\n }\n }\n\n function stop() {\n audioElement.pause();\n audioElement.currentTime = 0;\n }\n\n function bypassEq() {\n isBypassed = !isBypassed;\n if (isBypassed) {\n gainNodes.forEach(node => node.disconnect());\n track.connect(audioContext.destination);\n } else {\n track.connect(gainNodes[0]);\n for (let i = 0; i < gainNodes.length - 1; i++) {\n gainNodes[i].connect(gainNodes[i + 1]);\n }\n gainNodes[gainNodes.length - 1].connect(audioContext.destination);\n }\n }\n\n const leftChannelAnalyser = audioContext.createAnalyser();\n const rightChannelAnalyser = audioContext.createAnalyser();\n\n const splitter = audioContext.createChannelSplitter(2);\n const merger = audioContext.createChannelMerger(2);\n\n gainNodes[gainNodes.length - 1].connect(splitter);\n\n splitter.connect(leftChannelAnalyser, 0, 0);\n splitter.connect(rightChannelAnalyser, 1, 0);\n\n leftChannelAnalyser.connect(merger, 0, 0);\n rightChannelAnalyser.connect(merger, 0, 1);\n\n merger.connect(audioContext.destination);\n\n const canvasLeft = document.getElementById('vu-meter-left');\n const canvasRight = document.getElementById('vu-meter-right');\n const canvasLeftCtx = canvasLeft.getContext('2d');\n const canvasRightCtx = canvasRight.getContext('2d');\n\n function drawVuMeter() {\n requestAnimationFrame(drawVuMeter);\n\n const bufferLength = leftChannelAnalyser.frequencyBinCount;\n const dataArrayLeft = new Uint8Array(bufferLength);\n const dataArrayRight = new Uint8Array(bufferLength);\n\n leftChannelAnalyser.getByteFrequencyData(dataArrayLeft);\n rightChannelAnalyser.getByteFrequencyData(dataArrayRight);\n\n const averageLeft = dataArrayLeft.reduce((sum, value) => sum + value, 0) \/ bufferLength;\n const averageRight = dataArrayRight.reduce((sum, value) => sum + value, 0) \/ bufferLength;\n\n canvasLeftCtx.clearRect(0, 0, canvasLeft.width, canvasLeft.height);\n canvasRightCtx.clearRect(0, 0, canvasRight.width, canvasRight.height);\n\n const vuHeightLeft = (averageLeft \/ 255) * canvasLeft.height;\n const vuHeightRight = (averageRight \/ 255) * canvasRight.height;\n\n canvasLeftCtx.fillStyle = 'green';\n canvasLeftCtx.fillRect(0, canvasLeft.height - vuHeightLeft, canvasLeft.width, vuHeightLeft);\n\n canvasRightCtx.fillStyle = 'green';\n canvasRightCtx.fillRect(0, canvasRight.height - vuHeightRight, canvasRight.width, vuHeightRight);\n }\n\n drawVuMeter();\n <\/script>\n<\/body>\n<\/html>\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>Audio Player with Equalizer 30 60 120 200 400 800 1.5k 3.2k 6.4k 12k Play\/Pause Stop Bypass EQ<\/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-359","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359","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=359"}],"version-history":[{"count":15,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359\/revisions"}],"predecessor-version":[{"id":4323,"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/pages\/359\/revisions\/4323"}],"wp:attachment":[{"href":"https:\/\/landing.anderskisling.dk\/index.php\/wp-json\/wp\/v2\/media?parent=359"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}