126 lines
2.3 KiB
Kotlin
126 lines
2.3 KiB
Kotlin
import kotlinx.html.HTML
|
|
import kotlinx.html.InputType
|
|
import kotlinx.html.body
|
|
import kotlinx.html.div
|
|
import kotlinx.html.h3
|
|
import kotlinx.html.head
|
|
import kotlinx.html.id
|
|
import kotlinx.html.iframe
|
|
import kotlinx.html.input
|
|
import kotlinx.html.label
|
|
import kotlinx.html.link
|
|
import kotlinx.html.script
|
|
import kotlinx.html.span
|
|
import kotlinx.html.style
|
|
import kotlinx.html.title
|
|
|
|
fun HTML.index() {
|
|
head {
|
|
title("Hello from Ktor!")
|
|
link("static/worklet.css", "stylesheet" ,"text/css")
|
|
}
|
|
body {
|
|
div {
|
|
+"We need a button to start because we can only start audio from a user event:"
|
|
}
|
|
div("button_div") {
|
|
span("button") {
|
|
id = "createButton"
|
|
|
|
+"Create"
|
|
}
|
|
|
|
span("button") {
|
|
id = "startButton"
|
|
|
|
+"Start"
|
|
}
|
|
|
|
span("button") {
|
|
id = "stopButton"
|
|
|
|
+"Stop"
|
|
}
|
|
}
|
|
div {
|
|
+ "An example of how to interact with the audioworklet:"
|
|
}
|
|
div {
|
|
label {
|
|
htmlFor = "noteLength"
|
|
+"Note length (in samples):"
|
|
}
|
|
input {
|
|
id = "noteLength"
|
|
type = InputType.number
|
|
value = "2500"
|
|
min = "1"
|
|
max = "100000"
|
|
step = "100"
|
|
}
|
|
}
|
|
div {
|
|
label {
|
|
htmlFor = "harmonics"
|
|
+"Number of harmonics:"
|
|
}
|
|
input {
|
|
id = "harmonics"
|
|
type = InputType.number
|
|
value = "3"
|
|
min = "0"
|
|
max = "10"
|
|
}
|
|
}
|
|
h3 {
|
|
+ "Node 1"
|
|
}
|
|
div {
|
|
input {
|
|
id = "note_c3_1"
|
|
type = InputType.button
|
|
value = "C3"
|
|
}
|
|
input {
|
|
id = "note_e3_1"
|
|
type = InputType.button
|
|
value = "E3"
|
|
}
|
|
input {
|
|
id = "note_g3_1"
|
|
type = InputType.button
|
|
value = "G3"
|
|
}
|
|
}
|
|
h3 {
|
|
+ "Node 2"
|
|
}
|
|
div {
|
|
input {
|
|
id = "note_c3_2"
|
|
type = InputType.button
|
|
value = "C3"
|
|
}
|
|
input {
|
|
id = "note_e3_2"
|
|
type = InputType.button
|
|
value = "E3"
|
|
}
|
|
input {
|
|
id = "note_g3_2"
|
|
type = InputType.button
|
|
value = "G3"
|
|
}
|
|
}
|
|
|
|
iframe {
|
|
id = "iframe"
|
|
src = "/worklet.html"
|
|
style = "width: 100%; height: 500px; background-color: #ddf;"
|
|
}
|
|
|
|
script(src = "/static/kotlin-audioworklet.js") {}
|
|
}
|
|
}
|
|
|