BRNSystems/bosca-ceoil-js
1
0
Fork 1
mirror of https://github.com/mtkennerly/bosca-ceoil-js.git synced 2024-09-19 11:38:32 +02:00
Code Issues Projects Releases Wiki Activity
a1d08f8e54
bosca-ceoil-js/index.html

168 lines
8.5 KiB
HTML
Raw Normal View History

Initial commit
2019-07-16 09:31:45 +02:00
<html>
<head>
Fix typo
2019-07-16 10:55:29 +02:00
<script src="/bosca-ceoil-js/assets/index.js"></script>
Initial commit
2019-07-16 09:31:45 +02:00
Fix typo
2019-07-16 10:55:29 +02:00
<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>
Initial commit
2019-07-16 09:31:45 +02:00
Fix typo
2019-07-16 10:55:29 +02:00
<link rel="stylesheet" href="/bosca-ceoil-js/assets/mdl-selectfield.min.css">
<script defer src="/bosca-ceoil-js/assets/mdl-selectfield.min.js"></script>
Initial commit
2019-07-16 09:31:45 +02:00
Fix typo
2019-07-16 10:55:29 +02:00
<link rel="stylesheet" href="/bosca-ceoil-js/assets/dialog-polyfill.min.css">
Incorporate dialog polyfill for better browser support
2019-07-16 10:49:15 +02:00
Fix typo
2019-07-16 10:55:29 +02:00
<link rel="stylesheet" href="/bosca-ceoil-js/index.css">
Initial commit
2019-07-16 09:31:45 +02:00
</head>
<body>
<div id="app">
Add a basic selection of instruments from the MIDI and chiptune categories
2019-07-21 16:40:50 +02:00
<div class="metaWorkspace">
Initial commit
2019-07-16 09:31:45 +02:00
<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">
Add a basic selection of instruments from the MIDI and chiptune categories
2019-07-21 16:40:50 +02:00
<!-- 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>
Initial commit
2019-07-16 09:31:45 +02:00
</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>
Reference in New Issue Copy Permalink