28:null 29:["$","title",null,{"children":"d3GuitarExplorer | C. Cossé | Observable"}] 2e:T82c,html`

Key Signatures

Config

Half-steps from C
0

Show_Strings
Show_Frets
Show_Neck_Dots
Notes_As_Dots
Notes_As_Names
Octaves_From_E
Show_Current_Key
Show_Fret_Numbers

zoom

`2f:Tc6f,html`

User Documentation:
3/11/2023 5-Second Quick-Start: Click focus on top right slider and use left-right arrow keys for quick visual understanding of what this does! Also zoom waay out and repeat the same thing (I just tried that for the first time after smthg like 5 years).

The open string notes of a guitar using standard tuning are E,B,G,D,A,E (1-6). Notice that these are all natural keys, no sharps or flats, and that they correspond to white keys on the piano. There are 7 unique notes in any key + octave, and the open strings of the guitar correspond to 5 out of 7 of those notes for the key of C. The other 2 white notes, ie C and F, are located directly (ie one half-step) above the Bs and Es, same as BC and EF neighbors on the piano keyboard. The point here is that the open strings of a guitar are pretty much key of C maj. (Dmaj and Gmaj also have EBGDAE in their scales, but this app identifies with the key of Cmaj because of its overall significance and its significance with the circle-of-fifths.

When this application loads it shows all the notes in the key of Cmaj, which are the white notes on a piano. Note the lowest BC and EF pairs at the first fret by the nut, and the entire pattern, in general. These 7 white keys represent both Am and Cmaj keys, and all other key-signatures can be reached by translating every note in this group by common intervals. For example, the key of C# maj corresponds to a translation of every note in C by +1 half-step, or +1 fret. Likewise, translating the entire pattern by +2 half-steps gives all the notes in the key of D maj (Bm).

So the top slider in the Config panel translates the notes in the key of C maj (Am) by half-steps so as to visit all 12 keys. Navigating from C by +/- 5ths (7 half-steps), instead, leads to the circle of 5ths, where each succesive 5th picks-up another flat or sharp in the key signature. You can click the rows of the key-signature table to change the notes shown on the guitar. This also updates the half-step slider to the correct position. As an Exercise!, starting from C and using the key-signatures table, click the keys corresponding to successive half-steps in either direction and confirm each -1 or +1 increment at the half-step slider.

The Octaves From E toggle show regions in which notes of the same name have the same frequency, which is exactly one definition of "same octave". Consider traveling up the E6 string until the 12th fret, when the notes repeat. So this boundary includes E6 notes up to 11th fret; likewise on A5 string, notes up to the 5th fret are in that same first octave from E.

Having this level of control over notes and key-signatures opens the door for several follow-up ideas, especially exploring new ways to build chords.

Todo: use progressively lighter shades of pink/blue (wheel colors) for lowest scales in current key; Fix the octaves-from-e line-styles so as not to block-out svg layers underneathe; Remake with Vue.js; Make sectors of circle active ... clickable, hilighted, etc;

`30:T3ec4,Strat=function(_id_svg,_sf,_enabled,_synth){ var DEBUG=false; var me={}; me.id_svg=_id_svg; me.SF=_sf; me.enabled=_enabled; me.show_strings=true; me.show_dots=false; me.show_frets=true; me.show_names=false; me.show_xs=true; me.synth=_synth; me.bcr=document.body.getBoundingClientRect(); me.w_bridge=2.5; me.w_nut=13./8.; me.dy=me.w_bridge-me.w_nut; me.L0=25.5;//inches nut-to-bridge on my strat me.k=Math.pow(2.,1./12.); me.open_freqs=[329.63,246.94,196.0,146.83,110.0,82.41]; me.dot_frets=[0,3,5,7,9,12,15,17,19,21,24]; me.open_midis=[76,71,67,62,57,52]; me.open_names=['E','B','G','D','A','E']; me.open_octaves=[5,4,4,4,3,3]; me.octave_notes=['C','C#','D','D#','E','F','F#','G','G#','A','A#','B']; me.octave=2;//0,1,2 = 1st, 2nd, both (octaves) me.strings=[]; me.tlcx=0,me.tlcy=0; me.string_names={'0':'1','1':'2','2':'3','3':'4','4':'5','5':'6','6':'All Strings'} me.sigkey=0 me.sig={'majkey':'C Major','minkey':'A Minor'}; me.flatlist=[]; me.sharplist=[]; me.current_col_from_keysigs_table='major'; me.octaves_from_e=false; me.show_current_key=true; me.show_fret_numbers=false; me.call=(args,_col)=>{ me.sig=args; //console.log('strat',args,_col);//determines strings and notes //translate the whitekeys map depending on the +/- sigkey me.sigkey=eval(args.sigkey); //console.log('sigkey:',me.sigkey); me.sharplist=args.sharplist; me.flatlist=args.flatlist; me.current_col_from_keysigs_table=_col;//so we have this dep on what we wanna do w/it me.render(); } me.toggle_octaves_from_e=()=>{ if(me.octaves_from_e)me.octaves_from_e=false; else me.octaves_from_e=true; me.render(); } me.toggle_strings=()=>{ if(me.show_strings)me.show_strings=false; else me.show_strings=true; me.render(); } me.toggle_dots=()=>{ if(me.show_dots)me.show_dots=false; else me.show_dots=true; me.render(); } me.toggle_frets=()=>{ if(me.show_frets)me.show_frets=false; else me.show_frets=true; me.render(); } me.toggle_names=()=>{ if(me.show_names)me.show_names=false; else me.show_names=true; me.render(); } me.toggle_xs=()=>{ if(me.show_xs)me.show_xs=false; else me.show_xs=true; me.render(); } me.toggle_current_key=()=>{ if(me.show_current_key)me.show_current_key=false; else me.show_current_key=true; me.render(); } me.toggle_fret_numbers=()=>{ if(me.show_fret_numbers)me.show_fret_numbers=false; else me.show_fret_numbers=true; me.render(); } me.get_random=()=>{ var which_string=me.enabled; if(false) return {string_idx:5,fret_idx:0}; if(me.enabled == 6) which_string=parseInt(Math.random()*6); if(DEBUG) console.log(me.enabled,which_string); var which_fret=0; if(me.octave==0)which_fret=parseInt(Math.random()*11); else if(me.octave==1)which_fret=12+parseInt(Math.random()*10); else if(me.octave==2)which_fret=parseInt(Math.random()*23); return { string_idx:which_string, fret_idx:which_fret } } //methods me.mkstrings=()=>{ me.strings=[]; for(var sidx=0;sidx=me.octave_notes.length){ oidx=0; octave+=1; } var L_prev=me.L0*(1.-1./Math.pow(me.k,fidx-1)); var L=me.L0*(1.-1./Math.pow(me.k,fidx)); var y0=me.dy/2*(1.-L/me.L0); var y1=me.w_bridge-me.dy/2*(1.-L/me.L0); var fret={ 'x0':(L), 'y0':(y0), 'x1':(L), 'y1':(y1), 'xc':((L_prev+L)/2.), 'yc':((y0+.15+(y1-y0-.25)*(sidx)/5.)), 'freq':f0*Math.pow(me.k,fidx), 'fretnum':fidx, 'sidx':sidx, 'notename':notename, 'octave':octave, 'midi':me.open_midis[sidx]+fidx, 'xscroll':0.0, 'played':false, 'toff':0. } //if sidx==1:print fret['x0'],fret['y0'],fret['y1'] string.push(fret); } me.strings.push(string); } me.tlcx=0;//((me.bcr.width-me.strings[0][(me.strings[0].length)-1]['x0'])/2.); me.tlcy=0; } me.render=()=>{ me.g.selectAll("rect").remove(); me.g.selectAll("path").remove(); me.g.selectAll("circle").remove(); me.g.selectAll("polygon").remove(); d3.selectAll(".diamond").remove(); me.g.selectAll("text").remove(); me.tlcx=(me.bcr.width-me.SF*me.strings[0][22]['x0'])/2; me.tlcy=(me.bcr.width/4-me.SF*me.w_bridge)/2; var points; points=me.tlcx+","+(me.tlcy+me.SF*me.strings[0][0]['y0'])+" "; points+=(me.tlcx+me.SF*me.strings[0][22]['x0'])+","+(me.tlcy+me.SF*me.strings[0][22]['y0'])+" "; points+=(me.tlcx+me.SF*me.strings[0][22]['x0'])+","+(me.tlcy+me.SF*me.strings[0][22]['y1'])+" "; points+=me.tlcx+","+(me.tlcy+me.SF*me.strings[0][0]['y1']); me.g.append("polygon") .attr("points",points) .attr("fill","#210"); var fretline = d3.line() .x(function(d){return d.x;}) .y(function(d){return d.y;}); if(me.show_frets || me.show_fret_numbers){ for(var fidx=0;fidx<25;fidx++){//23 if(me.show_frets){ me.g.append('path') .attr("d",fretline([ {x:me.tlcx+me.SF*me.strings[0][fidx]['x0'],y:me.tlcy+me.SF*me.strings[0][fidx]['y0']}, {x:me.tlcx+me.SF*me.strings[0][fidx]['x1'],y:me.tlcy+me.SF*me.strings[0][fidx]['y1']} ])) .attr("stroke","#CCC") .attr("stroke-width",me.SF*2/40); }//show_frets if(me.show_fret_numbers){ if(fidx==0)continue; var last_x=me.tlcx+me.SF*me.strings[0][0]['x1']; if(fidx>0)last_x=me.tlcx+me.SF*me.strings[0][fidx-1]['x1']; var _xc=(last_x+me.tlcx+me.SF*me.strings[0][fidx]['x1'])/2; var _yc=me.tlcy+me.SF*me.strings[0][fidx]['y1']+15; me.g.append('text') .style("font-size","12pt") .attr("fill", "white") .attr("class","fret_number") .attr("transform", "translate("+(_xc-7)+","+(_yc+7)+")") .attr("text-anchor", "center") .text(fidx); }//fret_numbers }//fidx }//if show_frets if(me.show_dots){ for(var dfidx=0;dfidx-1){ _notename=me.strings[sidx][fidx+1]['notename'][0]+'b'; if(DEBUG)console.log(fidx,'allowing (flat1)',_notename); } else if(me.flatlist.indexOf(_notename[0])>-1){ if(DEBUG)console.log(fidx,'skipping already flatted',me.strings[sidx][fidx]['notename']); continue; } else if(_notename.length==2){ if(DEBUG)console.log(fidx,'skipping ',_notename); continue;//non-specified flat } else{if(DEBUG)console.log(fidx,'allowing (flat2)',_notename)}; } if(me.sigkey>0){ if(fidx>0 && me.sharplist.indexOf(me.strings[sidx][fidx-1]['notename'])>-1){ if(DEBUG)console.log(fidx,'allowing (sharp1)',_notename); } else if(me.sharplist.indexOf(_notename)>-1){ if(DEBUG)console.log(fidx,'skipping ',_notename); continue; } else if(_notename.length==2){ if(DEBUG)console.log(fidx,'skipping ',_notename); continue;//non-specified sharp } else{if(DEBUG)console.log(fidx,'allowing (sharp2)',me.strings[sidx][fidx]['notename'])}; } if(me.sigkey==0){ if(_notename.length==2)continue; if(DEBUG)console.log(fidx,'allowing ',_notename); } if(me.show_names){ me.g.append('text') .style("font-size","14pt") .attr("fill", "gold") .attr("id","score_label") .attr("transform", "translate("+(_xc-7)+","+(_yc+7)+")") .attr("text-anchor", "center") .text(_notename); } if(me.show_xs){ me.g.append("circle") .attr("cx",_xc) .attr("cy",_yc) .attr("r",rspot) .attr("stroke",dot_stroke_color) .attr("stroke-width",dot_stroke_width) .attr("fill",dot_fill); } render_count+=1; }//fidx }//sidx }//if show_xs if(me.show_current_key){ var _xc=me.tlcx+me.SF*(me.strings[5][12]['xc']); var _yc=me.tlcy+me.SF*(me.strings[5][12]['yc']); me.g.append('text') .style("font-size","18pt") .attr("fill", "white") .attr("id","current_key_label") .attr("transform", "translate("+(W/2-80)+","+(H-20)+")") .attr("text-anchor", "center") .text(me.sig['majkey']+ "("+me.sig['minkey']+")"); console.log(me.sig);//me.sig[me.sigkey]['majkey'] } } me.cycle_phase_for_vector_divergence=()=>{ var omega=Math.random(); var T=Math.acos(-1)*1013.5; return Math.PI*(1.-Math.acos(-1)/Math.pow(2,1./12.)*omega*T); } me.scaleCB=(_sf)=>{ me.SF=_sf; me.render(); } d3.select("#stringsB").on("click",function(){ me.correct=me.incorrect=0; me.enabled+=1; if(me.enabled>6)me.enabled=0; if(DEBUG)console.log(me.enabled); var label=""; if(me.enabled<6)label="String: "; d3.select("#stringsB").html(label + me.string_names[String(me.enabled)]); clearTimeout(me.timeout); }); d3.select("#octaveB").on("click",function(){ me.correct=me.incorrect=0; me.octave+=1; if(me.octave>2)me.octave=0; if(DEBUG)console.log(me.octave); var label=""; if(me.octave==0)label="Octave: 1"; else if(me.octave==1)label="Octave: 2"; else if(me.octave==2)label="All Notes"; d3.select("#octaveB").html(label); clearTimeout(me.timeout); }); //d3 graphics nodes d3.select("#"+_id_svg) .attr("width",me.bcr.width) .attr("height",me.bcr.width/4); me.g=d3.select("#"+_id_svg).append("g"); //initialization calls me.mkstrings(); me.render(); return me; }31:T130a,mksigs=function(){ console.log('mksigs'); var sigs={ '-7':{ 'majkey':'C Flat Major', 'minkey':'A Flat Minor', 'flatlist':['B','E','A','D','G','C','F'], 'sharplist':[], 'sigkey':'-7', 'sig_coords':[[1,4],[2,1],[3,5],[4,2],[5,6],[6,3],[7,7]], 'minkey_midi_roots':[32,44,56,68,80,92,104], 'majkey_midi_roots':[23,35,47,59,71,83,95,107], 'min_root':44, 'maj_root':47 }, '-6':{ 'majkey':'G Flat Major', 'minkey':'E Flat Minor', 'flatlist':['B','E','A','D','G','C'], 'sharplist':[], 'sigkey':'-6', 'sig_coords':[[1,4],[2,1],[3,5],[4,2],[5,6],[6,3]], 'minkey_midi_roots':[27,39,51,63,75,87,99], 'majkey_midi_roots':[30,42,54,66,78,90,102], 'min_root':51, 'maj_root':54 }, '-5':{ 'majkey':'D Flat Major', 'minkey':'B Flat Minor', 'flatlist':['B','E','A','D','G'], 'sharplist':[], 'sigkey':'-5', 'sig_coords':[[1,4],[2,1],[3,5],[4,2],[5,6]], 'minkey_midi_roots':[22,34,46,58,70,82,94,106], 'majkey_midi_roots':[25,37,49,61,73,85,97], 'min_root':46, 'maj_root':49 }, '-4':{ 'majkey':'A Flat Major', 'minkey':'F Minor', 'flatlist':['B','E','A','D'], 'sharplist':[], 'sigkey':'-4', 'sig_coords':[[1,4],[2,1],[3,5],[4,2]], 'minkey_midi_roots':[29,41,53,65,77,89,101], 'majkey_midi_roots':[32,44,56,68,80,92,104], 'min_root':53, 'maj_root':56 }, '-3':{ 'majkey':'E Flat Major', 'minkey':'C Minor', 'flatlist':['B','E','A'], 'sharplist':[], 'sigkey':'-3', 'sig_coords':[[1,4],[2,1],[3,5]], 'minkey_midi_roots':[24,36,48,60,72,84,96,108], 'majkey_midi_roots':[27,39,51,63,75,87,99], 'min_root':48, 'maj_root':51 }, '-2':{ 'majkey':'B Flat Major', 'minkey':'G Minor', 'flatlist':['B','E'], 'sharplist':[], 'sigkey':'-2', 'sig_coords':[[1,4],[2,1]], 'minkey_midi_roots':[31,43,55,67,79,91,103], 'majkey_midi_roots':[22,34,46,58,70,82,94,106], 'min_root':55, 'maj_root':58 }, '-1':{ 'majkey':'F Major', 'minkey':'D Minor', 'flatlist':['B'], 'sharplist':[], 'sigkey':'-1', 'sig_coords':[[1,4]], 'minkey_midi_roots':[26,38,50,62,74,86,98], 'majkey_midi_roots':[29,41,53,65,77,89,101], 'min_root':50, 'maj_root':53 }, '0':{ 'majkey':'C Major', 'minkey':'A Minor', 'flatlist':[], 'sharplist':[], 'sigkey':'0', 'sig_coords':[], 'minkey_midi_roots':[21,33,45,57,69,81,93,105], 'majkey_midi_roots':[24,36,48,60,72,84,96,108], 'min_root':57, 'maj_root':60 }, '1':{ 'majkey':'G Major', 'minkey':'E Minor', 'flatlist':[], 'sharplist':['F'], 'sigkey':'1', 'sig_coords':[[1,0]], 'minkey_midi_roots':[28,40,52,64,76,88,100], 'majkey_midi_roots':[31,43,55,67,79,91,103], 'min_root':52, 'maj_root':55 }, '2':{ 'majkey':'D Major', 'minkey':'B Minor', 'flatlist':[], 'sharplist':['F','C'], 'sigkey':'2', 'sig_coords':[[1,0],[2,3]], 'minkey_midi_roots':[23,35,47,59,71,83,95,107], 'majkey_midi_roots':[26,38,50,62,74,86,98], 'min_root':59, 'maj_root':62 }, '3':{ 'majkey':'A Major', 'minkey':'F Sharp Minor', 'flatlist':[], 'sharplist':['F','C','G'], 'sigkey':'3', 'sig_coords':[[1,0],[2,3],[3,-1]], 'minkey_midi_roots':[30,42,54,66,78,90,102], 'majkey_midi_roots':[21,33,45,57,69,81,93,105], 'min_root':54, 'maj_root':57 }, '4':{ 'majkey':'E Major', 'minkey':'C Sharp Minor', 'flatlist':[], 'sharplist':['F','C','G','D'], 'sigkey':'4', 'sig_coords':[[1,0],[2,3],[3,-1],[4,2]], 'minkey_midi_roots':[25,37,49,61,72,84,96], 'majkey_midi_roots':[28,40,52,64,76,88,100], 'min_root':61, 'maj_root':64 }, '5':{ 'majkey':'B Major', 'minkey':'G Sharp Minor', 'flatlist':[], 'sharplist':['F','C','G','D','A'], 'sigkey':'5', 'sig_coords':[[1,0],[2,3],[3,-1],[4,2],[5,5]], 'minkey_midi_roots':[32,44,56,68,80,92,104], 'majkey_midi_roots':[23,35,47,59,71,83,95,107], 'min_root':56, 'maj_root':59 }, '6':{ 'majkey':'F Sharp Major', 'minkey':'D Sharp Minor', 'flatlist':[], 'sharplist':['F','C','G','D','A','E'], 'sigkey':'6', 'sig_coords':[[1,0],[2,3],[3,-1],[4,2],[5,5],[6,1]], 'minkey_midi_roots':[27,39,51,63,75,87,99], 'majkey_midi_roots':[30,42,54,66,78,90,102], 'min_root':63, 'maj_root':66 }, '7':{ 'majkey':'C Sharp Major', 'minkey':'A Sharp Minor', 'flatlist':[], 'sharplist':['F','C','G','D','A','E','B'], 'sigkey':'7', 'sig_coords':[[1,0],[2,3],[3,-1],[4,2],[5,5],[6,1],[7,4]], 'minkey_midi_roots':[22,34,46,58,70,82,94,106], 'majkey_midi_roots':[25,37,49,61,73,85,97], 'min_root':58, 'maj_root':61 }, } return sigs }32:Tce5,KeySigs=function(){ var me={}; me.sigs=mksigs(); me.widget=document.createElement("div"); me.widget.className="keysigs"; me.table=document.createElement("table"); me.hilited_row=0; me.table.className="keysigs"; me.getNext=function(sigkey,key,min){ for(var kidx=0;kidx=min) return me.sigs[sigkey][key][kidx] } me.hilite_row=function(_row){ me.hilited_row=_row; console.log('me.hilited_row: ',me.hilited_row); d3.selectAll('.sigspot').style('background-color','#444444'); d3.selectAll('.minspot').style('background-color','#444444'); d3.selectAll('.majspot').style('background-color','#444444'); for(var cidx=0;cidx<10;cidx++){ var _classname='.r'+(parseInt(me.hilited_row)+7); console.log('setting ',_classname); d3.selectAll(_classname).style('background-color','#555555'); } } me.sigCB=function(e){ var sig_row=e.target.id.split(":")[0]; var sig_col=e.target.id.split(":")[1]; console.log(sig_row,sig_col); w_strat.call(me.sigs[sig_row],sig_col); var _lk={ '-7':-1,'-6':-6,'-5':1,'-4':-4,'-3':3, '-2':-2,'-1':5,'0':0,'1':7,'2':2, '3':-3,'4':4,'5':-1,'6':-6,'7':1 } console.log('calling to setAttr value: ',_lk[sig_row].toString()); //document.getElementById("halfstepB").setAttribute("value",_lk[sig_row].toString()); console.log("hi coronavirus"); d3.select("#halfstepB").attr("value",_lk[sig_row].toString()); d3.select("#halfsteplabel").html(_lk[sig_row]); me.hilite_row(sig_row); } for(var ridx=-7;ridx<8;ridx++){ var tr=me.table.insertRow(-1); // var td0=tr.insertCell(-1); // var sigspot_table=document.createElement("table"); // var str=sigspot_table.insertRow(-1); // var std; for(var cidx=0;cidx<7;cidx++){ var std=tr.insertCell(-1); std.className="spot"; var sigspot=document.createElement("div");//natural=♮ if(ridx<0 && cidx0 && cidx

d3GuitarExplorer

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"svg={\n const _svg = d3.create(\"svg\")\n \t.attr(\"id\",\"strat_svg\")\n \t.attr(\"width\",W)\n \t.attr(\"height\",H)\n .style(\"background-color\",\"#666\");\n return _svg.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"$2e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":711,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"BCR=()=>{\n return document.body.getBoundingClientRect()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"W=BCR().width/940*940;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"H=BCR().width/940*240;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"bootstrap=require(\"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"w_strat=new Strat(\"strat_svg\",scale_factor.value,6,synth)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"scale_factor=({'value':BCR().width/940*45.0,})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"Synth=function(){\n\tvar me={};\n\tme.test=(freq)=>{\n try{\n let audioContext = new window.AudioContext();// || window.webkitAudioContext);\n\n let masterGainNode = audioContext.createGain();\n \n masterGainNode.connect(audioContext.destination);\n \n\t\t var osc = audioContext.createOscillator();\n osc.connect(masterGainNode);\n osc.type = \"sine\";\n osc.frequency.value = freq;\n osc.start();\n \n\t\t d3.timeout(function(){osc.stop();},1400);\n }\n catch(e){console.log(e);}\n\t}\n\treturn me;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"synth=new Synth();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"init();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":885,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":883,"value":"md`\\[1\\] [C. Cossé, d3StratoTrainer](https://observablehq.com/@ccosse/d3stratotrainer)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"md`\\[2\\] [C. Cossé, MIDI SightReader](http://ccosse.github.io/sightreadingtrainer/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"md`\\[3\\] [Harry F. Olson, Music, Physics and Engineering](https://www.amazon.com/Music-Physics-Engineering-Dover-Books/dp/0486217698/)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"md`\\[4\\] [Vaideology, Steve Vai](https://www.amazon.com/Vaideology-Basic-Theory-Guitar-Players/dp/1540030997/ref=sr_1_1?keywords=vaideology&qid=1575830564&sr=8-1)` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":761,"value":"html`\n\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":604,"value":"html`\n\n` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"