https://bitcoinaudio.github.io/js/listen.js

1// *  PRESET CHOOSING
2 
3function chooseRandomInstrument(){
4	var keys = Object.keys(PresetList);
5	var randomInst = keys[Math.floor(Math.random() * keys.length)];
6	return randomInst;
7}
8
9function chooseRandomPreset(instrument){
10	var keys = PresetList[instrument];
11	var randomInst = keys[Math.floor(Math.random() * keys.length)];
12	return randomInst;	
13}
14
15function loadPreset(inst, preset){
16	var xhr = new XMLHttpRequest();
17	var url = "./instrument/" + inst + "/" + preset;
18	xhr.onreadystatechange = function() {
19		if (xhr.readyState === 4 && xhr.status === 200) {
20			codemirror.setValue(xhr.responseText);
21			setCurrentPreset(xhr.responseText);
22		}
23	};
24	xhr.open("GET", url, true);
25	xhr.send();
26	document.querySelector("#Names select").value = inst;
27	document.querySelector("#Preset select").value = preset;
28}
29
30function setCurrentPreset(preset){
31	try {
32		instrument.set(JSON.parse(preset));
33	} catch(e){
34		// indicate the error
35		codemirror.getWrapperElement().classList.add("Error");
36		document.querySelector("#ErrorText").textContent = e.message;
37	}
38}
39
40/**
41 *  EVENTS
42 */
43function setupEvents(){
44	var listenButton = document.querySelector("button");
45	listenButton.addEventListener("click", function(e){
46		//get the apply the preset
47		setCurrentPreset(codemirror.getValue());
48	}, true);
49}
50
51/**
52 *  Tone.js
53 */
54var instrument;
55function makeInstrument(inst){
56	if (instrument){
57		instrument.dispose();
58	}
59	instrument = new Tone[inst]().toMaster();
60	
61}
62
63var keyboard = new AudioKeys({
64	polyphony: 1,
65	rows: 1,
66	priority: "last"
67});
68
69
70keyboard.down(function (note) {
71	if (instrument.toString() === "NoiseSynth") {
72		instrument.triggerAttack();
73	} else {
74		instrument.triggerAttack(note.frequency);
75	}
76});
77
78keyboard.up(function (note) {
79    instrument.triggerRelease();
80});
81
82/**
83 *  Dropdown
84 */
85function makeInstrumentDropDown(){
86	var keys = Object.keys(PresetList);
87	var container = document.querySelector("#Names select");
88	for (var i = 0; i < keys.length; i++){
89		var option = document.createElement("option");
90		container.appendChild(option);
91		option.value = keys[i];
92		option.textContent = keys[i];
93	}
94}
95
96function makePresetDropDown(instrument){
97	var presets = PresetList[instrument];
98	var container = document.querySelector("#Preset select");
99	//clear the previous one
100	container.innerHTML = "";
101	for (var i = 0; i < presets.length; i++){
102		var option = document.createElement("option");
103		container.appendChild(option);
104		var file = presets[i];
105		option.value = file;
106		option.textContent = file.substring(0, file.length - 5);
107	}
108
109	var randomPreset = chooseRandomPreset(instrument);
110	container.value = randomPreset;
111	loadPreset(instrument, randomPreset);
112}
113
114function dropDownEvents(){
115
116	var presets = document.querySelector("#Preset select");
117	presets.addEventListener("input", function(e){
118		makeInstrument(instruments.value);
119		loadPreset(instruments.value, presets.value);
120	}, false);
121
122	var instruments = document.querySelector("#Names select");
123	instruments.addEventListener("input", function(e){
124		makeInstrument(instruments.value);
125		makePresetDropDown(instruments.value);
126	}, false);
127}
128
129/**
130 *  EDITOR
131 */
132
133var codemirror;
134
135//document loaded
136document.addEventListener("DOMContentLoaded", function(event) {
137	//choose a random instrument and preset
138	var randomInst = chooseRandomInstrument();
139	makeInstrument(randomInst);
140	// loadPreset(randomInst, randomPreset);
141	//setup the events
142	setupEvents();
143	codemirror = new CodeMirror(document.querySelector("#JSON"), {
144		mode : {name: "javascript", json: true},
145	});
146
147	codemirror.addKeyMap({
148		"Cmd-Enter": function(){
149			setCurrentPreset(codemirror.getValue());
150			document.querySelector("button").focus();
151		}
152	});
153
154	codemirror.on("keydown", function(c, e){
155		codemirror.getWrapperElement().classList.remove("Error");
156		document.querySelector("#ErrorText").textContent = "";
157		e.stopPropagation();
158	});
159	codemirror.on("keyup", function(c, e){
160		e.stopPropagation();
161	});
162
163	//make the drop downs
164	makeInstrumentDropDown();
165	makePresetDropDown(randomInst);
166	dropDownEvents();
167
168	// make the logo in the corner
169	//Logo({
170	//	"container" : "#Topbar",
171	//	"height" : 28,
172	//	"width" : 140
173	//});
174});