v1.0

MIDI export
wholetone (Janko) keyboard layout
color coding for synth blocks
various improvements and fixes

Author: Valent-in

README.md

@@ -1,7 +1,7 @@
 # PulseQueue
 
 Minimalistic web-application for creating electronic music with virtual analog synthesizers.  
-Initially designed as sketching tool but can be used as basic DAW.
+Initially designed as sketching tool but can be used for making full-fledged tracks.
 
 **https://valent-in.github.io/pulseq/**
 
@@ -13,6 +13,7 @@ Initially designed as sketching tool but can be used as basic DAW.
 - Multi-layered step sequencer
 - Exportable synth presets
 - WAV audio export
+- MIDI export
 
 ## Music examples (YouTube)
 - [Cosmix - part 1](https://www.youtube.com/watch?v=KkLsClq37w4)
@@ -45,7 +46,10 @@ Some effects are CPU-heavy (especially reverb and phaser). This should be accoun
 WAV export duration may be limited on mobile browsers to about 10 minutes.
 
 ---
-Using Web Audio API and [Tone.js](https://github.com/Tonejs/Tone.js)
+Using Web Audio API and [Tone.js](https://github.com/Tonejs/Tone.js)  
+File export sources:
+[bufferToWave](https://github.com/rwgood18/javascript-audio-file-dynamics-compressor),
+[midi-writer](https://github.com/carter-thaxton/midi-file).
 
 This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License version 3.  
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY.

css/style.css

@@ -115,8 +115,8 @@ a {
 }
 
 #header-tabs .tab--active {
-	background-color: #133;
-	border: 1px solid #577;
+	background-color: #143;
+	border: 1px solid #576;
 	color: #ccc;
 }
 
@@ -135,7 +135,7 @@ a {
 }
 
 #pattern-footer .tab--active {
-	background-color: #114;
+	background-color: #224;
 	border: 1px solid #55a;
 	color: #ccc;
 }
@@ -316,7 +316,7 @@ button.button--play.button--play-loop {
 	border-radius: 3px;
 	flex-grow: 1;
 	width: 100%;
-	min-width: 40vw;
+	min-width: 41vw;
 	max-width: 55vh;
 	padding: 10px 15px;
 	margin: 4px;
@@ -338,6 +338,13 @@ button.button--play.button--play-loop {
 	color: #aaa;
 	font-weight: bold;
 	align-self: flex-end;
+	margin: 5px;
+}
+
+@media (min-width: 720px) and (max-width: 1279px) {
+	#synth-main > div {
+		max-width: 41vw;
+	}
 }
 
 @media (min-width: 1280px) {
@@ -360,6 +367,38 @@ button.button--play.button--play-loop {
 	}
 }
 
+#synth-main > div.border-osc {
+	border-top: 3px solid #777;
+}
+
+#synth-main > div.border-osc-third {
+	border-top: 3px solid #444;
+}
+
+#synth-main > div.border-envelope {
+	border-top: 3px solid #088;
+}
+
+#synth-main > div.border-filter {
+	border-top: 3px solid #890;
+}
+
+#synth-main > div.border-osc-mod {
+	border-top: 2px dashed #777;
+}
+
+#synth-main > div.border-filter-mod {
+	border-top: 2px dashed #890;
+}
+
+#synth-main > div.border-amp-mod {
+	border-top: 2px dashed #444;
+}
+
+#synth-main > div.border-mod-envelope {
+	border-top: 3px solid #62b;
+}
+
 #synth-main > div > div:last-child {
 	background-color: #191919;
 	height: 100%;
@@ -505,62 +544,71 @@ input[type=range].range--volume {
 	justify-content: center;
 }
 
+#piano-container-outer.piano--scrolllock {
+	overflow-x: hidden;
+}
+
 #piano-container {
-	height: 60px;
-	display: flex;
-	flex-wrap: nowrap;
+	-webkit-user-select: none;
+	user-select: none;
+	padding: 1px 0;
 	/*fix content cut*/
 	min-width: 0;
 }
 
-#piano-container::before,
-#piano-container:after {
-	content: "";
-	min-width: 4px;
-}
-
 #piano-container.piano--hidden {
 	display: none;
 }
 
-.piano-key-white {
-	height: 100%;
-	min-width: 25px;
-	background-color: #ccc;
-	border-left: 1px solid #111;
-	box-sizing: border-box;
-	z-index: 1;
+#piano-container > div {
+	display: flex;
 }
 
-.piano-key-white span {
-	display: inline-block;
-	padding-top: 32px;
-	color: #b5b5b5;
-	pointer-events: none;
-	-webkit-user-select: none;
-	user-select: none;
+#piano-container > div:first-child {
+	padding-left: 17px;
+}
+
+.piano-key {
+	width: 35px;
+	min-width: 35px;
+	height: 35px;
+	border: 1px solid #696969;
+	border-radius: 3px;
+	margin: 1px;
+	position: relative;
 }
 
-.piano-key-white:first-child {
-	border-left: none;
-	border-bottom-left-radius: 3px;
+.piano-key > .note-mark {
+	font-weight: bold;
+	position: absolute;
+	right: 0;
+	bottom: 0;
 }
 
-.piano-key-white:last-child {
-	border-bottom-right-radius: 3px;
+.c4-key-mark {
+	color: #768;
+}
+
+.piano-key > .letter-mark {
+	padding-left: 2px;
+	font-size: 14px;
+	color: transparent;
+}
+
+#piano-container.show-letters .letter-mark {
+	color: #588;
+}
+
+.piano-key-white {
+	background-color: #ccc;
 }
 
 .piano-key-black {
-	box-sizing: border-box;
-	margin-left: -10px;
-	margin-right: -10px;
-	min-width: 20px;
-	height: 50%;
 	background-color: #333;
-	border-bottom: 6px solid #111;
-	border-left: 2px solid #111;
-	border-right: 2px solid #111;
-	z-index: 2;
+}
+
+.key--pressed {
+	box-shadow: inset 0 0 0 3px #c18600;
 }
 
 .synth-list-entry {
@@ -649,7 +697,8 @@ input[type=range].range--volume {
 
 #synth-list-caption-area {
 	float: right;
-	padding: 4px;
+	padding: 2px;
+	margin: 2px;
 	-webkit-user-select: none;
 	user-select: none;
 }
@@ -678,6 +727,7 @@ input[type=range].range--volume {
 
 .modal-box {
 	border: 2px solid #333;
+	border-radius: 3px;
 	background-color: #191919;
 	padding: 12px;
 	box-sizing: border-box;
@@ -686,12 +736,6 @@ input[type=range].range--volume {
 	overflow-y: auto;
 }
 
-@media (min-width:500px) {
-	.modal-box {
-		border-radius: 3px;
-	}
-}
-
 .modal-alert-box {
 	min-width: 240px;
 }
@@ -819,6 +863,10 @@ button.button--highlight-orange {
 	box-shadow: inset 0 0 0 2px orange;
 }
 
+button.button--highlight-yellow {
+	box-shadow: inset 0 0 0 1px #890;
+}
+
 #menu-synth-list-container {
 	max-width: 55vh;
 	width: 75vw;
@@ -890,7 +938,6 @@ button.button--highlight-orange {
 	border-radius: 3px;
 	margin: 8px auto 8px auto;
 	padding: 8px 32px;
-	overflow: hidden;
 	-webkit-user-select: none;
 	user-select: none;
 	cursor: pointer;
@@ -934,6 +981,18 @@ input[type=file]:focus + span {
 	background-color: rgba(100, 100, 0, 0.4);
 }
 
+#synth-name-container {
+	display: flex;
+	align-items: baseline;
+	white-space: nowrap;
+}
+
+#input-synth-name {
+	width: 10rem;
+	flex-grow: 1;
+	margin-left: 8px;
+}
+
 #button-import-synth {
 	position: relative;
 	overflow: hidden;
@@ -942,7 +1001,7 @@ input[type=file]:focus + span {
 	vertical-align: middle;
 }
 
-#selsct-synth-preset {
+#select-synth-preset {
 	max-width: 5rem;
 }
 
@@ -1202,4 +1261,19 @@ button.button--arrow-up {
 	#synth-list-caption-area {
 		padding: 4px 16px;
 	}
+}
+
+@media (hover: hover) {
+	#pattern-main.add-scrollbar-spacing {
+		border-right: 1px solid #222;
+	}
+
+	#pattern-main.add-scrollbar-spacing > table {
+		margin-right: 16px;
+	}
+
+	#arrange-main.add-scrollbar-spacing {
+		padding-bottom: 16px;
+		border-bottom: 1px solid #222;
+	}
 }

css/table-pattern.css

@@ -70,7 +70,7 @@
 	border-top: none;
 	border-right: 1px solid #444;
 	border-left: 1px solid #444;
-	color: #b5b5b5;
+	font-weight: bold;
 }
 
 #pattern-main table td:nth-child(2) {
@@ -95,6 +95,7 @@
 	background-color: #111;
 	border: 1px solid #696969;
 	border-bottom-right-radius: 3px;
+	font-weight: normal;
 }
 
 #note-length-control:before {