style: stereo channel test on main audio page
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful

This commit is contained in:
Tomáš Mládek 2024-02-27 18:27:58 +01:00
parent 40270c7f32
commit a75d3b0175
7 changed files with 143 additions and 59 deletions

View file

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

View file

@ -1,45 +1,14 @@
<script lang="ts">
import { onDestroy } from 'svelte';
import CycleButton from './cycle-button.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>
<CycleButton element={channelsEl} />
</div>
<style>

View file

@ -1,14 +0,0 @@
<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>

View file

@ -0,0 +1,53 @@
<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>

View file

@ -4,6 +4,7 @@
export let center = false;
export let right = false;
export let lfe = false;
export let inline = false;
let currentTime = 0;
let paused = true;
@ -19,6 +20,7 @@
class:right
class:center
class:lfe
class:inline
class:playing={!paused}
on:click={play}
>
@ -27,7 +29,7 @@
{:else}
<i class="ti ti-wave-sine"></i>
{/if}
<label><slot /></label>
<span><slot /></span>
<audio bind:currentTime bind:paused {src}></audio>
</button>
@ -68,5 +70,28 @@
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>

View file

@ -0,0 +1,34 @@
<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>

View file

@ -1,20 +1,37 @@
<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 href="channels-stereo">Stereo</a></li>
<li><a href="channels-5.1">5.1 Surround</a></li>
<li><a href="channels-7.1">7.1 Surround</a></li>
<li><a class="button" href="channels-5.1">5.1 Surround</a></li>
<li><a class="button" 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: flex;
gap: 1rem;
display: inline-flex;
gap: 1em;
}
li {
margin-bottom: 10px;
section {
margin: 1em 0;
}
</style>