src/index.css

@@ -21,7 +21,7 @@ a {
 }
 
 
-h1, h2, h3, h4 {
+h1, h2, h3 {
   margin-top: 0;
 }
 

src/routes/+layout.svelte

@@ -20,11 +20,11 @@
 		});
 	});
 
-	$: onlyCard = $page.data.card;
+	$: onlyCard = $page.url.pathname === '/card';
 </script>
 
 <TestCard full={onlyCard} on:focus={() => goto('/card')} />
-<main class:content={!onlyCard} class:sub={!$page.data.root && !onlyCard}>
+<main class:content={!onlyCard} class:sub={$page.url.pathname !== '/' && !onlyCard}>
 	<a href=".." class="button button-back"><i class="ti ti-arrow-back" />Back</a>
 	<slot />
 </main>

src/routes/+page.ts

@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = () => {
-	return {
-		root: true
-	}
-}

src/routes/audio/(channels)/+layout.svelte

@@ -1,51 +0,0 @@
-<script lang="ts">
-	import CycleButton from './cycle-button.svelte';
-
-	let channelsEl: HTMLDivElement;
-</script>
-
-<div class="channels" bind:this={channelsEl}>
-	<slot />
-</div>
-<div class="controls">
-	<CycleButton element={channelsEl} />
-</div>
-
-<style>
-	.channels {
-		display: flex;
-		flex-direction: column;
-		justify-content: space-evenly;
-		font-size: 2rem;
-		flex-grow: 1;
-
-		position: relative;
-	}
-
-	:global(.channels .row) {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.controls {
-		text-align: center;
-		margin: 2rem 0;
-		font-size: 1.5rem;
-	}
-
-	:global(.channels .center) {
-		font-size: 0.9em;
-	}
-
-	:global(.channels .label) {
-		opacity: 0.2;
-		font-size: 6rem;
-
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-
-		pointer-events: none;
-	}
-</style>

src/routes/audio/(channels)/cycle-button.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import { onDestroy } from 'svelte';
-
-	export let element: HTMLElement;
-
-	let cycling = false;
-	let currentChannel: HTMLAudioElement | undefined;
-	async function cycleChannels() {
-		cycling = true;
-		const buttons = element.querySelectorAll('button');
-		buttons.forEach((button) => (button.disabled = true));
-		const channels = element.querySelectorAll('audio');
-		while (cycling) {
-			for (const channel of channels) {
-				currentChannel = channel;
-				await channel.play();
-				await new Promise((resolve) => {
-					channel.onended = resolve;
-				});
-				if (!cycling) {
-					break;
-				}
-			}
-		}
-		buttons.forEach((button) => (button.disabled = false));
-	}
-
-	function onClick() {
-		cycling = !cycling;
-		if (cycling) {
-			cycleChannels();
-		} else {
-			if (currentChannel) {
-				currentChannel.pause();
-				currentChannel.currentTime = 0;
-			}
-		}
-	}
-
-	onDestroy(() => {
-		cycling = false;
-		currentChannel?.pause();
-	});
-</script>
-
-<button on:click={onClick}>
-	<i class="ti ti-refresh"></i>
-	{#if cycling}
-		Stop Cycling
-	{:else}
-		Cycle through
-	{/if}
-</button>

src/routes/audio/(channels)/stereo-test.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-	import leftUrl from '@assets/audio/stereo/Left.mp3';
-	import centerUrl from '@assets/audio/stereo/Center.mp3';
-	import rightUrl from '@assets/audio/stereo/Right.mp3';
-	import Speaker from './speaker.svelte';
-	import CycleButton from './cycle-button.svelte';
-
-	let speakersEl: HTMLElement;
-</script>
-
-<div class="test">
-	<div class="speakers" bind:this={speakersEl}>
-		<Speaker src={leftUrl} left inline>Left</Speaker>
-		<Speaker src={centerUrl} center inline>Center</Speaker>
-		<Speaker src={rightUrl} right inline>Right</Speaker>
-	</div>
-	<CycleButton element={speakersEl} />
-</div>
-
-<style>
-	.test {
-		display: flex;
-		gap: 1em;
-		align-items: center;
-		margin: 0.5em 0;
-	}
-
-	.speakers {
-		display: flex;
-		gap: 1em;
-		font-size: 1.25em;
-		margin-right: 1em;
-	}
-</style>

src/routes/audio/+page.svelte

@@ -1,37 +1,20 @@
-<script lang="ts">
-	import StereoTest from './(channels)/stereo-test.svelte';
-</script>
-
-<article>
 <h3>Channel tests</h3>
-	<h4>Stereo</h4>
-	<section>
-		<StereoTest />
-	</section>
-	<h4>Surround audio</h4>
-	<section>
 <ul>
-			<li><a class="button" href="channels-5.1">5.1 Surround</a></li>
+	<li><a href="channels/stereo">Stereo</a></li>
-			<li><a class="button" href="channels-7.1">7.1 Surround</a></li>
+	<li><a href="channels/5.1">5.1 Surround</a></li>
+	<li><a href="channels/7.1">7.1 Surround</a></li>
 </ul>
-	</section>
-</article>
 
 <style>
-	h4 {
-		margin-bottom: 0;
-	}
-
 	ul {
 		list-style-type: none;
 		padding: 0;
 		margin: 0;
 
-		display: inline-flex;
+		display: flex;
-		gap: 1em;
+		gap: 1rem;
 	}
-
+	li {
-	section {
+		margin-bottom: 10px;
-		margin: 1em 0;
 	}
 </style>

src/routes/audio/channels/+layout.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import { onDestroy } from 'svelte';
+
+	let channelsEl: HTMLDivElement;
+
+	let cycling = false;
+	async function cycleChannels() {
+		cycling = true;
+		const buttons = channelsEl.querySelectorAll('button');
+		buttons.forEach((button) => (button.disabled = true));
+		const channels = channelsEl.querySelectorAll('audio');
+		while (cycling) {
+			for (const channel of channels) {
+				await channel.play();
+				await new Promise((resolve) => {
+					channel.onended = resolve;
+				});
+				if (!cycling) {
+					break;
+				}
+			}
+		}
+		buttons.forEach((button) => (button.disabled = false));
+	}
+
+	function startCycle() {
+		cycling = !cycling;
+		if (cycling) {
+			cycleChannels();
+		}
+	}
+
+	onDestroy(() => {
+		cycling = false;
+	});
+</script>
+
+<div class="channels" bind:this={channelsEl}>
+	<slot />
+</div>
+<div class="controls">
+	<button on:click={startCycle}>Cycle all</button>
+</div>
+
+<style>
+	.channels {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-evenly;
+		font-size: 2rem;
+		flex-grow: 1;
+
+		position: relative;
+	}
+
+	:global(.channels .row) {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.controls {
+		text-align: center;
+		margin: 2rem 0;
+		font-size: 1.5rem;
+	}
+
+	:global(.channels .center) {
+		font-size: 0.9em;
+	}
+
+	:global(.channels .label) {
+		opacity: 0.2;
+		font-size: 6rem;
+
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+
+		pointer-events: none;
+	}
+</style>

src/routes/audio/channels/+page.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	onMount(() => {
+		goto('..');
+	});
+</script>

src/routes/audio/channels/speaker.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
+	import { createEventDispatcher, onMount } from 'svelte';
+	const dispatch = createEventDispatcher<{ end: void }>();
+
 	export let src: string;
 	export let left = false;
 	export let center = false;
 	export let right = false;
 	export let lfe = false;
-	export let inline = false;
 
 	let currentTime = 0;
 	let paused = true;
@@ -20,7 +22,6 @@
 	class:right
 	class:center
 	class:lfe
-	class:inline
 	class:playing={!paused}
 	on:click={play}
 >
@@ -29,7 +30,7 @@
 	{:else}
 		<i class="ti ti-wave-sine"></i>
 	{/if}
-	<span><slot /></span>
+	<label><slot /></label>
 	<audio bind:currentTime bind:paused {src}></audio>
 </button>
 
@@ -42,8 +43,6 @@
 		flex-direction: column;
 		text-align: center;
 
-		opacity: 0.8;
-
 		& .ti {
 			font-size: 3em;
 		}
@@ -59,39 +58,11 @@
 		}
 
 		&:disabled {
-			opacity: 0.5;
+			opacity: 0.33;
 		}
 
 		&.playing {
-			transform: scale(1.1);
+			opacity: 0.66;
-			opacity: 1;
-		}
-
-		transition:
-			transform 0.2s ease,
-			opacity 0.2s ease;
-
-		&.inline {
-			flex-direction: row;
-			align-items: center;
-			justify-content: center;
-			background: black;
-			border: 1px solid white;
-
-			opacity: 1;
-
-			& .ti {
-				font-size: 1.5em;
-			}
-
-			&.playing {
-				transform: scale(1);
-				opacity: 0.8;
-			}
-		}
-
-		&:active {
-			transform: scale(1);
 		}
 	}
 </style>

src/routes/audio/channels/stereo/+page.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	import Speaker from '../speaker.svelte';
+	import leftUrl from '@assets/audio/stereo/Left.mp3';
+	import centerUrl from '@assets/audio/stereo/Center.mp3';
+	import rightUrl from '@assets/audio/stereo/Right.mp3';
+</script>
+
+<div class="row">
+	<Speaker src={leftUrl} left>Left</Speaker>
+	<div class="center">
+		<Speaker src={centerUrl} center>Center</Speaker>
+	</div>
+	<Speaker src={rightUrl} right>Right</Speaker>
+</div>

src/routes/card/+page.ts

@@ -1,7 +0,0 @@
-import type { PageLoad } from './$types';
-
-export const load: PageLoad = () => {
-	return {
-		card: true
-	};
-};