123 lines
4.9 KiB
Text
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"
|
|
)
|