AngularJS Example

Low level MIDI support via Javascript

AngularJS Example

Postby letoribo » Tue Jul 15, 2014 1:38 pm

Code: Select all
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Metronome</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>

<style type="text/css">
.hidden {
 visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;
}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
</style>
</head>

<body ng-controller="myController">
<h1>Metronome</h1>

<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">

<p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>

<p>
<label>MIDI Out:</label> <select id=selectmidi ng-change="changemidi();" ng-model="_out">
<option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Beats:</label> <select id=beat ng-model="_beat">
<option ng-init="_beat=4" ng-repeat="i in beats" ng-selected="{{i==_beat}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label> <select id=tempo ng-change='changetempo();' ng-model="_tempo">
<option ng-init="_tempo=120" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-small" id=play ng-click='play();'>{{playing}}</button>
</p>

<script>
Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
select_out = document.getElementById('selectmidi');
select_beat = document.getElementById('beat');
select_tempo = document.getElementById('tempo');
var myModule = angular.module('myModule',[]);

function myController($scope, $timeout) {
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  var count;
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      }
    else {
      $scope.playing = 'Stop';
      count = 0; tick();
    } 
  }
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  }
  $scope.beats = [];
  for(var i = 1; i <= 23; i++) $scope.beats.push(i);
  $scope._beat = 4;     
  var interval = 500;
  $scope.tempos = [];
  for(var i = 40; i <= 540; i++) $scope.tempos.push(i);
  $scope._tempo = 120;     
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo;
  }
  var tick = function (){
    Jazz.MidiOut(0x99, count ? 33 : 34, 127);
    count ++; if(count >= $scope._beat) count = 0;
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
};

</script>

</body>
</html>
Last edited by letoribo on Tue Oct 21, 2014 6:51 pm, edited 3 times in total.
letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Sat Oct 11, 2014 6:00 am

Code: Select all
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

<style type="text/css">
body{color: #001326; background: #F4F4F4;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
.count{color: #0071b5;}
.btn-large{padding:8px 15px;font-size:17.5px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}
.btn-small{padding:2px 10px;font-size:11.9px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;}
pre {border: 1px solid #999; background-color: #FFE;word-wrap: break-word;}
span{word-wrap: break-word;}
img{margin-top:5px;}
</style>
</head>

<body ng-controller="myController">
<h1>Exploration of
<br><a href="http://underscorejs.org/"><img src="http://underscorejs.org/docs/images/underscore.png"></a><i> &nbsp the sorting algorithms</i></h1>
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
<p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>
<p>
<label>MIDI Out:</label> <select id=selectmidi ng-change="changemidi();" ng-model="_out">
<option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label> <select id=tempo ng-change='changetempo();' ng-model="_tempo">
<option ng-init="_tempo=100" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-large" id=play ng-click='play();'>{{playing}}</button></p>
<p><label>Beats: {{num.beats}}</label></p><input id="pcs" type="range" min="1" max="60" ng-model="num.beats" />
<h3 class="count" ng-model="count">count:{{count+1}}</h3>
<div>
 <div><label><input type="radio" name="method" value="range" ng-model="method.method">Range</label></div>
 <div><label><input type="radio" name="method" value="sin" ng-model="method.method">Sin</label></div>
 <div><label><input type="radio" name="method" value="cos" ng-model="method.method">Cos</label></div>
 <div><label><input type="radio" name="method" value="tan" ng-model="method.method">Tan</label></div>
 <div><label><input type="radio" name="method" value="crab" ng-model="method.method">Crab</label></div>
 <div><label><input type="radio" name="method" value="clz32" ng-model="method.method">clz32</label></div>
 <div><label><input type="radio" name="method" value="and" ng-model="method.method">and</label></div>
 <div><label><input type="radio" name="method" value="xor" ng-model="method.method">xor</label></div>
 <div><label><input type="radio" name="method" value="modulo" ng-model="method.method">modulo</label></div><br>
 <button class="btn-small" ng-click='shuffle();'>Shuffle</button></p>   
</div>
  <b><pre>{{ method.message }}</pre></b><span><pre>{{ notes }}</pre></span>

<script>

var myModule = angular.module('myModule',[]);
function myController($scope, $timeout) {
  Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  select_out=document.getElementById('selectmidi');
  select_tempo=document.getElementById('tempo');   
  $scope.num = new Beats(12);
  function Beats(numOfbeats) {
    var beats = numOfbeats;
    this.__defineGetter__("beats", function () {
      return beats;
    });
    this.__defineSetter__("beats", function (val) {       
      val = parseInt(val);
      beats = val;
    });
  }

  $scope.method = {method: "range", message: "_.range(40, 100);"};
  var notes = _.range(40, 100);
  var range = notes;
  var sin = _.sortBy(notes, function(num){ return Math.sin(num); });
  var cos = _.sortBy(notes, function(num){ return Math.cos(num); });
  var tan = _.sortBy(notes, function(num){ return Math.tan(num); });
  var crab = _.reduceRight(notes, function(a, b) { return a.concat(b); }, []);
  Math.clz32 = Math.clz32 || function(value) { // polyfill
    var value = Number(value) >>> 0;
    return value ? 32 - value.toString(2).length : 32;
  };
  var clz32 = _.sortBy(notes, function(num){ return Math.clz32(num); });
  var modulo = _.sortBy(notes, function(a, b) { return a % b; });
  var and = _.sortBy(notes, function(a, b) { return a & b; });
  var xor = _.sortBy(notes, function(a, b) { return a ^ b; });
  var shuffle = _.shuffle(notes);
  var Data = {
    "range":   {notes: range, message: "_.range(40, 100);"},
    "sin":     {notes: sin, message: "_.sortBy(_.range(40, 100), function(num){ return Math.sin(num); });"},
    "cos":     {notes: cos, message: "_.sortBy(_.range(40, 100), function(num){ return Math.cos(num); });"},
    "tan":     {notes: tan, message: "_.sortBy(_.range(40, 100), function(num){ return Math.tan(num); });"},
    "crab":    {notes: crab, message: "_.reduceRight(_.range(40, 100), function(a, b) { return a.concat(b); }, []);        _.sortBy(_.range(40, 100), function(a, b) { return a / b; });"},
    "clz32":   {notes: clz32, message: "_.sortBy(_.range(40, 100), function(num){ return Math.clz32(num); });"},
    "modulo":  {notes: modulo, message: "_.sortBy(_.range(40, 100), function(a, b) { return a % b; });"},
    "and":     {notes: and, message: "_.sortBy(_.range(40, 100), function(a, b) { return a & b; });"},
    "xor":     {notes: xor, message: "_.sortBy(_.range(40, 100), function(a, b) { return a ^ b; });"},
    "shuffle": {notes: shuffle, message: "_.shuffle(_.range(40, 100));"}
  };
 
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      Jazz.MidiOut(0xb0, 123, 0);
    }
    else {
      $scope.playing = 'Stop';
      $scope.count=-1; tick();
    } 
  };
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  };
  interval = 150;
  $scope.tempos = _.range(10,281);
  $scope._tempo = 100;     
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo * 0.25;
  };
  $scope.notes = notes;
  $scope.shuffle = function() {
    $scope.method.method = "shuffle"; $scope.notes = _.shuffle(notes);
  };
  $scope.$watch('method.method', function(newVal, oldVal) {
    console.log(newVal, oldVal);
    $scope.notes = Data[newVal].notes;
    $scope.method.message = Data[newVal].message;
  });
  var tick = function (){
    $scope.count ++; if($scope.count >= $scope.num.beats) $scope.count = 0;
    var note = $scope.notes[$scope.count];
    Jazz.MidiOut(0xb0, 123, 0);
    Jazz.MidiOut(0xb0, 10, note);
    Jazz.MidiOut(0xc0, note, 0);
    Jazz.MidiOut(0x90, note, 127);
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
};

</script>
</body>
</html>
Last edited by letoribo on Sun Oct 26, 2014 6:31 am, edited 10 times in total.
letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Sat Oct 11, 2014 6:01 am

letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Sun Oct 26, 2014 7:13 am

Code: Select all
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="http://jazz-snippet.appspot.com/js/pragmatic-angular.js"></script>
<style type="text/css">
body {color: #001326; background: #F4F4F4; font-family: monospace;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
.count {color: #0071b5;}
.btn-large {padding: 8px 15px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;  cursor: pointer;}
.btn-large:hover { background-color: #BACCDF;}
pre {border: 1px solid #999; background-color: #FFE; font-weight: bold; word-wrap: break-word; text-align: center; padding-top:1px;}
img {margin-top: 5px;}
select {border-radius: 18px; border:1px dotted #0071b5; font-weight: lighter; background-color:#FFE; cursor: pointer;}
fieldset {-moz-border-radius:8px; border-radius:8px;border:1px dotted #0071b5;}
fieldset label {background-color: #FFE; border-style: double; margin-left: 15px; padding: 7px; cursor: pointer;
-moz-border-radius:5px; border-radius:5px;vertical-align: middle;}
fieldset label:hover { background-color: #DDD;}
input[type=text] {color: #0071b5; border: none; font-family: monospace; font-size: inherit; font-weight: bold; padding: 1px 1px; background: #FFE;}
span {line-height: 270%;}
</style>
</head>

<body ng-controller="myController">
<h1>Exploration of
<br><a href="http://underscorejs.org/"><img src="http://underscorejs.org/docs/images/underscore.png"></a><i> &nbsp the sorting algorithms</i></h1>
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
 <p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>
<p>
<label>MIDI Out:</label><select id=selectmidi ng-change="changemidi();" ng-model="_out">
 <option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Tempo:</label><select id=tempo ng-change='changetempo();' ng-model="_tempo">
 <option ng-init="_tempo=150" ng-repeat="i in tempos" ng-selected="{{i==_tempo}}" value="{{i}}">{{i}}</option>
</select>
<button class="btn-large" id=play ng-click='play();'>{{playing}}</button></p>
<div>
 <fieldset>
 <legend>Underscore methods</legend>
 <span ng-jquery-plugin="{ buttonset : {enabled : true} }">
 <label><input class="ui-buttonset" type="radio" name="method" value="range" ng-model="method.method">Range</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="sin" ng-model="method.method">Sin</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cos" ng-model="method.method">Cos</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="tan" ng-model="method.method">Tan</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="crab" ng-model="method.method">Crab</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="clz32" ng-model="method.method">clz32</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="and" ng-model="method.method">and</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="xor" ng-model="method.method">xor</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="modulo" ng-model="method.method">modulo</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="l_shift" ng-model="method.method">l-shift</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="r_shift" ng-model="method.method">r-shift</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond1" ng-model="method.method">cond1</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond2" ng-model="method.method">cond2</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond3" ng-model="method.method">cond3</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond4" ng-model="method.method">cond4</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond5" ng-model="method.method">cond5</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond6" ng-model="method.method">cond6</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond7" ng-model="method.method">cond7</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond8" ng-model="method.method">cond8</label>
 <label><input class="ui-buttonset" type="radio" name="method" value="cond9" ng-model="method.method">cond9</label>
 </span>
 <button ng-click='shuffle();' ng-jquery-plugin="{button : { label: 'Shuffle' }}"></button></p>
 </fieldset><br>
</div>
<pre class="count" ng-model="count">beats: {{beats}}        count: <input type="text" ng-model="count" value="1"></pre>
<div>
 <div ng-jquery-plugin="{ slider : { min: 0,   max: 128, value: 60, stop : onStop } }"></div>
</div>
<b><pre>{{ method.message }}</pre></b><pre>notes: {{ notes }}</pre>
<div>
 <div ng-jquery-plugin="{ slider : { range: true,   min: 0,   max: 128, values: [40, 100], change : onChange } }"></div>
 <pre>range: {{range}}</pre>
</div>
<script>
var myModule = angular.module('myModule',['pragmatic-angular']);
function myController($scope, $timeout) {
   
  $scope.onChange = function(event, ui) {
    if (ui.values[0] !== ui.values[1]) {
        $scope.range = _.range(ui.values[0], ui.values[1]);
      magick($scope.range);
      $scope.beats = _.size($scope.range);
      $scope.$apply();
    };
  };

  $scope.onStop = function(event, ui) {
    if (ui.value <= _.size($scope.notes)) {
      $scope.beats = ui.value;
      $scope.$apply();
    };
  };
 
  var magick = function(x) {
    var range = x;
    var sin = _.sortBy(x, function(num){ return Math.sin(num); });
    var cos = _.sortBy(x, function(num){ return Math.cos(num); });
    var tan = _.sortBy(x, function(num){ return Math.tan(num); });
    var crab = _.reduceRight(x, function(a, b) { return a.concat(b); }, []);
    Math.clz32 = Math.clz32 || function(value) { // polyfill
      var value = Number(value) >>> 0;
      return value ? 32 - value.toString(2).length : 32;
    };
    var clz32 = _.sortBy(x, function(num){ return Math.clz32(num); });
    var modulo = _.sortBy(x, function(a, b) { return a % b; });
    var and = _.sortBy(x, function(a, b) { return a & b; });
    var xor = _.sortBy(x, function(a, b) { return a ^ b; });
    var l_shift = _.sortBy(x, function(a, b) { return a << b; });
    var r_shift = _.sortBy(x, function(a, b) { return a >> b; });
    var cond1 = _.sortBy(x, function(a, b) { return (a % 2 == 0) ? a : b; });
    var cond2 = _.sortBy(x, function(a, b) { return (a % 3 == 1) ? a : b; });
    var cond3 = _.sortBy(x, function(a, b) { return (Math.tan(Math.sin(a) / Math.cos(b)) > 0) ? Math.sin(a) : b; });
    var cond4 = _.sortBy(x, function(a, b) { return (Math.tan(Math.sin(a) / Math.tan(b)) > 0) ? 0 : b; });
    var cond5 = _.sortBy(x, function(a, b) { return (~a / Math.tan(b) > 0) ? 1 : 0; });
    var cond6 = _.sortBy(x, function(a, b) { return a & (~a ^ Math.tan(b) > 0) ? a/b : b; });
    var cond7 = _.sortBy(x, function(a, b) { return ~a & ~b ; });
    var cond8 = _.sortBy(x, function(a, b) { return Math.sin(Math.cos(~b)) ; });
    var cond9 = _.sortBy(x, function(num) { return Math.sin(Math.cos(~num)) ; });
    var shuffle = _.shuffle(x);
    var Data = {
      "range":   {notes: range, message: "_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ ");"},
      "sin":     {notes: sin, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.sin(num); });"},
      "cos":     {notes: cos, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.cos(num); });"},
      "tan":     {notes: tan, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.tan(num); });"},
      "crab":    {notes: crab, message: "_.reduceRight(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a.concat(b); }, []);     _.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a / b; });     _.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num) { return ~num; });"},
      "clz32":   {notes: clz32, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.clz32(num); });"},
      "modulo":  {notes: modulo, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a % b; });"},
      "and":     {notes: and, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a & b; });"},
      "xor":     {notes: xor, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a ^ b; });"},
      "l_shift": {notes: l_shift, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a << b; });"},
      "r_shift": {notes: r_shift, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a >> b; });"},
      "cond1": {notes: cond1, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (a % 2 == 0) ? a : b; });"},
      "cond2": {notes: cond2, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (a % 3 == 1) ? a : b; });"},
      "cond3": {notes: cond3, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (Math.tan(Math.sin(a) / Math.cos(b)) > 0) ? Math.sin(a) : b; });"},
      "cond4": {notes: cond4, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (Math.tan(Math.sin(a) / Math.tan(b)) > 0) ? 0 : b; });"},
      "cond5": {notes: cond5, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return (~a / Math.tan(b) > 0) ? 1 : 0; });"},
      "cond6": {notes: cond6, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return a & (~a ^ Math.tan(b) > 0) ? a / b : b; });"},
      "cond7": {notes: cond7, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b) { return ~a & ~b ; });"},
      "cond8": {notes: cond8, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(a, b){ return Math.sin(Math.cos(~b)); });"},
      "cond9": {notes: cond9, message: "_.sortBy(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "), function(num){ return Math.sin((Math.cos(~num)); });"},
      "shuffle": {notes: shuffle, message: "_.shuffle(_.range(" +(_.min(x) + "," + (_.max(x) + 1))+ "));"}
    };
    $scope.notes = Data[$scope.method.method].notes;
    $scope.method.message = Data[$scope.method.method].message;
  };
 
  $scope.play = function() {
    if(!(Jazz && Jazz.isJazz)) return;
    $scope.state = $scope.state === false ? true: false;
    if($scope.state){
      $scope.playing = 'Play';
      $timeout.cancel(timeout);
      Jazz.MidiOut(0xb0, 123, 0);
    }
    else {
      $scope.playing = 'Stop';
      $scope.count=-1; tick();
    } 
  };
  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out);
  };
       
  $scope.changetempo = function() {
    interval = 60000 / $scope._tempo * 0.25;
  };

  $scope.shuffle = function() {
    $scope.method.method = "shuffle"; $scope.notes = _.shuffle($scope.range);
  };
  $scope.$watch('method.method', function(newVal, oldVal) {
    console.log(newVal, oldVal);
    magick($scope.range);
  });

  var tick = function (){
    $scope.count ++;
    if($scope.count >= $scope.beats) $scope.count = 0;
    var note = $scope.notes[$scope.count];
    Jazz.MidiOut(0xb0, 123, 0);
    Jazz.MidiOut(0xb0, 10, note);
    Jazz.MidiOut(0xc0, note, 0);
    Jazz.MidiOut(0x90, note, 127);
    timeout = $timeout(function() {
      tick();
    }, interval);
  }
 
var init = function () {
  Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  select_out = document.getElementById('selectmidi');
  select_tempo = document.getElementById('tempo');
  interval = 100;
  $scope.state = true; $scope.playing = 'Play';
  $scope.list = Jazz.MidiOutList();
  $scope._out = $scope.list[0];
  $scope.count = 1;
  $scope.beats = 60;
  $scope.tempos = _.range(10,281);
  $scope._tempo = 150;
  $scope.method = {method: "range", message: "_.range(40, 100);"};
  $scope.range = _.range(40, 100);
}(); 
 
};

</script>
</body>
</html>


http://jazz-snippet.appspot.com/Angular3.html
letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Tue Dec 09, 2014 1:55 pm

See how interesting creation of piano with Angular.js

Code: Select all
<!DOCTYPE html>
<html ng-app="myModule">
<head>
<title>Jazz && Underscore</title>
<script src="http://jazz-snippet.appspot.com/js/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style type="text/css">
body {color: #001326; background: #F4F4F4; font-family: monospace;}
.hidden {visibility: hidden; width: 0px; height: 0px; margin: 0px; padding: 0px; border-style: none; border-width: 0px; max-width: 0px; max-height: 0px;}
select {border-radius: 18px; border:1px dotted #0071b5; font-weight: bolder; height: 28px; background-color:#FFE; cursor: pointer; text-align: center;}
div#piano {
 position: relative; color: #808080; height: 82px;
}
div.ivory {
 position: absolute; left: 0px; top: 0px; border-left: 1px solid; width: 1672px;
}
.ivory span {
 background-color: #fffff0; padding: 0px; margin: 0px; border: 1px solid; border-left: 0px; display: inline-block; width: 21px; height: 80px; vertical-align: top;
}
div.ebony {
 position: absolute; left: 0px; top: 0px; margin-left: 14px; width: 1672px;
}
.ebony span {
 position: relative; z-index: 1; background-color: #111; padding: 0px; margin: 0px; border: 1px solid; display: inline-block; width: 12px; height: 56px; margin-right: 12px; vertical-align: top;
}
.ebony span.break {
 border: 0px; display: inline-block; width: 1px; margin-right: 11px; visibility:hidden;
}
.ivory span.on {
 background-color: #aaa;
}
.ebony span.on {
 background-color: #aaa;
}
.Center {
 width: 86%; height: 28%; margin: auto; margin-top: 25px; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: inherit;
}
</style>
</head>

<body ng-controller="myController">
<object id="Jazz1" classid="CLSID:1ACE1618-1C7D-4561-AEE1-34842AA85E90" class="hidden">
<object id="Jazz2" type="audio/x-jazz" class="hidden">
 <p style="visibility:visible;">This page requires <a href=http://jazz-soft.net>Jazz-Plugin</a> ...</p>
</object>
</object>

<div id=piano class="Center">
<div class="ebony">
<span  ng-repeat="i in keys.b track by $index" id="{{i}}" ng-class="{'break': i == '|',
 'on': i == note}"
 ng-mousedown="down(i)" ng-mouseup="up(i)"></span>
</div>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   
<div class="ivory">
<span  ng-repeat="i in keys.w" id="{{i}}" ng-mousedown="down(i)"
ng-mouseup="up(i)" ng-class="{'on': i == note}" ></span>
</div>
</div>

<center>
<p>
<label>MIDI Out:</label><select id=selectmidi ng-change="changemidi();" ng-model="_out">
 <option ng-init="_out=list[0]" ng-repeat="i in list" ng-selected="{{i==_out}}" value="{{i}}">{{i}}</option>
</select>
<label>Sound: </label><select id=midiSnd ng-change='changeSnd();' ng-model="_sound">
 <option ng-init="_sound='Drawbar Organ'" ng-repeat="i in sounds" ng-selected="{{i==_sound}}" value="{{i}}">{{i}}</option>
</select>
</p>
</center>

<script>

var myModule = angular.module('myModule',[]);
function myController($scope) {
   
  $scope.keys = {
    b: [
      1,3,'|',6,8,10,'|',13,15,'|',18,20,22,'|',25,27,'|',30,32,34,'|',37,39,'|',42,44,46,'|',49,51,'|',54,56,58,'|',61,63,'|',66,68,70,'|',
      73,75,'|',78,80,82,'|',85,87,'|',90,92,94,'|',97,99,'|',102,104,106,'|',109,111,'|',114,116,118,'|',121,123,'|',126
    ],
    w: [
       0,2,4,5,7,9,11,12,14,16,17,19,21,23,24,26,28,29,31,33,35,36,38,40,41,43,45,47,48,50,52,53,55,57,59,60,62,64,65,67,69,71,
       72,74,76,77,79,81,83,84,86,88,89,91,93,95,96,98,100,101,103,105,107,108,110,112,113,115,117,119,120,122,124,125,127
    ]
  }

  $scope.down = function(id){
    Jazz.MidiOut(0x90, id, 127); $scope.note = id;
  }   
  $scope.up = function(id){
    Jazz.MidiOut(0x80, id, 0); $scope.note = null;
  }   

  $scope.changemidi = function() {
    Jazz.MidiOutOpen($scope._out); Jazz.MidiOut(0xc0, $.inArray( $scope._sound, $scope.sounds ), 0);
    select_out.blur();
  };

  $scope.changeSnd = function() {
    Jazz.MidiOut(0xc0, $.inArray( $scope._sound, $scope.sounds ), 0);
    selSnd.blur();
  };

  var init = function () {
    Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
    select_out = document.getElementById('selectmidi');
    selSnd = document.getElementById('midiSnd');
    $scope.list = Jazz.MidiOutList();
    $scope._out = $scope.list[0];
    var sounds = ['Acoustic Grand Piano','Bright Acoustic Piano','Electric Grand Piano','Honky-tonk Piano','Electric Piano 1','Electric Piano 2','Harpsichord','Clavinet',
    'Celesta','Glockenspiel','Music Box','Vibraphone','Marimba','Xylophone','Tubular Bells','Dulcimer','Drawbar Organ','Percussive Organ','Rock Organ',
    'Church Organ','Reed Organ','Accordion','Harmonica','Tango Accordion','Acoustic Guitar nylon','Acoustic Guitar steel','Electric Guitar jazz',
    'Electric Guitar clean','Electric Guitar muted','Overdriven Guitar','Distortion Guitar','Guitar Harmonics','Acoustic Bass','Electric Bass finger','Electric Bass pick',
    'Fretless Bass','Slap Bass 1','Slap Bass 2','Synth Bass 1','Synth Bass 2','Violin','Viola','Cello','Contrabass','Tremolo Strings','Pizzicato Strings','Orchestral Harp','Timpani',
    'String Ensemble 1','String Ensemble 2','Synth Strings 1','Synth Strings 2','Choir Aahs','Voice Oohs','Synth Choir','Orchestra Hit','Trumpet','Trombone',
    'Tuba','Muted Trumpet','French Horn','Brass Section','Synth Brass 1','Synth Brass 2','Soprano Sax','Alto Sax','Tenor Sax','Baritone Sax','Oboe','English Horn',
    'Bassoon','Clarinet','Piccolo','Flute','Recorder','Pan Flute','Blown Bottle','Shakuhachi','Whistle','Ocarina','Lead 1 square','Lead 2 sawtooth','Lead 3 calliope',
    'Lead 4 chiff','Lead 5 charang','Lead 6 voice','Lead 7 fifths','Lead 8 bass + lead','Pad 1 new age','Pad 2 warm','Pad 3 polysynth','Pad 4 choir','Pad 5 bowed',
    'Pad 6 metallic','Pad 7 halo','Pad 8 sweep','FX 1 rain','FX 2 soundtrack','FX 3 crystal','FX 4 atmosphere','FX 5 brightness','FX 6 goblins','FX 7 echoes','FX 8 sci-fi',
    'Sitar','Banjo','Shamisen','Koto','Kalimba','Bagpipe','Fiddle','Shanai','Tinkle Bell','Agogo','Steel Drums','Woodblock','Taiko Drum','Melodic Tom',
    'Synth Drum','Reverse Cymbal','Guitar Fret Noise','Breath Noise','Seashore','Bird Tweet','Telephone Ring','Helicopter','Applause','Gunshot'];
    $scope.sounds = sounds;
    $scope._sound='Drawbar Organ';
    $scope.changeSnd();
  }(); 
 
};
 
</script>
</body>
</html>


http://jazz-snippet.appspot.com/Angular4.html
Last edited by letoribo on Thu Mar 19, 2015 3:02 am, edited 1 time in total.
letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Fri Jan 23, 2015 7:23 am

letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby beemsoft » Thu Jan 29, 2015 5:57 am

Hi letoribo,

Thanks for the interesting example!

I've extended it with a MIDI input option, so that you can also play with a MIDI keyboard. 8-)
Here, you can see the result:
http://www.jammidi.net/piano.html

Also, I did some refactoring on the code. Now 'jazz' is injected into the controller:
Code: Select all
var app = angular.module('myApp', []);

app.factory('jazz', function ($rootScope) {
  var Jazz = document.getElementById("Jazz1"); if(!Jazz || !Jazz.isJazz) Jazz = document.getElementById("Jazz2");
  return {
   MidiInOpen: function(channel, callback) {
      Jazz.MidiInOpen(channel, callback);
   },
   MidiOutList: function() {
      return Jazz.MidiOutList();
   },
   MidiInList: function() {
      return Jazz.MidiInList();
   },
   MidiOut: function(a, key, b) {
      Jazz.MidiOut(a, key, b);
   }
  };
});

function MainCtrl($scope, jazz) {
 
  ...

  $scope.listIn = jazz.MidiInList();
  $scope._in = $scope.listIn[0];

  ...

  jazz.MidiInOpen(0, function (t,a,key,c) {
     if (c == 127) {
        $scope.note.splice($scope.note.indexOf(key),1)
     } else {
        $scope.note.push(key)
     }
     jazz.MidiOut(a, key, c);
     message = t + ', ' + a + ', '+ key + ', '+ c;
     $scope.$apply($scope.messages.push(message));
  });
beemsoft
 
Posts: 3
Joined: Wed Jan 28, 2015 7:52 am

Re: AngularJS Example

Postby letoribo » Mon Mar 02, 2015 3:52 am

Instead of:
Code: Select all
//app.js
var str = jazz.MidiInOpen(0, function (t,a,key,c) {
     if (c == 127) {
        $scope.note.splice($scope.note.indexOf(key),1)
     } else {
        $scope.note.push(key)
     }
     jazz.MidiOut(a, key, c);
     message = t + ', ' + a + ', '+ key + ', '+ c;
     $scope.$apply($scope.messages.push(message));
  });

do this:
Code: Select all
var str = jazz.MidiInOpen(0, function (t,a,key,c) {
       var cmd = Math.floor(a / 16); //console.log(cmd);
     if (cmd == 9) {
        $scope.note.push(key)
     }
     if (cmd == 8) {
       $scope.note.splice($scope.note.indexOf(key),1)
     }
     jazz.MidiOut(a, key, c);
     message = t + ', ' + a + ', '+ key + ', '+ c;
     $scope.$apply($scope.messages.push(message));
  });

and in Angular piano.html add "track by" :
Code: Select all
<ul  ng-model="messages">
  <li ng-repeat="msg in messages track by $index">{{msg}}
</ul>
letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby letoribo » Tue Mar 03, 2015 3:05 am

letoribo
 
Posts: 98
Joined: Fri Sep 13, 2013 8:25 am
Location: Odessa,Ukraine

Re: AngularJS Example

Postby beemsoft » Thu Apr 02, 2015 2:15 pm

I've combined the Angular piano with the chat example from g00glen00b
(Using WebSockets with Spring, AngularJS and SockJS,
http://g00glen00b.be/spring-angular-sockjs/)

Now you can really jam online:
http://www.jammidi.net/jammidi-ng/

You can try it out with two browsers on different machines.
beemsoft
 
Posts: 3
Joined: Wed Jan 28, 2015 7:52 am


Return to Jazz-Plugin

Who is online

Users browsing this forum: No registered users and 2 guests

cron