mirror of https://github.com/sveltejs/svelte
46 lines
828 B
46 lines
828 B
<script context="module">
|
|
const elements = new Set();
|
|
</script>
|
|
|
|
<script>
|
|
import { onMount } from 'svelte';
|
|
|
|
export let src;
|
|
export let title;
|
|
export let composer;
|
|
export let performer;
|
|
|
|
let audio;
|
|
let paused = true;
|
|
|
|
onMount(() => {
|
|
elements.add(audio);
|
|
return () => elements.delete(audio);
|
|
});
|
|
|
|
function stopOthers() {
|
|
elements.forEach(element => {
|
|
if (element !== audio) element.pause();
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
article { margin: 0 0 1em 0; max-width: 800px }
|
|
h2, p { margin: 0 0 0.3em 0; }
|
|
audio { width: 100%; margin: 0.5em 0 1em 0; }
|
|
.playing { color: #ff3e00; }
|
|
</style>
|
|
|
|
<article class:playing={!paused}>
|
|
<h2>{title}</h2>
|
|
<p><strong>{composer}</strong> / performed by {performer}</p>
|
|
|
|
<audio
|
|
bind:this={audio}
|
|
bind:paused
|
|
on:play={stopOthers}
|
|
controls
|
|
{src}
|
|
></audio>
|
|
</article> |