MicroBin

<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Systemy mobilne i multimedia - L3</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <style>
    .mtoplg {
      margin-top: 20px;
    }
    input[type=range] {
      width: 100%;
    }
  </style>
</head>
<body style="padding: 20px;">

  <h1>Z1 & Z2: Odtwarzacz Audio z Kontrolami Kanałów i Filtrem Częstotliwości</h1>

  <button onclick="audioContext.resume()">Start Audio (Click after user gesture)</button>

  <p class="mtoplg">Odtwarzacz Audio</p>
  <audio id="audioPlayer" controls src="vlog-beat-background-349853.mp3" crossOrigin="anonymous"></audio>

  <div class="mtoplg">
    <label for="leftChannelToggle">Kanał Lewy:</label>
    <input type="checkbox" id="leftChannelToggle" checked>
  </div>
  <div class="mtoplg">
    <label for="rightChannelToggle">Kanał Prawy:</label>
    <input type="checkbox" id="rightChannelToggle" checked>
  </div>

  <p class="mtoplg">Filtr Częstotliwości (Zakres [a, b] zostanie usunięty)</p>
  <div>
    <label for="frequencyA">Częstotliwość A (Hz):</label>
    <input type="range" id="frequencyA" min="10" max="20000" value="10">
    <span id="frequencyAValue">10 Hz</span>
  </div>
  <div class="mtoplg">
    <label for="frequencyB">Częstotliwość B (Hz):</label>
    <input type="range" id="frequencyB" min="10" max="20000" value="10">
    <span id="frequencyBValue">10 Hz</span>
  </div>

  <script>
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
    const audioPlayer = document.getElementById('audioPlayer');
    const source = audioContext.createMediaElementSource(audioPlayer);

    const splitter = audioContext.createChannelSplitter(2);
    const merger = audioContext.createChannelMerger(2);
    const leftGain = audioContext.createGain();
    const rightGain = audioContext.createGain();

    source.connect(splitter);
    splitter.connect(leftGain, 0);
    splitter.connect(rightGain, 1);

    leftGain.connect(merger, 0, 0);
    rightGain.connect(merger, 0, 1);

    const leftChannelToggle = document.getElementById('leftChannelToggle');
    const rightChannelToggle = document.getElementById('rightChannelToggle');

    leftChannelToggle.addEventListener('change', () => {
      leftGain.gain.value = leftChannelToggle.checked ? 1 : 0;
    });

    rightChannelToggle.addEventListener('change', () => {
      rightGain.gain.value = rightChannelToggle.checked ? 1 : 0;
    });
    
    const lowpassFilter = audioContext.createBiquadFilter();
    lowpassFilter.type = 'lowpass';
    lowpassFilter.frequency.value = 10;
    lowpassFilter.Q.value = 1;

    const highpassFilter = audioContext.createBiquadFilter();
    highpassFilter.type = 'highpass';
    highpassFilter.frequency.value = 10;
    highpassFilter.Q.value = 1;
    const filterMerger = audioContext.createChannelMerger(2);
    merger.connect(lowpassFilter);
    merger.connect(highpassFilter);
    lowpassFilter.connect(filterMerger, 0, 0);
    highpassFilter.connect(filterMerger, 0, 1);
    filterMerger.connect(audioContext.destination);

    const frequencyA = document.getElementById('frequencyA');
    const frequencyB = document.getElementById('frequencyB');
    const frequencyAValue = document.getElementById('frequencyAValue');
    const frequencyBValue = document.getElementById('frequencyBValue');

    function updateFilter() {
      let a = parseInt(frequencyA.value);
      let b = parseInt(frequencyB.value);

      if (a > b) {
        [a, b] = [b, a];
        frequencyA.value = a;
        frequencyB.value = b;
      }

      frequencyAValue.textContent = `${a} Hz`;
      frequencyBValue.textContent = `${b} Hz`;
      lowpassFilter.frequency.value = a;
      highpassFilter.frequency.value = b;
    }

    frequencyA.addEventListener('input', updateFilter);
    frequencyB.addEventListener('input', updateFilter);
    updateFilter();

    audioPlayer.addEventListener('play', () => {
      if (audioContext.state === 'suspended') {
        audioContext.resume();
      }
    });

  </script>
</body>
</html>


<!DOCTYPE html>
<html lang="pl">
<head>
  <title>Systemy mobilne i multimedia - L3</title>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <style>
    .mtoplg {
      margin-top: 20px;
    }
    input[type=range] {
      width: 100%;
    }
  </style>
</head>
<body style="padding: 20px;">

  <h1>Z3: Łączenie Oscylatorów Stereo</h1>

  <button onclick="audioContext.resume()">Start Audio (Click after user gesture)</button>

  <p class="mtoplg">Częstotliwość Oscylatora Lewego (Sinusoidalna)</p>
  <input type='range' max=1000 value=440 id='slider_frequency_left'>
  <span id="frequencyLeftValue">440 Hz</span>

  <p class="mtoplg">Częstotliwość Oscylatora Prawego (Kwadratowa)</p>
  <input type='range' max=1000 value=440 id='slider_frequency_right'>
  <span id="frequencyRightValue">440 Hz</span>

  <p class="mtoplg">Wzmocnienie</p>
  <input type='range' max=1 step='any' value=0.2 id='slider_gain_master'>
  <span id="gainMasterValue">0.2</span>

  <script>
    const audioContext = new (window.AudioContext || window.webkitAudioContext)();

    // Oscylator Lewy (Sinusoidalna)
    const oscillatorLeft = audioContext.createOscillator();
    oscillatorLeft.type = 'sine';
    oscillatorLeft.frequency.value = 440;
    const gainLeft = audioContext.createGain();
    gainLeft.gain.value = 1;

    // Oscylator Prawy (Kwadratowa)
    const oscillatorRight = audioContext.createOscillator();
    oscillatorRight.type = 'square';
    oscillatorRight.frequency.value = 440;
    const gainRight = audioContext.createGain();
    gainRight.gain.value = 1;

    
    const masterGain = audioContext.createGain();
    masterGain.gain.value = 0.2; 

    const merger = audioContext.createChannelMerger(2);
    
    oscillatorLeft.connect(gainLeft);
    gainLeft.connect(merger, 0, 0); 

    
    oscillatorRight.connect(gainRight);
    gainRight.connect(merger, 0, 1); 
    
    merger.connect(masterGain);
    masterGain.connect(audioContext.destination);
    
    oscillatorLeft.start();
    oscillatorRight.start();

    // Controls for frequency (left)
    const sliderFrequencyLeft = document.getElementById('slider_frequency_left');
    const frequencyLeftValue = document.getElementById('frequencyLeftValue');
    sliderFrequencyLeft.oninput = function() {
      oscillatorLeft.frequency.value = this.value;
      frequencyLeftValue.textContent = `${this.value} Hz`;
    };

    // Controls for frequency (right)
    const sliderFrequencyRight = document.getElementById('slider_frequency_right');
    const frequencyRightValue = document.getElementById('frequencyRightValue');
    sliderFrequencyRight.oninput = function() {
      oscillatorRight.frequency.value = this.value;
      frequencyRightValue.textContent = `${this.value} Hz`;
    };

    // Controls for master gain
    const sliderGainMaster = document.getElementById('slider_gain_master');
    const gainMasterValue = document.getElementById('gainMasterValue');
    sliderGainMaster.oninput = function() {
      masterGain.gain.value = this.value;
      gainMasterValue.textContent = this.value;
    };

    // Handle AudioContext resume
    audioContext.addEventListener('statechange', () => {
      if (audioContext.state === 'suspended') {
        audioContext.resume();
      }
    });

    // Initial update of values
    sliderFrequencyLeft.oninput();
    sliderFrequencyRight.oninput();
    sliderGainMaster.oninput();

  </script>
</body>
</html>