--- /dev/null
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8">
+ <title>XMDV</title>
+ </head>
+ <body>
+ <h2>Timers</h2>
+ <table>
+ <tr>
+ <td><audio id="timer1" src=/static/sounds/timer1.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ <tr>
+ <td><audio id="timer2" src=/static/sounds/timer2.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ <tr>
+ <td><audio id="timer3" src=/static/sounds/timer3.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ <tr>
+ <td><audio id="timer4" src=/static/sounds/timer4.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ <tr>
+ <td><audio id="timer5" src=/static/sounds/timer5.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ <tr>
+ <td><audio id="timer6" src=/static/sounds/timer6.wav controls></audio></td>
+ <td>Timer 1</td>
+ </tr>
+ </table>
+ <h2>Doomsday</h2>
+ <audio id="clock" src=/static/sounds/clock.wav controls></audio>
+ <br>
+ <input type="button" onclick="start();" value="Start listen" id="start" /> <em style="color:green" id="state"></em>
+
+ <p>
+ Above are all the audio elements that will play out the SFX for the timers and the clock. Feel free to test them out. When you click the start button you'll still have full control over the audio elements but the system will also automatically fade them in when a timer is updated or when a clock tick is triggered. If you do step in and stop one of them, it wont play until its triggered again. For the timers it will automatically seek so that the sound file ends when the timer does. Note that the internal tracker for the clock will update on start, but the timers will not. This means that the system will try to "catch-up" and play sounds for any running timers.
+ </p>
+
+ <script>
+
+// todo
+// - add leveling on clock tick
+// - potentially rework leveling system
+
+const fadeLength = 4.;
+const levelLength = 4; // how long it takes for the level to converge on the target
+const effectLength = 6; // how long it takes for the effects to converge on the target
+
+let pastTime = [
+ 0,
+ 0,
+ 0,
+ 0,
+ 0,
+ 0
+ ];
+let pastClock = 0;
+let timersPlaying = 0;
+
+const context = new AudioContext();
+
+// helper function for creating the convolution reverb
+async function createReverb() {
+ let reverb = context.createConvolver();
+
+ // load impulse response from file
+ let response = await fetch("/static/sounds/impulse.wav");
+ let arrayBuffer = await response.arrayBuffer();
+ reverb.buffer = await context.decodeAudioData(arrayBuffer);
+
+ return reverb;
+}
+
+const amp = context.createGain();
+const filter = new BiquadFilterNode(context, options={type:"lowpass",frequency:1000});
+const reverb = createReverb();
+const wetGain = context.createGain();
+const dryGain = context.createGain();
+const compressor = new DynamicsCompressorNode(context, options={ratio:4});
+
+wetGain.gain.value = 0;
+
+const timers = [
+ document.getElementById("timer1"),
+ document.getElementById("timer2"),
+ document.getElementById("timer3"),
+ document.getElementById("timer4"),
+ document.getElementById("timer5"),
+ document.getElementById("timer6"),
+ document.getElementById("clock")
+ ];
+const clock = document.getElementById("clock");
+
+for (let t = 0; t < 6; t++) {
+ let timer = timers[t];
+ let track = context.createMediaElementSource(timer);
+ track.connect(amp);
+}
+
+
+reverb.then(reverb => {
+ track = context.createMediaElementSource(clock);
+ track.connect(compressor);
+ amp.connect(filter)
+ filter.connect(reverb)
+ reverb.connect(wetGain)
+ wetGain.connect(compressor);
+ amp.connect(dryGain).connect(compressor)
+
+ compressor.connect(context.destination);
+})
+
+function getTimes() {
+ fetch("./api", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {
+
+ if (pastClock != data["current_position"]) {
+ pastClock = data["current_position"]
+ if (context.state === "suspended") {
+ context.resume();
+ }
+
+ console.log(`Clock tick`);
+ clock.currentTime = 0.0;
+ clock.play();
+ }
+
+ timersPlaying = 0;
+ for (let t = 0; t < 6; t++) {
+ // if the timer is playing
+ let playing = false;
+ if (timers[t].currentTime > 0 && !timers[t].paused && !timers[t].ended) {
+ timersPlaying += 1;
+ playing = true;
+ }
+
+ let timeEnd = data[`end_timer_${t+1}`];
+ let current = Math.round((Date.now() + data['timer_offset']) / 1000);
+ let time = timeEnd - current;
+
+ if (timeEnd != pastTime[t]) {
+ pastTime[t] = timeEnd;
+
+ //console.log(`Timer ${t} changed (${time}s)`);
+
+ if (time > 0) {
+ if (context.state === "suspended") {
+ context.resume();
+ }
+
+ console.log(`Starting timer ${t}`);
+ timers[t].currentTime = timers[t].duration - time;
+ timers[t].volume = 1;
+ timers[t].play();
+
+ if (!playing) {
+ timers[t].volume = 0;
+ let fadeIn = setInterval(function () {
+ if (timers[t].volume < 1.0) {
+ if (timers[t].volume + 0.2 / fadeLength > 1) {timers[t].volume = 1.0;}
+ else {timers[t].volume += 0.2 / fadeLength;} // 0.2 related to interval time
+ } else {
+
+ clearInterval(fadeIn);
+ }
+ }, 200);
+ }
+ } else {
+ timers[t].pause();
+ }
+ }
+ }
+ });
+}
+
+function updateLeveler() {
+ let targetLevel = 0.5;
+ let targetWet = 0;
+ if (timersPlaying > 2) {
+ targetLevel = 1 / timersPlaying;
+ }
+ if (clock.currentTime > 0 && !clock.paused && !clock.ended) {
+ //targetLevel *= 0.75;
+ targetWet = 0.75;
+ }
+
+ if (Math.abs(targetLevel - amp.gain.value) < 0.1 / levelLength) {
+ amp.gain.value = targetLevel;
+ } else if (targetLevel > amp.gain.value) {
+ amp.gain.value += 0.1 / levelLength;
+ } else if (targetLevel < amp.gain.value) {
+ amp.gain.value -= 0.1 / levelLength;
+ }
+ //console.log(`${timersPlaying} Timers playing so target volume is ${targetLevel * 100}%. Current volume is ${amp.gain.value * 100}%.`);
+
+ if (Math.abs(targetWet - wetGain.gain.value) < 0.1 / effectLength) {
+ wetGain.gain.value = targetWet;
+ } else if (targetWet > wetGain.gain.value) {
+ wetGain.gain.value += 0.1 / effectLength;
+ } else if (targetWet < wetGain.gain.value) {
+ wetGain.gain.value -= 0.1 / effectLength;
+ }
+ dryGain.gain.value = 1 - wetGain.gain.value;
+ //console.log(`Target wet is ${targetWet * 100}%. Current wet is ${wetGain.gain.value * 100}%.`);
+}
+
+let repeat;
+let leveler;
+function start() {
+ document.getElementById("state").innerHTML = "Currently armed...";
+ document.getElementById("start").disabled = true;
+
+ clearInterval(repeat);
+ clearInterval(leveler);
+ repeat = setInterval(getTimes, 500);
+ leveler = setInterval(updateLeveler, 100);
+
+ fetch("./api", {cache: "no-store"})
+ .then(data => data.json())
+ .then(data => {pastClock = data["current_position"];})
+}
+
+ </script>
+ </body>
+</html>
projects / shopping-channel / commitdiff