Sound4

[et_pb_section fb_built=”1″ _builder_version=”4.24.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_row _builder_version=”4.24.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.24.3″ _module_preset=”default” global_colors_info=”{}”][et_pb_code admin_label=”Code” _builder_version=”4.25.0″ _module_preset=”default” hover_enabled=”0″ global_colors_info=”{}” sticky_enabled=”0″]

const canvas = document.getElementById(‘frequencyCanvas’);const ctx = canvas.getContext(‘2d’);const highpassSlider = document.getElementById(‘highpassSlider’);const lowpassSlider = document.getElementById(‘lowpassSlider’);const highpassQSlider = document.getElementById(‘highpassQSlider’);const lowpassQSlider = document.getElementById(‘lowpassQSlider’);const highpassQValDisplay = document.querySelector(‘.highpass_q_val’);const lowpassQValDisplay = document.querySelector(‘.lowpass_q_val’); const playPauseButton = document.querySelector(‘.tape-controls-play’);let highpassFilter, lowpassFilter; // Define filters globallyfunction drawFrequencyGraph(analyserNode) { const bufferLength = analyserNode.frequencyBinCount; const dataArray = new Uint8Array(bufferLength); analyserNode.getByteFrequencyData(dataArray); ctx.clearRect(0, 0, canvas.width, canvas.height); const barWidth = (canvas.width / bufferLength) * 22.5; let x = 0; dataArray.forEach((value) => { const barHeight = (value / 255) * canvas.height; ctx.fillStyle = `rgb(${value}, 50, 50)`; ctx.fillRect(x, canvas.height – barHeight, barWidth, barHeight); x += barWidth + 1; }); requestAnimationFrame(() => drawFrequencyGraph(analyserNode));}function createAnalyserNode(audioElement) { const audioContext = new (window.AudioContext || window.webkitAudioContext)(); const analyserNode = audioContext.createAnalyser(); const sourceNode = audioContext.createMediaElementSource(audioElement); sourceNode.connect(analyserNode); highpassFilter = audioContext.createBiquadFilter(); highpassFilter.type = ‘highpass’; highpassFilter.frequency.value = highpassSlider.value; lowpassFilter = audioContext.createBiquadFilter(); lowpassFilter.type = ‘lowpass’; lowpassFilter.frequency.value = lowpassSlider.value; sourceNode.connect(highpassFilter); highpassFilter.connect(lowpassFilter); lowpassFilter.connect(analyserNode); analyserNode.connect(audioContext.destination); drawFrequencyGraph(analyserNode); audioElement.addEventListener(‘play’, () => { canvas.classList.add(‘canvas-audio-playing’); }); audioElement.addEventListener(‘pause’, () => { canvas.classList.remove(‘canvas-audio-playing’); }); audioElement.addEventListener(‘ended’, () => { canvas.classList.remove(‘canvas-audio-playing’); });}document.querySelectorAll(‘input[type=radio][name=sound]’).forEach((radio) => { radio.addEventListener(‘change’, function() { const soundValue = this.value; let soundSrc = ”; if (soundValue === ‘sound1’) { soundSrc = ‘https://www.analoghearingaids.com/wp-content/uploads/2024/04/Pachelbel_-_Canon_In_D_Major._48k_24bit.mp3’; } else if (soundValue === ‘sound2’) { soundSrc = ‘https://www.analoghearingaids.com/wp-content/uploads/2024/04/audiocheck.net_brownnoise.mp3’; } audioPlayer.src = soundSrc; audioPlayer.play(); createAnalyserNode(audioPlayer); });});highpassSlider.addEventListener(‘input’, () => { if (highpassFilter) { highpassFilter.frequency.value = parseInt(highpassSlider.value, 10); console.log(“highpassFilter” +highpassFilter.frequency.value); document.querySelector(‘.highpass_range_val’).textContent = “Highpass frequency = ” + highpassFilter.frequency.value + “Hz”; }});lowpassSlider.addEventListener(‘input’, () => { if (lowpassFilter) { lowpassFilter.frequency.value = parseInt(lowpassSlider.value, 10); console.log(“lowpassFilter” +lowpassFilter.frequency.value); document.querySelector(‘.lowpass_range_val’).textContent = “Lowpass frequency = ” + lowpassFilter.frequency.value + “Hz”; }}); playPauseButton.addEventListener(‘click’, () => { const sound1RadioButton = document.getElementById(‘sound1’); if (!document.querySelector(‘input[name=”sound”]:checked’)) { sound1RadioButton.checked = true; // Select Sound 1 radio button if no radio button is checked } if (audioPlayer.paused) { if (audioPlayer.src === ”) { audioPlayer.src = ‘https://www.analoghearingaids.com/wp-content/uploads/2024/04/Pachelbel_-_Canon_In_D_Major._48k_24bit.mp3’; // Set default audio source if not set } audioPlayer.play(); // Play audio createAnalyserNode(audioPlayer); // Create analyser node } else { audioPlayer.pause(); // Pause audio }});highpassQSlider.addEventListener(‘input’, () => { if (highpassFilter) { highpassFilter.Q.value = parseFloat(highpassQSlider.value); highpassQValDisplay.textContent = “Highpass Q value is ” + highpassFilter.Q.value.toFixed(2); +”dB”; }});lowpassQSlider.addEventListener(‘input’, () => { if (lowpassFilter) { lowpassFilter.Q.value = parseFloat(lowpassQSlider.value); lowpassQValDisplay.textContent = “Lowpass Q value is ” + lowpassFilter.Q.value.toFixed(2); +”dB”; }});

[/et_pb_code][/et_pb_column][/et_pb_row][/et_pb_section]