<html>

<head>

    <script src="https://unpkg.com/tone-rhythm@0.0.2/dist/tone-rhythm.min.js"></script>

  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <button onclick="start()">start</button>
  <button onclick="stop()">stop</button>
  <script src="sketch.js"></script>
</body>

</html>
html, body {
  margin: 0;
  padding: 0;
}
/* PDM Course: Sound Unit

  Tone-Rhythm 
  Maria 
  see: https://github.com/scraggo/tone-rhythm
*/

const synth = new Tone.Synth().toDestination();

// durations array 
const mariaDurations = [
  "8n",
  "8n",
  ["2n", "4n"],
  "8n",
  "4t",
  "4t",
  "4t",
  "4t",
  "4t",
  "4t",
  "8n",
  ["2n", "4n"],
  "8n",
  "8n",
  "8n",
  "8n",
  "8n",
  ["4n", "8n"],
  "8n",
  "8n",
  "8n",
  "8n",
  "8n",
  "4n",
  "4n",
  ["2n", "4n", "8n"],
  "8n",
  "8n",
  ["2n", "4n"],
  "8n",
  "4t",
  "4t",
  "4t",
  "4t",
  "4t",
  "4t",
  "8n",
  ["2n", "4n"],
  "8n",
  "8n",
  "8n",
  "8n",
  "8n",
  ["4n", "8n"],
  "8n",
  "8n",
  "8n",
  "8n",
  "8n",
  "4n",
  "4n",
  ["2n", "4n", "8n"]
];

// pitches array
const mariaPitches = [
  "Eb4",
  "A4",
  "Bb4",
  "Eb4",
  "A4",
  "Bb4",
  "C5",
  "A4",
  "Bb4",
  "C5",
  "A4",
  "Bb4",
  "Bb4",
  "A4",
  "G4",
  "F4",
  "Eb4",
  "F4",
  "Bb4",
  "Ab4",
  "G4",
  "F4",
  "Eb4",
  "F4",
  "Eb4",
  "G4",
  "Eb4",
  "A4",
  "Bb4",
  "Eb4",
  "A4",
  "Bb4",
  "C5",
  "A4",
  "Bb4",
  "C5",
  "D5",
  "Bb4",
  "D5",
  "Eb5",
  "D5",
  "C5",
  "Bb4",
  "D5",
  "D5",
  "Eb5",
  "D5",
  "C5",
  "Bb4",
  "D5",
  "Eb5",
  "F5"
];

// combine them together 
const mergedData = toneRhythm.mergeMusicDataPart({
  rhythms: mariaDurations,
  notes: mariaPitches
});

// see the data as an array of objects like Part needs
console.log(mergedData)
const melodyPart = new Tone.Part((time, value) => {
  synth.triggerAttackRelease(value.note, value.duration, time);
}, mergedData).start(0);

const start = () => Tone.Transport.start()
const stop = () => Tone.Transport.stop()

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/kylestetz/AudioKeys/master/dist/audiokeys.js
  2. https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.12/Tone.js