dimanche 1 août 2021

How to build simple keyboard synthesizer with Web Audio API

I've been trying to code a simple (very simple) key synthesizer with web audio API. I'm just want to use 4 keys ('h', 'j', 'k' and 'l'), and it's gonna work in a-frame framework. I'm completely new to work with audio/oscillator in js, so after build the basis for audio in Web (context, font, destination...),I don't know how to connect the frequencies and notes to key events. Here is my code:

    //A-FRAME COMPONENT
AFRAME.registerComponent('key-audio', {
  init: function() {
    //CRIAR ELEMENTO KEYBOARD NA CENA A-FRAME
    var myScene = document.querySelector('#myScene');
    var keyboardEl = document.querySelector('#keyboardEl');
    },
    
  update: function() {
    document.addEventListener('keyboard', evt => {
      
      //CRIAR CONTEXTO DE AUDIO
      var AudioContext = window.AudioContext || window.webkitAudioContext;
      const context = new AudioContext;

      //CONECTAR GAIN AO DESTINO
      const masterVolume = context.createGain();
      masterVolume.connect(context.destination);

      //DEFINIR FONTE DE AUDIO : OSCILLATOR
      const oscillator = context.createOscillator();
      oscillator.frequency.setValueAtTime(220, 0);
      oscillator.connect(masterVolume);

      keyboard.keyDown = function(note, frequency) {
        var osc = context.createOscillator();
        osc.frequency.value = frequency;
        osc.type = 'square';
  
        //conecta ao gain
        osc.connect(masterVolume);
        masterVolume.connect(context.destination);
    
        osc.start(context.currentTime);
        
        //NOTES
        const notes = {
          "C4": 261.63,
          "Db4": 277.18,
          "D4": 293.66,
          "Eb4": 311.13,
          "E4": 329.63,
          "F4": 349.23,
          "Gb4": 369.99,
          "G4": 392.00,
          "Ab4": 415.30,
          "A4": 440,
          "Bb4": 466.16,
          "B4": 493.88,
          "C5": 523.25
        }
        
        if (evt.keyCode === 72) { // h
          osc.frequency.notes = "C4";
        }
        if (evt.keyCode === 74) { // j
          osc.frequency.notes = "Db4";
          
        }
        if (evt.keyCode === 75) { // k
          osc.frequency.notes = "Db4";
        }
        
        if (evt.keyCode === 76) {  
          osc.frequency.notes = "Eb4";
        }
      }

      keyboard.keyUp = function(note, frequency) {
        oscillator.stop(context.currentTime);
      }

    });
  }
});

And thats my html:

<!DOCTYPE html>
<html lang="PT-BR">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>a-syyynth</title>

  <!-- A-Frame 0.8.0-->
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  
  <!-- components script -->
  <script src="script.js"></script>
  
  <!-- audio script -->
  <script src="synth.js"></script>

</head>

<body>
  <a-scene id="myScene">
    
    <!-- My Camera -->
    <a-camera id="myCamera" position="-1 0 0">
      <a-cursor color="#CCC"></a-cursor>
    </a-camera>
    
    <!-- key box k -->
    <a-box id="keyBoxK" color="#EF2D5E" position="0 0 -4" key-box>
      <a-animation
      attribute="rotation"
      dur="1000"
      to="0 360 0"
      begin="keypressed">
      </a-animation>
    </a-box>
    
    <!-- key box h -->
    <a-box id="keyBoxH" color="blue" position="2 0 -4" key-box>
      <a-animation
      attribute="rotation"
      dur="1000"
      to="360 0 0"
      begin="keypressed">
      </a-animation>
    </a-box>
    
    <!-- key box j -->
    <a-box id="keyBoxJ" color="yellow" position="-2 0 -4" key-box>
      <a-animation
      attribute="rotation"
      dur="1000"
      to="0 0 360"
      begin="keypressed">
      </a-animation>
    </a-box>
    
    <!-- key box l -->
    <a-box id="keyBoxL" color="#838383" position="-4 0 -4" key-box>
      <a-animation
      attribute="rotation"
      dur="1000"
      to="0 360 90"
      begin="keypressed">
      </a-animation>
    </a-box>
    
    <a-entity id="keyboardEl" key-audio-></a-entity>
  </a-scene>
</body>
</html>

Its just want a very simple sound event when key is pressed, but i confuse if the problem its in the audio code or in the a-frame component. any help is validdd im depressed. :,(




Aucun commentaire:

Enregistrer un commentaire