mirror of https://github.com/sveltejs/svelte
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.
39 lines
593 B
39 lines
593 B
6 years ago
|
<script>
|
||
|
export let src;
|
||
|
export let title;
|
||
|
export let composer;
|
||
|
export let performer;
|
||
|
|
||
|
let audio;
|
||
|
let paused = true;
|
||
|
|
||
|
function stopOthers() {
|
||
|
// TODO: implement stopOthers
|
||
|
}
|
||
|
</script>
|
||
|
|
||
|
<article class:playing={!paused}>
|
||
|
<h2>{title}</h2>
|
||
|
<p><strong>{composer}</strong> / performed by {performer}</p>
|
||
|
|
||
1 year ago
|
<audio bind:this={audio} bind:paused on:play={stopOthers} controls {src} />
|
||
4 years ago
|
</article>
|
||
|
|
||
|
<style>
|
||
|
article {
|
||
1 year ago
|
margin: 0 0 1em 0;
|
||
|
max-width: 800px;
|
||
4 years ago
|
}
|
||
1 year ago
|
h2,
|
||
|
p {
|
||
4 years ago
|
margin: 0 0 0.3em 0;
|
||
|
}
|
||
|
audio {
|
||
1 year ago
|
width: 100%;
|
||
|
margin: 0.5em 0 1em 0;
|
||
4 years ago
|
}
|
||
|
.playing {
|
||
|
color: #ff3e00;
|
||
|
}
|
||
1 year ago
|
</style>
|