댓글 검색 목록

[javascript] 음악을 좋아하는 사람들을 위한 키보드 구현

페이지 정보

작성자 운영자 작성일 18-06-13 11:08 조회 1,230 댓글 0

https://codepen.io/andrewphillipdoss/pen/rJXeeW

https://cdnjs.cloudflare.com/ajax/libs/tone/0.7.1/Tone.min.js

위 라이브러리가 필요합니다.

HTML :

<div id='container1'>
  <div id='container2'>
    <div class='white_key key' onmousedown='startSound(0, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 1)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 1)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 1)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 1)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 1)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 1)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 1)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 2)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 2)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 2)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 2)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 2)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 2)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 2)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 3)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 3)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 3)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 3)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 3)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 3)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 3)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 4)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 4)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 4)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 4)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 4)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 4)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 4)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 5)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 5)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 5)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 5)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 5)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 5)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 5)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 6)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 6)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 6)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 6)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 6)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 6)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 6)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(0, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(0, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(1, 7)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(1, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(2, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(2, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(3, 7)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(3, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(4, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(4, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(5, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(5, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(6, 7)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(6, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(7, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(7, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(8, 7)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(8, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(9, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(9, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(10, 7)' onmouseup='stopSound()'></div>
    <div class='black_key key' onmousedown='startSound(10, 7)' onmouseup='stopSound()'></div>
    <div class='white_key key' onmousedown='startSound(11, 7)' onmouseup='stopSound()'></div>
    <div onmousedown='startSound(11, 7)' onmouseup='stopSound()'></div>
  </div>
</div>
<div id='knob' onclick='changeSynth()'></div>

CSS :

body {
  background-color: #96CDCD;
}

#container1 {
  background-image: url("https://graphicburger.com/wp-content/uploads/2017/09/6-Fine-Wood-Textures-Vol3-600.jpg");
  margin: auto;
  width: 724px;
  height: 175px;
  border-radius: 4px;
}

#container2 {
  margin: auto;
  background-color: black;
  overflow: overlay;
  width: 686px;
  /*position: fixed; */
  padding-top: 15px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 5px;
  border-radius 20px;
}

#knob {
  border-style: solid;
  border-width: 2px;
  background-color: blue;
  position: relative;
  width: 50px;
  height: 15px;
  left: 75%;
  bottom: 90%;
  border-radius: 20%;
}

.key {
  float: left;
  position: relative;
  border-radius: 2px;
}

.white_key {
  background-color: white;
  border:1px solid black;
  height: 100px;
  width: 12px;
  z-index: 1;
}

.white_key:active {
  height: 98px;
  border-radius: 3px;
}

.black_key {
  background-color: black;
  height: 70px;
  width: 10px;
  margin-left: -5px;
  margin-right: -5px;
  z-index: 2;
}

.black_key:active {
  height: 68px;
  border-radius: 2.5px;
}

Javascript :

var notes = [
    "C", "C#", "D", "Eb", "E", "F", "F#", "G", "G#",     "A", "Bb", "B"
  ]

var synth = new Tone.Synth({
	"oscillator" : {
		"type" : "pwm",
		"modulationFrequency" : 0.2
	},
	"envelope" : {
		"attack" : 0.02,
		"decay" : 0.1,
		"sustain" : 0.2,
		"release" : 0.9,
	}
}).toMaster();

function startSound(note, octave) {
    synth.triggerAttack(notes[note] + octave);
    console.log(notes[note] + octave);
}

function stopSound() {
    synth.triggerRelease();
}

function changeSynth() {
  knob = document.getElementById('knob');
  if (synth.oscillator.type == "pwm") {
    synth.oscillator.type = "square";
    knob.style.backgroundColor = "red";
  }
  else {
    synth.oscillator.type = "pwm";
    knob.style.backgroundColor = "blue";
  }
  console.log(synth.oscillator.type);
}