forked from BRNSystems/bosca-ceoil-js
168 lines
8.5 KiB
HTML
168 lines
8.5 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<script src="/bosca-ceoil-js/assets/index.js"></script>
|
|
|
|
<link rel="stylesheet" href="/bosca-ceoil-js/assets/md-icons.css">
|
|
<link rel="stylesheet" href="/bosca-ceoil-js/assets/material.indigo-pink.min.css">
|
|
<script defer src="/bosca-ceoil-js/assets/material.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="/bosca-ceoil-js/assets/mdl-selectfield.min.css">
|
|
<script defer src="/bosca-ceoil-js/assets/mdl-selectfield.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="/bosca-ceoil-js/assets/dialog-polyfill.min.css">
|
|
|
|
<link rel="stylesheet" href="/bosca-ceoil-js/index.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app">
|
|
<div class="metaWorkspace">
|
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
|
|
id="playButton">
|
|
Play
|
|
</button>
|
|
|
|
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
|
|
<select class="mdl-selectfield__select" id="instruments">
|
|
<!-- MIDI -->
|
|
<option value="midi.piano1">MIDI ⮞ Piano ⮞ Grand Piano</option>
|
|
<option value="midi.chrom1">MIDI ⮞ Bells ⮞ Celesta</option>
|
|
<option value="midi.organ1">MIDI ⮞ Organ ⮞ Drawbar Organ</option>
|
|
<option value="midi.guitar1">MIDI ⮞ Guitar ⮞ Nylon Guitar</option>
|
|
<option value="midi.bass1">MIDI ⮞ Bass ⮞ Acoustic Bass</option>
|
|
<option value="midi.strings1">MIDI ⮞ Strings ⮞ Violin</option>
|
|
<option value="midi.ensemble1">MIDI ⮞ Ensemble ⮞ String Ensemble 1</option>
|
|
<option value="midi.brass1">MIDI ⮞ Brass ⮞ Trumpet</option>
|
|
<option value="midi.reed1">MIDI ⮞ Reed ⮞ Soprano Sax</option>
|
|
<option value="midi.pipe1">MIDI ⮞ Pipe ⮞ Piccolo</option>
|
|
<option value="midi.lead1">MIDI ⮞ Lead ⮞ Square Lead</option>
|
|
<option value="midi.pad1">MIDI ⮞ Pad ⮞ New Age Pad</option>
|
|
<option value="midi.fx1">MIDI ⮞ Synth ⮞ Rain</option>
|
|
<option value="midi.world1">MIDI ⮞ World ⮞ Sitar</option>
|
|
<option value="midi.percus1">MIDI ⮞ Drums ⮞ Tinkle Bell</option>
|
|
<option value="midi.se1">MIDI ⮞ Effects ⮞ Fret Noise</option>
|
|
|
|
<!-- Chiptune -->
|
|
<option value="square">Chiptune ⮞ Square Wave</option>
|
|
</select>
|
|
<label class="mdl-selectfield__label">Instrument</label>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
|
|
<input class="mdl-textfield__input" id="bpm" type="number" min="10" max="220" step="5" value="120"
|
|
required />
|
|
<label class="mdl-textfield__label">BPM</label>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
|
|
<input class="mdl-textfield__input" id="volume" type="number" min="0" max="200" step="5" value="100"
|
|
required />
|
|
<label class="mdl-textfield__label">Volume</label>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
|
|
<input class="mdl-textfield__input" id="swing" type="number" min="0" max="1" step="0.1" value="0"
|
|
required />
|
|
<label class="mdl-textfield__label">Swing</label>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
|
|
<input class="mdl-textfield__input" id="resonance" type="number" min="0" max="1" step="0.05" value="0"
|
|
required />
|
|
<label class="mdl-textfield__label">Resonance</label>
|
|
</div>
|
|
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
|
|
<input class="mdl-textfield__input" id="dampening" type="number" min="0" max="3000" step="100"
|
|
value="3000" required />
|
|
<label class="mdl-textfield__label">Dampening</label>
|
|
</div>
|
|
|
|
<button id="effectsButton"
|
|
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">
|
|
Effects <i class="material-icons">arrow_drop_down</i>
|
|
</button>
|
|
<ul id="effectsMenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
|
|
for="effectsButton">
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="delayEffect" type="number" min="0" max="1" step="0.05"
|
|
value="0" required />
|
|
<label class="mdl-textfield__label">Delay</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="chorusEffect" type="number" min="0" max="1" step="0.05"
|
|
value="0" required />
|
|
<label class="mdl-textfield__label">Chorus</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="reverbEffect" type="number" min="0" max="1" step="0.05"
|
|
value="0" required />
|
|
<label class="mdl-textfield__label">Reverb</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="distortionEffect" type="number" min="0" max="8" step="1"
|
|
value="0" required />
|
|
<label class="mdl-textfield__label">Distortion</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="lowBoostEffect" type="number" min="0" max="3000"
|
|
step="100" value="0" required />
|
|
<label class="mdl-textfield__label">Low boost</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="compressorEffect" type="number" min="-100" max="0"
|
|
step="5" value="0" required />
|
|
<label class="mdl-textfield__label">Compressor</label>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
|
|
<input class="mdl-textfield__input" id="highPassEffect" type="number" min="0" max="3000"
|
|
step="100" value="0" required />
|
|
<label class="mdl-textfield__label">High pass</label>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
|
|
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
|
|
id="helpButton">
|
|
Help
|
|
</button>
|
|
</div>
|
|
|
|
<div id="patternWorkspace">
|
|
<table id="pattern">
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<dialog id="helpModal" class="mdl-dialog">
|
|
<h4 class="mdl-dialog__title">Help</h4>
|
|
<div class="mdl-dialog__content">
|
|
<ul>
|
|
<li>Click in a box to add or remove a note.</li>
|
|
<li>Shift click to extend a note, and ctrl-shift click to shorten it.</li>
|
|
<li>Press the space bar to play or stop the song.</li>
|
|
<li>After clicking in an entry field, use the arrow keys to quickly change the value.</li>
|
|
</ul>
|
|
</div>
|
|
<div class="mdl-dialog__actions">
|
|
<button type="button" class="mdl-button close">Close</button>
|
|
</div>
|
|
</dialog>
|
|
</body>
|
|
|
|
</html>
|