You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
svelte/documentation/tutorial/17-module-context/02-module-exports/app-a/AudioPlayer.svelte

52 lines
831 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>
<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} />
</article>
<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>