jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

crossfader

This commit is contained in:
“chrisshank” 2024-12-17 23:05:51 -08:00
parent 7e90ce00f4
commit fb4e5204ac
4 changed files with 104 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
demo/audio-beats-with-event-propagators.html
View File

@ -26,18 +26,6 @@
</style>
</head>
<body>
<folk-shape x="100" y="100">
<folk-metronome bpm="120"></folk-metronome>
</folk-shape>
<folk-shape x="200" y="100">
<audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
</folk-shape>
<folk-shape x="200" y="200">
<audio id="hat" src="/Hat_Closed.wav" controls></audio>
</folk-shape>
<folk-event-propagator
source="folk-metronome"
target="#kick"
@ -52,9 +40,20 @@
expression="play(): from.beat % 3"
></folk-event-propagator>
<folk-shape x="100" y="100">
<folk-metronome bpm="120"></folk-metronome>
</folk-shape>
<folk-shape x="200" y="100">
<audio id="kick" src="/Kick_Bouncy.wav" controls></audio>
</folk-shape>
<folk-shape x="200" y="200">
<audio id="hat" src="/Hat_Closed.wav" controls></audio>
</folk-shape>
<script type="module">
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-llm.ts';
import './src/folk-metronome.ts';
import '../src/standalone/folk-event-propagator.ts';
</script>

85
demo/music-crossfader.html Normal file
View File

@ -0,0 +1,85 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beats</title>
<style>
html {
height: 100%;
}
body {
min-height: 100%;
position: relative;
margin: 0;
}
folk-shape {
border: 1px solid black;
border-radius: 4px;
}
cross-fader {
width: 100%;
height: 100%;
display: grid;
grid-template:
'track1 track2'
'fader fader';
row-gap: 20px;
record-player:nth-child(1) {
grid-area: track1;
}
record-player:nth-child(2) {
grid-area: track2;
scale: -1 1;
}
input {
grid-area: fader;
justify-self: center;
margin: 0;
}
}
</style>
</head>
<body>
<folk-shape x="200" y="100">
<cross-fader>
<record-player id="track1">
<audio src="/Feather.mov"></audio>
</record-player>
<record-player id="track2">
<audio src="/Comanche (Heyoka Remix).wav"></audio>
</record-player>
<!-- Can also use any audio or video element -->
<!-- <audio id="track1" src="/Feather.mov" controls></audio>
<audio id="track2" src="/Comanche (Heyoka Remix).wav" controls></audio> -->
<input id="fader" type="range" min="-1" max="1" step="0.001" />
</cross-fader>
</folk-shape>
<folk-event-propagator
source="#fader"
target="#track1"
trigger="input"
expression="volume: Math.sqrt((1 - from.valueAsNumber) / 2)"
></folk-event-propagator>
<folk-event-propagator
source="#fader"
target="#track2"
trigger="input"
expression="volume: Math.sqrt((1 + from.valueAsNumber) / 2)"
></folk-event-propagator>
<script type="module">
import './src/record-player.ts';
import '../src/standalone/folk-shape.ts';
import '../src/standalone/folk-event-propagator.ts';
</script>
</body>
</html>

BIN
demo/public/Comanche (Heyoka Remix).wav Normal file
View File

Binary file not shown.

12
demo/src/record-player.ts
View File

@ -8,16 +8,13 @@ const styles = css`
:host {
display: block;
position: relative;
}
.player {
background-color: #d52831;
width: 330px;
height: 190px;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 10px;
box-shadow: 0 8px 0 0 #be2728;
margin-top: -4px;
@ -244,7 +241,7 @@ export class RecordPlayer extends HTMLElement {
<div class="control"></div>
</div>
<button class="btn"></button>
<input type="range" class="slider" min="0" max="1" step="0.05" value="0.5" />
<input type="range" class="slider" min="0" max="1" step="0.01" value="1" />
</div>
<slot></slot>`);
@ -260,6 +257,11 @@ export class RecordPlayer extends HTMLElement {
return this.#audio.volume;
}
set volume(volume) {
this.#audio.volume = volume;
this.#volumeInput.valueAsNumber = volume;
}
#playTimeout: number = -1;
play() {