<html>

<head>

  <script src="https://unpkg.com/tone-rhythm@0.0.2/dist/tone-rhythm.min.js"></script>
  <script src="https://unpkg.com/scale-maker@0.2.2/lib/scaleMaker.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
  <meta charset="utf-8" />

</head>

<body>
  <button onclick="toggle()">Toggle</button>
  <script src="sketch.js"></script>
</body>

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

  Scales with Scalemaker
*/

// create a minor pentatonic scale over 2 octaves (9 notes), starting on F# in the
// 5th octave and get the value of the notes in hertz
// or 
// allScales === ['chromatic', 'wholeTone', 'major', 'majorPentatonic', 'minorPentatonic', 'kuomiPentatonic', 'chinesePentatonic', 'naturalMinor', 'harmonicMinor', 'melodicMinor', 'myWeirdScale'];

var myScaleInHertz = ScaleMaker.makeScale('majorPentatonic', 'F#3', 8).inHertz;
// console.log(myScaleInHertz)

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

// Tonejs wants values in hertz
// make sure the arrays match in length
// try to use square brackets to add together multiple notes
// ['r', etc] will make it into a rest
const pitches = myScaleInHertz 
const durations = ['8n', '8n', '8n', '16n', '2n', '16n', '8n', '8n', '16n']
console.log(pitches.length === durations.length)
// combine them together 
const mergedData = toneRhythm.mergeMusicDataPart({
  rhythms: durations,
  notes: pitches
});

// 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);
melodyPart.loop = true 
melodyPart.loopEnd = "1:1:0"
const toggle = () => Tone.Transport.toggle()

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