Anything exported from a context="module"
script block becomes an export from the module itself. If we export a stopAll
function from AudioPlayer.svelte
...
<script context="module">
const elements = new Set();
export function stopAll() {
elements.forEach(element => {
element.pause();
});
}
</script>
...we can then import it from App.svelte
...
<script>
import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
</script>
...and use it in an event handler:
<button on:click={stopAll}>
stop all audio
</button>
You can't have a default export, because the component is the default export.
App.svelte
AudioPlayer.svelte
xxxxxxxxxx
48
1
<script>
2
import AudioPlayer from './AudioPlayer.svelte';
3
</script>
4
5
<button>
6
stop all audio
7
</button>
8
9
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
10
<AudioPlayer
11
src="https://sveltejs.github.io/assets/music/strauss.mp3"
12
title="The Blue Danube Waltz"
13
composer="Johann Strauss"
14
performer="European Archive"
15
/>
16
17
<!-- https://musopen.org/music/43775-the-planets-op-32/ -->
18
<AudioPlayer
19
src="https://sveltejs.github.io/assets/music/holst.mp3"
20
title="Mars, the Bringer of War"
Console
xxxxxxxxxx
149
1
/* App.svelte generated by Svelte v3.23.2 */
2
import {
3
SvelteComponent,
4
create_component,
5
destroy_component,
6
detach,
7
element,
8
init,
9
insert,
10
mount_component,
11
noop,
12
safe_not_equal,
13
space,
14
transition_in,
15
transition_out
16
} from "svelte/internal";
Compiler options
result = svelte.compile(source, {
generate:
});xxxxxxxxxx
1
1
/* Add a <style> tag to see compiled CSS */