69 lines
1.1 KiB
Svelte
69 lines
1.1 KiB
Svelte
<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;
|
|
|
|
let currentTime = 0;
|
|
let paused = true;
|
|
function play() {
|
|
currentTime = 0;
|
|
paused = false;
|
|
}
|
|
</script>
|
|
|
|
<button
|
|
class="speaker"
|
|
class:left
|
|
class:right
|
|
class:center
|
|
class:lfe
|
|
class:playing={!paused}
|
|
on:click={play}
|
|
>
|
|
{#if !lfe}
|
|
<i class="ti ti-volume"></i>
|
|
{:else}
|
|
<i class="ti ti-wave-sine"></i>
|
|
{/if}
|
|
<label><slot /></label>
|
|
<audio bind:currentTime bind:paused {src}></audio>
|
|
</button>
|
|
|
|
<style>
|
|
.speaker {
|
|
border: none;
|
|
background: transparent;
|
|
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
text-align: center;
|
|
|
|
& .ti {
|
|
font-size: 3em;
|
|
}
|
|
|
|
&.right .ti {
|
|
display: block;
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
&.center .ti {
|
|
display: block;
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.33;
|
|
}
|
|
|
|
&.playing {
|
|
opacity: 0.66;
|
|
}
|
|
}
|
|
</style>
|