Initial commit

1j01 · Mar 7, 2017 · 11a4efa · 11a4efa
1 parent e097f4c
commit 11a4efa
Show file tree

Hide file tree

Showing 10 changed files with 3,793 additions and 0 deletions.
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2016 Isaiah Odhner
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,8 @@
+# [MidiCowDont][app] (pre-working-title)
+
+An extremely simple online live MIDI visualizer,
+built with [SimpleMidiInput.js](https://github.com/kchapelier/SimpleMidiInput.js)
+
+I intend to make this into a MIDI *recorder*.
+
+[app]: http://1j01.github.io/midicowdont/
diff --git a/app.coffee b/app.coffee
@@ -0,0 +1,69 @@
+smi = new SimpleMidiInput()
+
+onsuccesscallback = (midi)->
+	smi.attach(midi)
+	console.log 'smi: ', smi
+
+onerrorcallback = (err)->
+	console.log 'ERROR: ', err
+
+navigator.requestMIDIAccess().then onsuccesscallback, onerrorcallback
+
+notes = []
+current_notes = new Map
+
+smi.on 'noteOn', (data)->
+	{event, key, velocity} = data
+	old_note = current_notes.get(key)
+	# current_notes.delete(key)
+	start_time = performance.now()
+	if old_note
+		# console.log("double noteOn?")
+		# note = old_note
+		return
+	note = {key, velocity, start_time}
+	current_notes.set(key, note)
+	notes.push(note)
+	# console.log(event, note)
+
+smi.on 'noteOff', (data)->
+	{event, key} = data
+	note = current_notes.get(key)
+	if note
+		# console.log(event, note)
+		note.end_time = performance.now()
+		note.length = note.end_time - note.start_time
+	current_notes.delete(key)
+
+canvas = document.createElement "canvas"
+ctx = canvas.getContext "2d"
+
+document.body.appendChild canvas
+
+px_per_second = 20
+do animate = ->
+	requestAnimationFrame animate
+	now = performance.now()
+	canvas.width = innerWidth if canvas.width isnt innerWidth
+	canvas.height = innerHeight if canvas.height isnt innerHeight
+	ctx.clearRect(0, 0, canvas.width, canvas.height)
+	ctx.save()
+	ctx.translate(0, canvas.height*4/5)
+	ctx.fillStyle = "red"
+	ctx.fillRect(0, 0, canvas.width, 1)
+	for note in notes
+		w = canvas.width / 128
+		x = note.key * w
+		# console.log note.length
+		y = (note.start_time - now) / 1000 * px_per_second
+		# h = (note.length ? 500000) / 1000 * px_per_second
+		# ctx.fillStyle = if note.length then "yellow" else "blue"
+		# ctx.fillRect(x, y, w, h)
+		unless note.length?
+			ctx.fillStyle = "#800"
+			ctx.fillRect(x, y, w, 50000)
+		h = (note.length ? now - note.start_time) / 1000 * px_per_second
+		ctx.fillStyle = if note.length then "yellow" else "lime"
+		ctx.fillRect(x, y, w, h)
+		# ctx.fillRect(x, 50, w, 50)
+	ctx.restore()
diff --git a/app.css b/app.css
@@ -0,0 +1,20 @@
+html,
+body {
+	font-family: Helvetica, sans-serif;
+	height: 100%;
+	padding: 0;
+	margin: 0;
+	background: #1B1B1B;
+	color: white;
+}
+body {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+@media (max-width: 75em) and (max-height: 55em), print {
+	#fork-me-on-github {
+		display: none;
+	}
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,16 @@
+<!doctype html>
+<head>
+	<meta charset="utf8" />
+	<title>MidiCowDont</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<link rel="stylesheet" href="app.css" />
+</head>
+<body>
+	<a href="https://github.com/1j01/midicowdont/"><img id="fork-me-on-github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
+	<script src="lib/SimpleMidiInput.js"></script>
+	<!-- <script src="lib/teoria.js"></script> -->
+	<!-- <script src="lib/simple-reverb.js"></script> -->
+	<!-- <script src="lib/pep.js"></script> -->
+	<script src="lib/coffee-script.js"></script>
+	<script src="app.coffee" type="text/coffeescript"></script>
+</body>