Edit in JSFiddle

// > raw notes converter
var raw_notes_convert = function(ins, raw_notes) {
  var self = this;

  self.instance = null;
  self.notes = [];
  self.divider = 16;
  self.regexp_split_notes = /([A-G](#|b)?[0-9]+|\-|_)/gm;
  self.regexp_note = /^[A-G](#|b)?[0-9]+$/;

  self.init = function(ins, raw_notes, divider) {
    self.notes = [];
    self.set_instance(ins);
    self.set_notes(raw_notes);
    divider !== undefined && self.set_divider(divider);
  };

  self.set_instance = function(instance) {
    self.instance = instance;
  };

  self.set_notes = function(notes) {
    while (matches = self.regexp_split_notes.exec(notes)) {
      self.notes.push(matches[0]);
    }
  };

  self.set_divider = function(divider) {
    if (/^[1-9][0-9]*$/.test(divider)) {
      self.divider = divider;
    } else {
      console.error("cannot set " + divider + " as divider");
    }
  };

  self.process_notes = function() {
    var buffer_note = null;
    var buffer_note_length = 0;
    self.notes.forEach(function(note, i) {
      if (self.regexp_note.test(note)) {
        // is note
        // first, write exists buffer
        if (buffer_note !== null) {
          self.write_note(buffer_note, buffer_note_length);
        }
        buffer_note = note;
        buffer_note_length = 1;
      } else if (note == '-') {
        // is tail note
        if (buffer_note !== null) {
          buffer_note_length += 1;
        } else {
          self.write_note(null, 1);
        }
      } else {
        // assume silent
        if (buffer_note !== null) {
          self.write_note(buffer_note, buffer_note_length);
          buffer_note = null;
          buffer_note_length = 0;
        }
        self.write_note(null, 1);
      }
    });

    if (buffer_note !== null && buffer_note_length > 0) {
      self.write_note(buffer_note, buffer_note_length);
    }
    buffer_note = null;
    buffer_note_length = 0;
  };

  self.write_note = function(note, length) {
    var length_arr = self.length_const(length);

    if (typeof length_arr === typeof [] && length_arr.length > 0) {
      if (self.regexp_note.test(note)) {
        self.instance.note(length_arr.shift(), note);
        length_arr.forEach(function(len) {
          self.instance.rest(len);
        });
      } else if (note === null) {
        length_arr.forEach(function(len) {
          self.instance.rest(len);
        });
      } else {
        console.error('cannot write note ' + note);
      }
    } else {
      console.error('cannot write note using given length ' + length);
    }
  };

  self.length_const = function(length) {
    if (/^[1-9][0-9]*$/.test(length) && /^[1-9][0-9]*$/.test(self.divider)) {
      var ratio_length = parseInt(length) / parseInt(self.divider);
      var result = [];
      switch (ratio_length) {
        case 1:
          result.push('whole');
          break;
        case 0.75:
          result.push('dottedHalf');
          break;
        case 0.5:
          result.push('half');
          break;
        case 0.375:
          result.push('dottedQuarter');
          break;
        case 0.33333334:
          result.push('tripletHalf');
          break;
        case 0.25:
          result.push('quarter');
          break;
        case 0.1875:
          result.push('dottedEighth');
          break;
        case 0.166666667:
          result.push('tripletQuarter');
          break;
        case 0.125:
          result.push('eighth');
          break;
        case 0.09375:
          result.push('dottedSixteenth');
          break;
        case 0.083333333:
          result.push('tripletEighth');
          break;
        case 0.0625:
          result.push('sixteenth');
          break;
        case 0.041666667:
          result.push('tripletSixteenth');
          break;
        case 0.03125:
          result.push('thirtySecond');
          break;
        default:
          if (ratio_length > 1) {
            var _tmp = ratio_length;
            while (ratio_length >= 1) {
              ratio_length -= 1;
              result.push(self.length_const(1));
            }
            ratio_length = self.length_const(ratio_length * parseInt(self.divider));
            if (ratio_length !== false) {
              result.push(ratio_length);
            } else {
              console.error('unknown ratio ' + _tmp);
              return false;
            }
          } else {
            console.error('unknown ratio ' + ratio_length);
            return false;
          }
          break;
      }
      return result;
    } else {
      (!(/^[1-9][0-9]*$/.test(length))) && console.error("cannot make length condition using given length " + length);
      (!(/^[1-9][0-9]*$/.test(self.divider))) && console.error("cannot make length condition using given self.divider " + self.divider);
    }
  };

  self.init(ins, raw_notes);
  return self;
};
// < raw notes converter

var tempo = 74;

var conductor = new BandJS();

conductor.setTimeSignature(3, 4);
conductor.setTempo(tempo);

var t1 = conductor.createInstrument('square', 'oscillators');
var t2 = conductor.createInstrument('sawtooth', 'oscillators');
var b = conductor.createInstrument('triangle', 'oscillators');

new raw_notes_convert(t1, $('#notes_t1').val()).process_notes();
new raw_notes_convert(t2, $('#notes_t2').val()).process_notes();
new raw_notes_convert(b, $('#notes_b').val()).process_notes();

player = conductor.finish();

player.prop = {
	duration_moved : false,
};

var s2is = function (s) {
	s = /^[1-9][0-9]*|0$/.test(s) ? parseInt(s) : false;
	return (s !== false) ? Math.floor(s / 60) + ':' + (s % 60 < 10 ? '0' : '') + (s % 60) : 'err';
};

$(function(){
	$('body').on('click', '#btn-toggle-play', function(){
		if (player.playing && !player.paused) {
			player.pause();
			$(this).removeClass('btn-success active').addClass('btn-default')
				.find('.glyphicon').removeClass('glyphicon-play').addClass('glyphicon-pause');
		} else {
			player.play();
			$(this).removeClass('btn-default').addClass('btn-success active')
				.find('.glyphicon').removeClass('glyphicon-pause').addClass('glyphicon-play');
		}
	}).on('click', '#btn-stop', function(){
		player.stop(false);
		$('#btn-toggle-play').removeClass('btn-success active').addClass('btn-default')
			.find('.glyphicon').removeClass('glyphicon-pause').addClass('glyphicon-play');
		$('#duration-current-label').text(s2is(0));
	}).on('click', '#btn-loop', function(){
		$(this).toggleClass('active')
		player.loop($(this).hasClass('active'));
	}).on('change', '#volume', function(){
		conductor.setMasterVolume($(this).val());
		$('#volume-label').text($(this).val());
	}).on('change', '#tempo', function(){
		conductor.setTempo($(this).val());
		var song_length = conductor.getTotalSeconds();
		$('#tempo-label').text($(this).val());
		if (song_length > 0) {
			$('#duration').attr('max', song_length);
			if ($('#duration').val() > song_length) {
				$('#duration').val(song_length).trigger('change');
			}
			$('#duration-length-label').text(s2is(song_length));
		}
	}).on('mousedown, mouseup', '#duration', function(e){
		player.prop.duration_moved = (e.type === 'mousedown');
	}).on('change', '#duration', function(){
		var val = parseInt($(this).val());
		if (/^[1-9][0-9]*|0$/.test(val)) {
			try {
				player.setTime(val);
			} catch (err) {
				$('#btn-stop').trigger('click');
				console.error("Valar morghulis - All code must die.");
				alert("Somethime this error happens and I don't know why. :D");
			}
			$('#duration-current-label').text(s2is(val));
		}
		$('#tempo').trigger('change');
	});
	$('#btn-stop').trigger('click');
	$('#volume').trigger('change');
	$('#tempo').val(tempo).trigger('change');
	
	conductor.setTickerCallback(function(current_time) {
		if (!player.prop.duration_moved) {
			$('#duration').val(current_time);
			$('#duration-current-label').text(s2is(current_time));
		}
	});
	conductor.setOnFinishedCallback(function(){
		$('#btn-stop').trigger('click');
	});
});
<div id="stage">
	<div class="container">
		<div class="row">
			<div class="col-sm-12">
				<div class="bn text-center mb20">
    █▓▓▓▓▓                                   █▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓     
  █▓      █                     █▓▓▓             █▓           █▓▓       █▓▓          █▓  █▓▓▓   █▓  
 █▓            █▓    █▓     ▓▓  █▓               █▓  █     █  █▓ █▓   █▓ ▓ ▓   █     █   █  █  █  ▓ 
 █▓           █ ▓    █▓█   ▓█▓  █▓     █▓▓▓ █▓▓  █▓  █     █  █▓  ▓  █   ▓  ▓▓ ██▓   █▓  █     █▓   
 █▓      █▓▓  ███▓   █ █▓  ▓ █  █▓▓▓  █ ▓ ▓ █    █▓  █▓▓▓▓▓█  █▓░▓░  █   ▓   ▓ █ █▓  █▓  █▓▓▓   █▓  
 █▓       █▓ █   █▓  █  █▓▓  █  █▓     █▓ ▓ █▓   █▓  █     █  █▓  ▓  ██  ▓  ▓▓ █   █▓▓   █        █ 
  ██      █▓ █    █  █   █▓  █  ████    ██  █    █▓  █     █  █▓  ██  █  ▓  ▓  █    █▓   ████ █   █ 
    ███████                                      ███                   █████   █     █         ███  </div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-6 text-center mb20">
				<label for="volume"><span class="
glyphicon glyphicon-volume-up"></span> <span id="volume-label">-</span></label>
				<input type="range" id="volume" min="0" max="100" value="100">
			</div>
			<div class="col-sm-6 text-center mb20">
				<label for="tempo">Tempo <span id="tempo-label">-</span></label>
				<input type="range" id="tempo" min="70" max="210">
			</div>
			<div class="col-sm-12 text-center mb20">
				<label for="duration">Duration</label>
				<span id="duration-current-label" class="pull-left"></span>
				<span id="duration-length-label" class="pull-right"></span>
				<input type="range" id="duration" min="0" max="0">
			</div>
			<div class="col-sm-12 text-center mb20">
				<div class="btn-group" role="group" aria-label="Player Controller">
					<button type="button" class="btn btn-default"id="btn-toggle-play">
						<span class="glyphicon glyphicon-play"></span>
					</button>
					<button type="button" class="btn btn-danger"id="btn-stop">
						<span class="glyphicon glyphicon-stop"></span>
					</button>
					<button type="button" class="btn btn-info"id="btn-loop">
						<span class="glyphicon glyphicon-repeat"></span>
					</button>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<label for="notes_t1">notes_t1</label>
				<textarea id="notes_t1" class="form-control mb20" cols="30" rows="19">
|G4-C4-D#4F4|G4-C4-D#4F4|G4-C4-D#4F4|G4-C4-D#4F4|
|G4-C4-E4F4|G4-C4-E4F4|G4-C4-E4F4|G4-C4-E4F4|

|G4-----|C4-----|D#4F4G4---|C4---D#4F4|D4-----|------|______|______|
|F4-----|A#3-----|D4D#4F4---|A#3-----|D#4D4C4---|------|--____|______|

|G4-----|C4-----|D#4F4G4---|C4---D#4F4|D4-----|------|______|______|
|F4-----|A#3-----|D4D#4F4---|A#3-----|D#4D4C4---|------|--____|______|

|G5-----|C5-----|D#5F5G5---|C5---D#5F5|D5-----|------|______|______|
|F5-----|A#4-----|D5---D#5-|D5---A#4-|C5-----|------|______|______|

|C5-D#4-G#4A#4|C5-D#4-A#4C5|A#4-D#4-G4G#4|A#4-D#4-G4A#4|G#4-C4-F4G4|G#4-C4-G4G#4|G4-G3-D#4F4|G4-G3-D#4F4|
|D#4-G#3-C4D4|D#4-G#3-D4D#4|D#4-D#3-A#3D#4|F4-F3-C4F4|G4-----|------|______|______|

|C5-D#4-G#4A#4|C5-D#4-A#4C5|A#4-D#4-G4G#4|A#4-D#4-G4A#4|G#4-C4-F4G4|G#4-C4-G4G#4|G4-G3-D#4F4|G4-G3-D#4F4|
|D#4-G#3-C4D4|D#4-G#3-D4D#4|D#4-D#3-A#3D#4|D4-D3-A#3D4|C4-----|------|______|______|

|______|</textarea>
			</div>
			<div class="col-sm-12">
				<label for="notes_t2">notes_t2</label>
				<textarea id="notes_t2" class="form-control mb20" cols="30" rows="19">
|______|______|______|______|
|G3-C3-E3F3|G3-C3-E3F3|G3-C3-E3F3|G3-C3-E3F3|

|C3-----|C3-----|C3-----|C3-----|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|
|A#2-----|A#2-----|A#2-----|A#2-----|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|

|C3-----|C3-----|C3-----|C3-----|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|
|A#2-----|A#2-----|A#2-----|A#2-----|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|

|C3-----|C3-----|C3-----|C3-----|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|D4-G3-A#3C4|
|A#2-----|A#2-----|A#2-----|A#2-----|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|

|C4-----|C4---A#3C4|A#3-----|A#3---G4A#4|G#4-----|G#4---G4G#4|G4-----|G3---D#4F4|
|D#4-----|D#4-----|F4-----|F4-----|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|

|C4-----|C4---A#3C4|A#3-----|A#3---G4A#4|G#4-----|G#4---G4G#4|G4-----|G3---D#4F4|
|D#4-----|D#4-----|F4-----|F4-----|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|C4-G3-G#3A#3|

|______|</textarea>
			</div>
			<div class="col-sm-12">
				<label for="notes_b">notes_b</label>
				<textarea id="notes_b" class="form-control mb20" cols="30" rows="19">
|C3-----|C3-----|C3-----|C3-----|
|C3---Bb2-|C3---Bb2-|C3---Bb2-|C3---Bb2-|

|C3-----|C3-----|C3---Bb2-|C3---Bb2-|G2-----|G2-----|G2-----|G2-----|
|A#2-----|A#2-----|A#2---D3-|A#2---D3-|F2-----|F2-----|F2-----|F2-----|

|C3-----|C3-----|C3---Bb2-|C3---Bb2-|G2-----|G2-----|G2-----|G2-----|
|A#2-----|A#2-----|A#2---D3-|A#2---D3-|C3-----|C3-----|C3---Bb2-|C3---Bb2-|

|C3-----|C3-----|C3---Bb2-|C3---Bb2-|G2-----|G2-----|G2-----|G2-----|
|A#2-----|A#2-----|A#2---D3-|A#2---D3-|C3-----|C3-----|C3---Bb2-|C3---Bb2-|

|G#3-----|G#3-----|D#3-----|D#3-----|F3-----|F3-----|C3-----|C3-----|
|G#3-----|G#3-----|A#3-----|A#3-----|C3---Bb2-|C3---Bb2-|C3---Bb2-|C3---Bb2-|

|G#3-----|G#3-----|D#3-----|D#3-----|F3-----|F3-----|C3-----|C3-----|
|G#3-----|G#3-----|A#3-----|A#3-----|C3---Bb2-|C3---Bb2-|C3---Bb2-|C3---Bb2-|

|______|</textarea>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12 text-center">
				<hr>
				<small>Created by <a href="https://www.sovoboys.net/">Sovoboys.net</a>, using <a href="https://github.com/meenie/band.js/">Band.js</a></small>
			</div>
		</div>
	</div>
</div>
#stage{margin-top:35px}
.bn {
  white-space: pre;
  font-family: 'Courier New', monospace;
  font-size: 10px;
  line-height:10px;
}
.mb20{margin-bottom:20px;}

External resources loaded into this fiddle: