mirror of https://github.com/sveltejs/svelte
parent
2359a9f595
commit
7a3e87c75e
@ -1,43 +0,0 @@
|
||||
<script>
|
||||
import AudioPlayer from './AudioPlayer.svelte';
|
||||
</script>
|
||||
|
||||
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
|
||||
<AudioPlayer
|
||||
src="tutorial/music/strauss.mp3"
|
||||
title="The Blue Danube Waltz"
|
||||
composer="Johann Strauss"
|
||||
performer="European Archive"
|
||||
/>
|
||||
|
||||
<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
|
||||
<AudioPlayer
|
||||
src="tutorial/music/holst.mp3"
|
||||
title="Mars, the Bringer of War"
|
||||
composer="Gustav Holst"
|
||||
performer="USAF Heritage of America Band"
|
||||
/>
|
||||
|
||||
<!-- https://musopen.org/music/8010-3-gymnopedies/ -->
|
||||
<AudioPlayer
|
||||
src="tutorial/music/satie.mp3"
|
||||
title="Gymnopédie no. 1"
|
||||
composer="Erik Satie"
|
||||
performer="Prodigal Procrastinator"
|
||||
/>
|
||||
|
||||
<!-- https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ -->
|
||||
<AudioPlayer
|
||||
src="tutorial/music/beethoven.mp3"
|
||||
title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
|
||||
composer="Ludwig van Beethoven"
|
||||
performer="European Archive"
|
||||
/>
|
||||
|
||||
<!-- https://musopen.org/music/43683-requiem-in-d-minor-k-626/ -->
|
||||
<AudioPlayer
|
||||
src="tutorial/music/mozart.mp3"
|
||||
title="Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
|
||||
composer="Wolfgang Amadeus Mozart"
|
||||
performer="Markus Staab"
|
||||
/>
|
@ -1,46 +0,0 @@
|
||||
<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>
|
@ -1,3 +0,0 @@
|
||||
{
|
||||
"title": "Sharing code"
|
||||
}
|
@ -1,3 +1,3 @@
|
||||
{
|
||||
"title": "Exports"
|
||||
"title": "Named exports"
|
||||
}
|
Loading…
Reference in new issue