bytebeat-composer/src/embed.pug

123 lines
4.9 KiB
Text

doctype html
html(data-embed lang="en")
head
meta(charset="utf-8")
meta(name="viewport" content="width=device-width,initial-scale=1")
meta(name="description" content="JS algorithmic music generator")
meta(name="author" content="SArpnt")
title Bytebeat composer (embedded)
link(href="/favicon.png" rel="shortcut icon")
link(href="/style.css" type="text/css" rel="stylesheet")
script.
globalThis.loadLibrary = false;
globalThis.useLocalStorage = false;
globalThis.useUrlData = false;
script(src="/embed.js" defer type="module")
script(src="/interface.js" defer type="module")
link(rel="modulepreload" as="audioworklet" href="/audio-worklet.js")
body
main#content
section.container-fixed
#code-editor-container
textarea#code-editor(aria-label="Code editor" spellcheck="false")
#controls
span#control-time.control-group.control-time
button#control-time-unit(title="Time unit" onclick="bytebeat.changeTimeUnit()")
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)" title="Fast reverse") ⏪︎
button#control-reverse(onclick="bytebeat.setPlaySpeed(-1)" title="Reverse") ⏴︎
button#control-pause(onclick="bytebeat.setPlaySpeed(0)" title="Pause") ⏸︎
button#control-play(onclick="bytebeat.setPlaySpeed(1)" title="Play") ⏵︎
button#control-ff(onclick="bytebeat.setPlaySpeed(4)" 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"
style="width:8em"
)
span.control-group.control-view.buttons
button#control-scaledown(onclick="bytebeat.changeScale(-1)" title="Zoom in") +
button#control-scaleup(onclick="bytebeat.changeScale(1)" title="Zoom out") -
//
span.control-group.control-record.buttons
button(title="Share" onclick="") 🔗︎
button(title="Download" onclick="") 📥︎
button(title="Upload" onclick="") 📤︎
button(title="Record" onclick="") ⏺︎
span.control-group.control-song
select#control-song-mode(
onchange="bytebeat.setSongMode(this.value); bytebeat.refresh()"
title="Playback mode"
)
option(value="Bytebeat" selected) 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.refresh()"
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.refresh()"
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.togglePlay()}"
)
canvas#canvas-main(height="256" width="1024" aria-label="Oscillioscope")
#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")
// TODO: create svgs for all controls
svg(style="display:none" 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"
)