git.dumitru.net mucegai / master index.html
master

Tree @master (Download .tar.gz)

index.html @master — raw · history · blame 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Main</title>
  <script src="Tone.js"></script>
  <script src="main.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap" rel="stylesheet">
<style>
@font-face {
  font-family: 'Fixedsys Excelsior';
  src: url('fsex300.woff');
}

body {
  background-color: #000;
}
.cell {
  font-family: 'Fixedsys Excelsior', monospace;
  font-size: 32px;
  width: 24px;
  height: 32px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  transition: 0.05s all;
  transition-timing-function: ease-out;
  color: #ccc;
}
.row {
  display: flex;
  flex-direction: row;
}
.selected {
  color: #000;
  background-color: #666;
}
.head {
  color: #ACECA1;
}
.triggered {
  box-shadow: 0 0 2rem 0.2rem #629460;
  background-color: #243119;
}
.dim {
  opacity: 0.2;
}
button {
  font-family: 'Fixedsys Excelsior', monospace;
  font-size: 32px;
  background-color: #000;
  border: 2px solid #fff;
  margin: 1rem;
}
.row {
  display: flex;
  justify-content: center;
}
.title {
  font-family: 'Fixedsys Excelsior', monospace;
  font-size: 32px;
  justify-content: space-between;
  color: #ade25d;
}
.playground {
  margin: 0 auto;
}
.state {
  font-family: 'Fixedsys Excelsior', monospace;
  font-size: 24px;
  color: #fff;
}
.stack-element {
  margin-right: 0.5rem;
}
.movement {
  color: #ade25d;
}
</style>
</head>
<body>
  <div id="app"></div>
  <script>
    let synth = new Tone.PolySynth(4, Tone.Synth, {
      oscillator: {
        type: 'sine'
      },
      envelope: {
        attack: 0,
        decay: 0.1,
        sustain: 0.3,
        release: 0.5
      }
    }).toMaster();
    let sampler = new Tone.Sampler({
      'C3': 'bd.wav',
      'C#3': 'sd.wav',
      'D3': 'hh.wav'
    }, () => {
      let app = Elm.Mucegai.init({
        node: document.getElementById('app')
      });
      app.ports.triggerSample.subscribe(message => {
        console.log(`triggering sample ${message}`);
        sampler.triggerAttackRelease(Tone.Midi(48 + message));
      });
      app.ports.triggerNote.subscribe(message => {
        console.log(`triggering note ${message}`);
        synth.triggerAttackRelease(Tone.Midi(message), "8n");
      });
    }).toMaster();
  </script>
</body>
</html>