Current script for starting Music
#!/bin/bash
echo "Spawning jackd -d alsa"
jackd -d alsa &
echo "Waiting For Jack to Wake Up...."
sleep 3
echo "Spawning a2jmidid -e"
a2jmidid -e &
sleep 3
echo "Spawning qjacktl"
qjackctl &
echo "Spawning qsynth"
qsynth &
echo "Finished"
Current script for Starting Midi listener
#!/usr/sbin/python2.7
from bottle import run, route, request
import alsaseq
from time import sleep
alsaseq.client('WebMIDI', 1,1, False)#http://127.0.0.1/midi?note=60&duration=100
alsaseq.connectfrom(0,129,0)
IP = "127.0.0.1"
VOICE = 127
PLAYBACK_RATE = .5
notes = []
def save_note(note, duration, channel):
notes.append({"note":note,"duration":duration,"channel":channel})
def play_note(note, duration, channel):
alsaseq.output( (6, 1, 0, 1, (5, 0), (0, 0), (0, 0), (channel,
int(note), 127, 0, int(duration))) )
def playback():
for note in notes:
sleep(PLAYBACK_RATE)
play_note(note["note"],note["duration"],note["channel"])
@route('/midiclear',method="GET")
def midiclear():
notes[:] = []
@route('/midiplayback',method="GET")
def midiplayback():
playback()
@route('/midi',method="GET")
def midi():
note = int(request.query['note'])
duration = int(request.query['duration'])
channel = int(request.query['channel'])
save_note(note, duration, channel)
play_note(note, duration, channel)
return {"data":{"note":note,"duration":duration,"status":alsaseq.status()}}
run(host=IP, port=8080)
Current html page:
<html>
<head>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.custom.js"></script>
<link href="css/sunny/jquery-ui-1.10.3.custom.css" rel="stylesheet">
<meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'>
<script type="text/javascript" src="midi.js"></script>
<style>
div.normal,div.upper,div.lower,#playback,#clear,#channel,#channel_up,#channel_down {height:60px;width:80px;position:
fixed;
text-align: center;
vertical-align:middle;
display: table-cell;}
div.lower {background-color:blue}
div.upper {background-color:green}
div.bnote {background-color:black; color:white}
div.pinky.lower {top:140px}
div.pinky.normal {top:80px}
div.pinky.upper {top:20px}
div.ring.lower, div.middle.lower {top:120px}
div.ring.normal, div.middle.normal {top:60px}
div.ring.upper , div.middle.upper {top:0px}
div.pointer.lower {top:130px}
div.pointer.normal {top:70px}
div.pointer.upper {top:10px}
div.thumb.lower {top:420px}
div.thumb.normal {top:360px}
div.thumb.upper {top:300px}
div.b {left:900px}
div.as {left:800px}
div.a {left:700px}
div.gs {left:600px}
div.g {left:620px}
div.fs {left:520px}
div.e {left:300px}
div.f {left:400px}
div.ds {left:300px}
div.d {left:200px}
div.cs {left:100px}
div.c {left:0px}
#playback{background-color:red;color:white;bottom:20px;left:20px;}
#clear{background-color:green;color:yellow;bottom:20px;right:20px;}
#channel{background-color:green;color:yellow;bottom:20px;right:400px;}
#channel_up{background-color:green;color:yellow;bottom:20px;right:300px;}
#channel_down{background-color:green;color:yellow;bottom:20px;right:500px;}
</style>
</head>
<body>
<div class='lower pinky c' id='c3' ></div>
<div class='normal pinky c' id='c4' ><p>C</p></div>
<div class='upper pinky c' id='c5' ></div>
<div class='lower ring cs' id='cs3' ></div>
<div class='normal ring cs bnote' id='cs4' ><p>C#</p></div>
<div class='upper ring cs' id='cs5' ></div>
<div class='lower middle d' id='d3' ></div>
<div class='normal middle d' id='d4' ><p>D</p></div>
<div class='upper middle d' id='d5' ></div>
<div class='lower pointer ds' id='ds3' ></div>
<div class='normal pointer ds bnote' id='ds4' ><p>D#</p></div>
<div class='upper pointer ds' id='ds5' ></div>
<div class='lower thumb e' id='e3' ></div>
<div class='normal thumb e' id='e4' ><p>E</p></div>
<div class='upper thumb e' id='e5' ></div>
<div class='lower thumb f' id='f3' ></div>
<div class='normal thumb f' id='f4' ><p>F</p></div>
<div class='upper thumb f' id='f5' ></div>
<div class='lower thumb fs' id='fs3' ></div>
<div class='normal thumb fs bnote' id='fs4' ><p>F#</p></div>
<div class='upper thumb fs' id='fs5' ></div>
<div class='lower thumb g' id='g3' ></div>
<div class='normal thumb g' id='g4' ><p>G</p></div>
<div class='upper thumb g' id='g5' ></div>
<div class='lower pointer gs' id='gs3' ></div>
<div class='normal pointer gs bnote' id='gs4' ><p>G#</p></div>
<div class='upper pointer gs' id='gs5' ></div>
<div class='lower middle a' id='a3' ></div>
<div class='normal middle a' id='a4' ><p>A</p></div>
<div class='upper middle a' id='a5' ></div>
<div class='lower ring as' id='as3' ></div>
<div class='normal ring as bnote' id='as4' ><p>A#</p></div>
<div class='upper ring as' id='as5' ></div>
<div class='lower pinky b' id='b3' ></div>
<div class='normal pinky b' id='b4' ><p>B</p></div>
<div class='upper pinky b' id='b5' ></div>
<div id='playback'><p>Playback</p></div>
<div id='clear'><p>Clear</p></div>
<div id='channel'><p id='channel_label'> 0 </p></div>
<div id='channel_up'><p>+</p></div>
<div id='channel_down'><p>-</p></div>
</body>
</html>
Current Javascript:
(function(){
var ip = "127.0.0.1:8080", channel = 0, channel_label;
function update_channel(){
channel_label.text(channel);
}
function up_channel(){
if(channel<120){
channel += 1;
update_channel();
}
}
function down_channel(){
if(channel>0){
channel -= 1;
update_channel();
}
}
function play_note(note){
$.get("http://"+ip+"/midi?note="+note+"&duration=100&channel="+channel, function(){});
}
$(document).ready(function(){
var offset = 12,i = 0, notes =[
"c",
"cs",
"d",
"ds",
"e",
"f",
"fs",
"g",
"gs",
"a",
"as",
"b"
];
channel_label = $("#channel_label");
$("#playback").click(function(){
$.get("http://"+ip+"/midiplayback",function(){});
});
$("#clear").click(function(){
$.get("http://"+ip+"/midiclear",function(){});
});
$("#channel_up").click(function(){ up_channel(); });
$("#channel_down").click(function(){ down_channel(); });
$(notes).each(function(ni){
var item = 60+i, note = notes[ni];
i+=1;
$("#"+note+"3").click(function(){
play_note(item-offset);
});
$("#"+note+"4").click(function(){
play_note(item);
});
$("#"+note+"5").click(function(){
play_note(item+offset);
});
});
});
}());
Screen shot:
No comments:
Post a Comment