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