137 lines
5.2 KiB
Text
137 lines
5.2 KiB
Text
doctype html
|
|
html(data-embed lang="en")
|
|
head
|
|
meta(charset="utf-8")
|
|
meta(content="width=device-width,initial-scale=1" name="viewport")
|
|
meta(content="JS algorithmic music generator" name="description")
|
|
meta(content="SArpnt" name="author")
|
|
title Bytebeat composer (embedded)
|
|
link(href="/favicon.png" rel="shortcut icon")
|
|
link(href="/style.css" type="text/css" rel="stylesheet")
|
|
link(href="/audio-worklet.js" as="audioworklet" rel="modulepreload")
|
|
script.
|
|
globalThis.loadLibrary = false;
|
|
globalThis.useLocalStorage = false;
|
|
globalThis.useUrlData = false;
|
|
script(src="/embed.js" defer type="module")
|
|
script(src="/bytebeat.js" defer type="module")
|
|
body
|
|
main#content
|
|
section.container-fixed
|
|
#code-editor-container
|
|
textarea#code-editor(spellcheck="false" aria-label="Code editor")
|
|
#controls
|
|
span#control-time.control-group.control-time
|
|
button#control-time-unit(onclick="bytebeat.changeTimeUnit();" title="Time unit")
|
|
label#control-time-unit-label(for="control-time-value") t
|
|
input#control-time-value(
|
|
onchange="bytebeat.setByteSample(bytebeat.convertFromUnit(+this.value)); this.value = '';"
|
|
style="width: 8em"
|
|
placeholder="0"
|
|
type="number"
|
|
title="Time value"
|
|
)
|
|
span.control-group.control-time.buttons
|
|
button#control-restart(onclick="bytebeat.resetTime();" title="Restart") ⏮︎
|
|
button#control-fr(
|
|
onclick="bytebeat.setPlaySpeed(-4); bytebeat.togglePlay(true);"
|
|
title="Fast reverse"
|
|
) ⏪︎
|
|
button#control-reverse(
|
|
onclick="bytebeat.setPlaySpeed(-1); bytebeat.togglePlay(true);"
|
|
title="Reverse"
|
|
) ⏴︎
|
|
button#control-pause(onclick="bytebeat.togglePlay(false);" title="Pause") ⏸︎
|
|
button#control-play(
|
|
onclick="bytebeat.setPlaySpeed(1); bytebeat.togglePlay(true);"
|
|
title="Play"
|
|
) ⏵︎
|
|
button#control-ff(
|
|
onclick="bytebeat.setPlaySpeed(4); bytebeat.togglePlay(true);"
|
|
title="Fast Forward"
|
|
) ⏩︎
|
|
span.control-group.control-playback
|
|
input#control-volume(
|
|
oninput="bytebeat.setVolume();"
|
|
value="0.6"
|
|
step="any"
|
|
max="1"
|
|
min="0"
|
|
type="range"
|
|
title="Volume"
|
|
)
|
|
span.control-group.control-view.buttons.buttons-zoom
|
|
button#control-scaledown(onclick="bytebeat.changeScale(-1);" title="Zoom in") +
|
|
button#control-scaleup(onclick="bytebeat.changeScale(1);" title="Zoom out") -
|
|
//
|
|
<span class="control-group control-record buttons">
|
|
<button title="Share" onclick="">🔗︎</button>
|
|
<button title="Download" onclick="">📥︎</button>
|
|
<button title="Upload" onclick="">📤︎</button>
|
|
<button title="Record" onclick="">⏺︎</button>
|
|
</span>
|
|
span.control-group.control-song
|
|
select#control-song-mode(
|
|
onchange="bytebeat.setPlaybackMode(this.value);"
|
|
title="Playback mode"
|
|
)
|
|
option(selected value="Bytebeat") Bytebeat
|
|
option(value="Signed Bytebeat") Signed Bytebeat
|
|
option(value="Floatbeat") Floatbeat
|
|
option(value="Funcbeat") Funcbeat
|
|
span.control-group
|
|
input#control-sample-rate.control-song.control-round-right(
|
|
onchange="bytebeat.setSampleRate(+this.value); bytebeat.refreshCode();"
|
|
onblur="this.value||=this.placeholder;this.placeholder=''"
|
|
onfocus="this.placeholder=this.value;this.value=''"
|
|
style="width: 6em"
|
|
value="8000"
|
|
list="samplerates"
|
|
step="any"
|
|
min="0"
|
|
type="number"
|
|
title="Sample rate"
|
|
)
|
|
span.text
|
|
label.control-song(for="control-sample-rate") Hz
|
|
label.control-playback(for="control-sample-rate-divisor") /
|
|
input#control-sample-rate-divisor.control-playback.control-round-left.control-round-right(
|
|
onchange="bytebeat.setSampleRateDivisor(+this.value); bytebeat.refreshCode();"
|
|
style="width: 3em"
|
|
value="1"
|
|
step="1"
|
|
min="1"
|
|
type="number"
|
|
title="Sample rate divisor"
|
|
)
|
|
datalist#samplerates
|
|
option(value="8000")
|
|
option(value="11025")
|
|
option(value="16000")
|
|
option(value="22050")
|
|
option(value="32000")
|
|
option(value="44100")
|
|
option(value="48000")
|
|
#error
|
|
#canvas-container(
|
|
onclick="if (this.dataset.disabled !== 'true') {bytebeat.setPlaySpeed(1); bytebeat.togglePlay()}"
|
|
)
|
|
canvas#canvas-main(height="256" width="1024")
|
|
#canvas-timecursor
|
|
#canvas-toggleplay.canvas-toggleplay-show
|
|
svg#svg-canvas-toggleplay-play
|
|
use(xlink:href="#symbol-play")
|
|
svg#svg-canvas-toggleplay-pause
|
|
use(xlink:href="#symbol-pause")
|
|
// SVG BUTTONS
|
|
// TODO: create svgs for all controls
|
|
#svg-icons(style="height: 0; width: 0; overflow: hidden")
|
|
svg(xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg")
|
|
symbol#symbol-play(viewBox="0 0 32 32")
|
|
path(
|
|
d="m23 14.3-9-5.2c-1.3-.8-3 .2-3 1.7v10.4c0 1.5 1.7 2.5 3 1.7l9-5.2c1.3-.7 1.3-2.7 0-3.4z"
|
|
)
|
|
symbol#symbol-pause(viewBox="0 0 32 32")
|
|
path(
|
|
d="M12.5 23c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2s2 .9 2 2v10c0 1.1-.9 2-2 2zm7 0c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2s2 .9 2 2v10c0 1.1-.9 2-2 2z"
|
|
)
|