98 lines
4.7 KiB
HTML
98 lines
4.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" >
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Latent Cycles</title>
|
|
<link rel="stylesheet" href="./style.css">
|
|
</head>
|
|
<body>
|
|
<!-- partial:index.partial.html -->
|
|
<div id="container">
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<button class="tonic-left active" data-tonic="0">C</button>
|
|
<button class="tonic-left" data-tonic="1">C♯ / D♭</button>
|
|
<button class="tonic-left" data-tonic="2">D</button>
|
|
<button class="tonic-left" data-tonic="3">E♯ / E♭</button>
|
|
<button class="tonic-left" data-tonic="4">E</button>
|
|
<button class="tonic-left" data-tonic="5">F</button>
|
|
<button class="tonic-left" data-tonic="6">F♯ / G♭</button>
|
|
<button class="tonic-left" data-tonic="7">G</button>
|
|
<button class="tonic-left" data-tonic="8">G♯ / A♭</button>
|
|
<button class="tonic-left" data-tonic="9">A</button>
|
|
<button class="tonic-left" data-tonic="10">A♯ / B♭</button>
|
|
<button class="tonic-left" data-tonic="11">B</button>
|
|
</div>
|
|
<div class="control-group">
|
|
<button class="chord-left active" data-chord="major">Major</button>
|
|
<button class="chord-left" data-chord="minor">Minor</button>
|
|
<button class="chord-left" data-chord="major7th">Major 7th</button>
|
|
<button class="chord-left" data-chord="minor7th">Minor 7th</button>
|
|
<button class="chord-left" data-chord="dominant7th">Dominant 7th</button>
|
|
<button class="chord-left" data-chord="sus2">Sus2</button>
|
|
<button class="chord-left" data-chord="sus4">Sus4</button>
|
|
</div>
|
|
</div>
|
|
<svg id="vis" viewBox="0 0 1000 1000">
|
|
<defs>
|
|
<radialGradient id="halo">
|
|
<stop offset="0%" stop-color="rgba(255, 255, 255, 0.5)" />
|
|
<stop offset="95%" stop-color="rgba(255, 255, 255, 0.5)" />
|
|
<stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
|
|
</radialGradient>
|
|
</defs>
|
|
<g id="vis-halos"></g>
|
|
<g id="vis-elements"></g>
|
|
</svg>
|
|
<div class="controls">
|
|
<div class="control-group">
|
|
<button class="tonic-right active" data-tonic="0">C</button>
|
|
<button class="tonic-right" data-tonic="1">C♯ / D♭</button>
|
|
<button class="tonic-right" data-tonic="2">D</button>
|
|
<button class="tonic-right" data-tonic="3">E♯ / E♭</button>
|
|
<button class="tonic-right" data-tonic="4">E</button>
|
|
<button class="tonic-right" data-tonic="5">F</button>
|
|
<button class="tonic-right" data-tonic="6">F♯ / G♭</button>
|
|
<button class="tonic-right" data-tonic="7">G</button>
|
|
<button class="tonic-right" data-tonic="8">G♯ / A♭</button>
|
|
<button class="tonic-right" data-tonic="9">A</button>
|
|
<button class="tonic-right" data-tonic="10">A♯ / B♭</button>
|
|
<button class="tonic-right" data-tonic="11">B</button>
|
|
</div>
|
|
<div class="control-group">
|
|
<button class="chord-right active" data-chord="major">Major</button>
|
|
<button class="chord-right" data-chord="minor">Minor</button>
|
|
<button class="chord-right" data-chord="major7th">Major 7th</button>
|
|
<button class="chord-right" data-chord="minor7th">Minor 7th</button>
|
|
<button class="chord-right" data-chord="dominant7th">Dominant 7th</button>
|
|
<button class="chord-right" data-chord="sus2">Sus2</button>
|
|
<button class="chord-right" data-chord="sus4">Sus4</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="output-controls">
|
|
<div class="output-control midi-required">
|
|
<label for="output-selector">Output</label>
|
|
<select id="output-selector"></select>
|
|
</div>
|
|
<div class="output-control">
|
|
<label for="tempo-source-selector">Tempo</label>
|
|
<select id="tempo-source-selector" class="midi-required"></select>
|
|
<input id="tempo-selector" type="range" min="10" max="200" step="1" value="90">
|
|
<span id="tempo-label">90</span>
|
|
</div>
|
|
<p>MIDI outputs & clock <a href="https://caniuse.com/#feat=midi">supported on Chrome only</a>.</p>
|
|
</div>
|
|
<div id="loading">Loading models…</div>
|
|
<div id="generating" style="display: none">Generating…</div>
|
|
<!-- partial -->
|
|
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/@magenta/music@1.1.11/dist/magentamusic.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/webmidi@2.0.0/webmidi.min.js'></script>
|
|
<script src='https://cdn.jsdelivr.net/npm/web-animations-js@2.3.1/web-animations.min.js'></script>
|
|
<script src='https://cdn.rawgit.com/tambien/StartAudioContext/8da8637e/StartAudioContext.js'></script>
|
|
<script src='https://cdn.rawgit.com/danigb/tonal/9b6b1663/dist/tonal.min.js'></script>
|
|
<script src="./script.js"></script>
|
|
|
|
</body>
|
|
</html> |