test scale.set_root

1 files changed, 35 insertions, 11 deletions

diff --git a/index.html b/index.html
index de74d16..f61b858 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <style>
-.note {
+div span {
   color: #339;
   text-decoration: underline;
   cursor: pointer;
@@ -107,7 +107,10 @@ Wendy Carlos' Alpha scale with perfect fifth divided in nine
 <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 = [
   {
@@ -146,14 +149,16 @@ var opts = [
   },
 ]
 
-var scale
+var scale, scales = []
 var scale_list = document.querySelector("#scale_list")
 
 opts.forEach(function(opt){
   var s = new Intonation(opt)
+  scales.push(s)
+  
   var heading = write( s.name )
   var limit = s.interval == 2 ? s.scale.length : s.scale.length*2
-  write( "<span>" + s.range( 0, limit+1).map(function(i){ return i.toFixed(0) }).join("</span> <span>") + "</span>" )
+  s.div = write( "<span>" + s.range( 0, limit+1).map(function(i){ return i.toFixed(0) }).join("</span> <span>") + "</span>" )
   write("&nbsp;")
 
   if (! scale) {
@@ -186,13 +191,12 @@ polysynth.set({
 })
 var comp = new Tone.Compressor(-30, 3).toMaster()
 polysynth.connect(comp)
-Array.prototype.slice.apply( document.querySelectorAll("span") ).forEach(function(span){
-  if (! span.innerHTML.match(/[^0-9]/)) {
-    var freq = parseInt(span.innerHTML)
-    span.classList.add("note")
-    span.addEventListener("click", function(){
-       play(freq)
-    })
+document.addEventListener("click", function(e){
+  var span = e.currentTarget
+  val = span.innerHTML
+  if (val && ! val.match(/[^0-9]/)) {
+    var freq = parseInt(val)
+    play(freq)
   }
 })
 
@@ -205,16 +209,36 @@ letters.toUpperCase().split("").map(function(k,i){
   keys[k.charCodeAt(0)] = i
 })
 numbers.split("").map(function(k,i){
-  keys[k.charCodeAt(0)] = true
+  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