path: root/index.html

<style>
div span {
  color: #339;
  text-decoration: underline;
  cursor: pointer;
}
* {
  cursor: default;
}
.heading {
  cursor: pointer;
}
.active {
  font-weight: bold;
}
pre {
  white-space: pre-line;
}
</style>

<script type="text/scale" id="meantone-scl">
! meanquar.scl
!
1/4-comma meantone scale. Pietro Aaron's temperament (1523)
 12
!
 76.04900
 193.15686
 310.26471
 5/4
 503.42157
 579.47057
 696.57843
 25/16
 889.73529
 1006.84314
 1082.89214
 2/1
</script>

<script type="text/scale" id="twelveet-scl">
! 12et.scl
!
12-edo equal temperament (scl)
 12
!
 100.
 200.
 300.
 400.
 500.
 600.
 700.
 800.
 900.
 1000.
 1100.
 1200.
</script>

<script type="text/scale" id="mavila12-scl">
! mavila12.scl
!
A 12-note mavila scale (for warping meantone-based music), 5-limit TOP
 12
!
-30.99719
 163.50770
 358.01258
 327.01540
 521.52028
 490.52310
 685.02798
 654.03080
 848.53568
 1043.04057
 1012.04338
 1206.54826
</script>

<script type="text/scale" id="carlos_alpha-scl">
! carlos_alpha.scl
!
Wendy Carlos' Alpha scale with perfect fifth divided in nine
 18
!
 78.00000
 156.00000
 234.00000
 312.00000
 390.00000
 468.00000
 546.00000
 624.00000
 702.00000
 780.00000
 858.00000
 936.00000
 1014.00000
 1092.00000
 1170.00000
 1248.00000
 1326.00000
 1404.00000
</script>

<pre>
<script src="http://asdf.us/harp/js/vendor/Tone.min.js"></script>
<script src="intonation.js"></script>
root <input type="text" id="root" value="440">

<div id="scale_list"></div>

<script>
var opts = [
  {
    intervals: '1/1 9/8 5/4 4/3 3/2 5/3 15/8 2/1',
    name: "harmonic scale",
  },
  {
    root: 450,
    intervals: '1/1 9/8 5/4 4/3 3/2 5/3 15/8 2/1',
    name: "harmonic scale @ 450",
  },
  {
    tet: 5,
  },
  {
    tet: 12,
  },
  {
    scl: document.querySelector("#twelveet-scl").innerHTML,
  },
  {
    tet: 17,
  },
  {
    intervals: '1/1 81/80 33/32 21/20 16/15 12/11 11/10 10/9 9/8 8/7 7/6 32/27 6/5 11/9 5/4 14/11 9/7 21/16 4/3 27/20 11/8 7/5 10/7 16/11 40/27 3/2 32/21 14/9 11/7 8/5 18/11 5/3 27/16 12/7 7/4 16/9 9/5 20/11 11/6 15/8 40/21 64/33 160/81 2/1',
    name: "harry partch scale",
  },
  {
    scl: document.querySelector("#meantone-scl").innerHTML,
  },
  {
    scl: document.querySelector("#mavila12-scl").innerHTML,
  },
  {
    scl: document.querySelector("#carlos_alpha-scl").innerHTML,
  },
]

var scale, scales = []
var scale_list = document.querySelector("#scale_list")

opts.forEach(function(opt, i){
  var s = new Intonation(opt)
  scales.push(s)
  
  var limit = s.interval == 2 ? s.scale.length : s.scale.length*2
  s.heading = write( s.name )
  s.div = write( "<span>" + s.range( 0, limit+1).map(function(i){ return i.toFixed(0) }).join("</span> <span>") + "</span>" )
  s.div.dataset.scale_index = i
  write("&nbsp;")

  if (! scale) {
    set_scale(s)
  }

  s.heading.classList.add("heading")
  s.heading.addEventListener("click", function(){
    set_scale(s)
  })
})

function set_scale (s) {
  if (scale == s) return
  var active = document.querySelector(".active")
  active && active.classList.remove("active")
  scale = s
  s.heading.classList.add("active")
  console.log(s)
  console.log("scale:", s.name)
}

var polysynth = new Tone.PolySynth(8, Tone.synth)
polysynth.set({
  oscillator: { type: "triangle" },
  envelope:{
    attack: 0.01,
    decay: 2.5,
    sustain: 0.0,
    release: 0.1,
  }
})
var comp = new Tone.Compressor(-30, 3).toMaster()
polysynth.connect(comp)
document.addEventListener("click", function(e){
  var span = e.target
  val = span.innerHTML
  if (val && ! val.match(/[^0-9]/)) {
    var freq = parseInt(val)
    play(freq)
    var div = span.parentNode
    set_scale( scales[ div.dataset.scale_index ] )
  }
})

var keys
var keys = {}
var key_numbers = {}
var letters = "zxcvbnmasdfghjklqwertyuiop"
var numbers = "1234567890";
letters.toUpperCase().split("").map(function(k,i){
  keys[k.charCodeAt(0)] = i
})
numbers.split("").map(function(k,i){
  keys[k.charCodeAt(0)] = i+letters.length
  key_numbers[k.charCodeAt(0)] = true
})

document.querySelector("#root").addEventListener("input", update_root, true)
function update_root(e){
  e.preventDefault()
  e.stopPropagation()
  var root = document.querySelector("#root").value
  root = parseFloat(root)
  if ( ! root || isNaN(root) ) return
  this.value = root
  scales.forEach(function(s, i){
    if (i == 1) s.set_root(root + 10)
    else s.set_root(root)
    var limit = s.interval == 2 ? s.scale.length : s.scale.length*2
    s.div.innerHTML = "<span>" + s.range( 0, limit+1).map(function(i){ return i.toFixed(0) }).join("</span> <span>") + "</span>"
  })
}
window.addEventListener("keydown", keydown, true)
function keydown (e){
  if (e.altKey || e.ctrlKey || e.metaKey) {
    e.stopPropagation()
    return
  }
  if (document.activeElement instanceof HTMLInputElement &&
      (e.keyCode in key_numbers)) {
    e.stopPropagation()
    return
  }
  if (! (e.keyCode in keys)) return
  var index = keys[e.keyCode]
  if (e.shiftKey) index += letters.length
  var freq = scale.index(index)
  play(freq)
}

function write(s){
  var div = document.createElement("div")
  div.innerHTML = s
  scale_list.appendChild(div)
  return div
}
function play (freq) {
  console.log(freq.toFixed(0))
  polysynth.triggerAttackRelease(freq, 1.5)
}
</script>