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