Create new
Bindings
Transitions
Animations
Easing
Component composition
Context API
Special elements
Module context
Debugging
Miscellaneous
App.svelte
AudioPlayer.svelte
runes
This component is not in runes mode.
To enable runes mode, either start using runes in your code, or add the following to the top of your component:
<svelte:options runes />
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
<script>
import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
</script>
<button onclick={stopAll}> stop all audio </button>
<!-- https://musopen.org/music/9862-the-blue-danube-op-314/ -->
<AudioPlayer
src="https://sveltejs.github.io/assets/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="https://sveltejs.github.io/assets/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="https://sveltejs.github.io/assets/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="https://sveltejs.github.io/assets/music/beethoven.mp3"
title="Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
composer="Ludwig van Beethoven"
performer="European Archive"
Error compiling component
WebAssembly.instantiateStreaming(): value type opcode @+13
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
›
⌄
⌄
⌄
⌄
⌄
import 'svelte/internal/disclose-version';
import 'svelte/internal/flags/legacy';
import * as $ from 'svelte/internal/client';
import AudioPlayer, { stopAll } from './AudioPlayer.svelte';
var root = $.template(`<button>stop all audio</button> <!> <!> <!> <!> <!>`, 1);
export default function App($$anchor) {
var fragment = root();
var button = $.first_child(fragment);
button.__click = function (...$$args) {
stopAll?.apply(this, $$args);
};
var node = $.sibling(button, 2);
AudioPlayer(node, {
src: 'https://sveltejs.github.io/assets/music/strauss.mp3',
title: 'The Blue Danube Waltz',
composer: 'Johann Strauss',
performer: 'European Archive'
});
var node_1 = $.sibling(node, 2);
AudioPlayer(node_1, {
src: 'https://sveltejs.github.io/assets/music/holst.mp3',
title: 'Mars, the Bringer of War',
composer: 'Gustav Holst',
performer: 'USAF Heritage of America Band'
});
var node_2 = $.sibling(node_1, 2);
AudioPlayer(node_2, {
result = svelte.compile(source, {
generate: ,
});9
1
›
/* Add a <style> tag to see the CSS output */
Root {
- css: null
- js: []
- start: 82
- end: 1353
- type: "Root"
fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (22)
Text {...}
- type: "Text"
- start: 80
- end: 82
- raw: "\n\n"
- data: "\n\n"
} RegularElement {...}
- type: "RegularElement"
- start: 82
- end: 133
- name: "button"
attributes: [...] (1)
Attribute {...}
- type: "Attribute"
- start: 90
- end: 107
- name: "onclick"
value: ExpressionTag {...}
- type: "ExpressionTag"
- start: 98
- end: 107
expression: Identifier {...}
- type: "Identifier"
- start: 99
- end: 106
loc: {...}
start: {...}
- line: 5
- column: 17
}end: {...}
- line: 5
- column: 24
}
}- name: "stopAll"
}
}
}
]fragment: Fragment {...}
- type: "Fragment"
nodes: [...] (1)
Text {...}
- type: "Text"
- start: 108
- end: 124
- raw: "stop all audio"
- data: "stop all audio"
}
]
}
} Text {...}
- type: "Text"
- start: 133
- end: 135
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 135
- end: 198
- data: " https://musopen.org/music/9862-the-blue-danube-op-314/ "
} Text {...}
- type: "Text"
- start: 198
- end: 199
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 199
- end: 361
- name: "AudioPlayer"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 213
- end: 270
- name: "src"
value: [...] (1)
Text {...}
- start: 218
- end: 269
- type: "Text"
- raw: "https://sveltejs.github.io/assets/music/strauss.mp3"
- data: "https://sveltejs.github.io/assets/music/strauss.mp3"
}
]
} Attribute {...}
- type: "Attribute"
- start: 272
- end: 301
- name: "title"
value: [...] (1)
Text {...}
- start: 279
- end: 300
- type: "Text"
- raw: "The Blue Danube Waltz"
- data: "The Blue Danube Waltz"
}
]
} Attribute {...}
- type: "Attribute"
- start: 303
- end: 328
- name: "composer"
value: [...] (1)
Text {...}
- start: 313
- end: 327
- type: "Text"
- raw: "Johann Strauss"
- data: "Johann Strauss"
}
]
} Attribute {...}
- type: "Attribute"
- start: 330
- end: 358
- name: "performer"
value: [...] (1)
Text {...}
- start: 341
- end: 357
- type: "Text"
- raw: "European Archive"
- data: "European Archive"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 361
- end: 363
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 363
- end: 422
- data: " https://musopen.org/music/43775-the-planets-op-32/ "
} Text {...}
- type: "Text"
- start: 422
- end: 423
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 423
- end: 597
- name: "AudioPlayer"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 437
- end: 492
- name: "src"
value: [...] (1)
Text {...}
- start: 442
- end: 491
- type: "Text"
- raw: "https://sveltejs.github.io/assets/music/holst.mp3"
- data: "https://sveltejs.github.io/assets/music/holst.mp3"
}
]
} Attribute {...}
- type: "Attribute"
- start: 494
- end: 526
- name: "title"
value: [...] (1)
Text {...}
- start: 501
- end: 525
- type: "Text"
- raw: "Mars, the Bringer of War"
- data: "Mars, the Bringer of War"
}
]
} Attribute {...}
- type: "Attribute"
- start: 528
- end: 551
- name: "composer"
value: [...] (1)
Text {...}
- start: 538
- end: 550
- type: "Text"
- raw: "Gustav Holst"
- data: "Gustav Holst"
}
]
} Attribute {...}
- type: "Attribute"
- start: 553
- end: 594
- name: "performer"
value: [...] (1)
Text {...}
- start: 564
- end: 593
- type: "Text"
- raw: "USAF Heritage of America Band"
- data: "USAF Heritage of America Band"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 597
- end: 599
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 599
- end: 653
- data: " https://musopen.org/music/8010-3-gymnopedies/ "
} Text {...}
- type: "Text"
- start: 653
- end: 654
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 654
- end: 812
- name: "AudioPlayer"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 668
- end: 723
- name: "src"
value: [...] (1)
Text {...}
- start: 673
- end: 722
- type: "Text"
- raw: "https://sveltejs.github.io/assets/music/satie.mp3"
- data: "https://sveltejs.github.io/assets/music/satie.mp3"
}
]
} Attribute {...}
- type: "Attribute"
- start: 725
- end: 749
- name: "title"
value: [...] (1)
Text {...}
- start: 732
- end: 748
- type: "Text"
- raw: "Gymnopédie no. 1"
- data: "Gymnopédie no. 1"
}
]
} Attribute {...}
- type: "Attribute"
- start: 751
- end: 772
- name: "composer"
value: [...] (1)
Text {...}
- start: 761
- end: 771
- type: "Text"
- raw: "Erik Satie"
- data: "Erik Satie"
}
]
} Attribute {...}
- type: "Attribute"
- start: 774
- end: 809
- name: "performer"
value: [...] (1)
Text {...}
- start: 785
- end: 808
- type: "Text"
- raw: "Prodigal Procrastinator"
- data: "Prodigal Procrastinator"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 812
- end: 814
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 814
- end: 885
- data: " https://musopen.org/music/2567-symphony-no-5-in-c-minor-op-67/ "
} Text {...}
- type: "Text"
- start: 885
- end: 886
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 886
- end: 1085
- name: "AudioPlayer"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 900
- end: 959
- name: "src"
value: [...] (1)
Text {...}
- start: 905
- end: 958
- type: "Text"
- raw: "https://sveltejs.github.io/assets/music/beethoven.mp3"
- data: "https://sveltejs.github.io/assets/music/beethoven.mp3"
}
]
} Attribute {...}
- type: "Attribute"
- start: 961
- end: 1019
- name: "title"
value: [...] (1)
Text {...}
- start: 968
- end: 1018
- type: "Text"
- raw: "Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
- data: "Symphony no. 5 in Cm, Op. 67 - I. Allegro con brio"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1021
- end: 1052
- name: "composer"
value: [...] (1)
Text {...}
- start: 1031
- end: 1051
- type: "Text"
- raw: "Ludwig van Beethoven"
- data: "Ludwig van Beethoven"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1054
- end: 1082
- name: "performer"
value: [...] (1)
Text {...}
- start: 1065
- end: 1081
- type: "Text"
- raw: "European Archive"
- data: "European Archive"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
} Text {...}
- type: "Text"
- start: 1085
- end: 1087
- raw: " "
- data: " "
} Comment {...}
- type: "Comment"
- start: 1087
- end: 1153
- data: " https://musopen.org/music/43683-requiem-in-d-minor-k-626/ "
} Text {...}
- type: "Text"
- start: 1153
- end: 1154
- raw: ""
- data: ""
} Component {...}
- type: "Component"
- start: 1154
- end: 1353
- name: "AudioPlayer"
attributes: [...] (4)
Attribute {...}
- type: "Attribute"
- start: 1168
- end: 1224
- name: "src"
value: [...] (1)
Text {...}
- start: 1173
- end: 1223
- type: "Text"
- raw: "https://sveltejs.github.io/assets/music/mozart.mp3"
- data: "https://sveltejs.github.io/assets/music/mozart.mp3"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1226
- end: 1288
- name: "title"
value: [...] (1)
Text {...}
- start: 1233
- end: 1287
- type: "Text"
- raw: "Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
- data: "Requiem in D minor, K. 626 - III. Sequence - Lacrymosa"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1290
- end: 1324
- name: "composer"
value: [...] (1)
Text {...}
- start: 1300
- end: 1323
- type: "Text"
- raw: "Wolfgang Amadeus Mozart"
- data: "Wolfgang Amadeus Mozart"
}
]
} Attribute {...}
- type: "Attribute"
- start: 1326
- end: 1350
- name: "performer"
value: [...] (1)
Text {...}
- start: 1337
- end: 1349
- type: "Text"
- raw: "Markus Staab"
- data: "Markus Staab"
}
]
}
]fragment: Fragment {...}
- type: "Fragment"
- nodes: []
}
}
]
}- options: null
instance: Script {...}
- type: "Script"
- start: 0
- end: 80
- context: "default"
content: Program {...}
- type: "Program"
- start: 8
- end: 71
loc: {...}
start: {...}
- line: 1
- column: 0
}end: {...}
- line: 3
- column: 0
}
}body: [...] (1)
ImportDeclaration {...}
- type: "ImportDeclaration"
- start: 10
- end: 70
loc: {...}
start: {...}
- line: 2
- column: 1
}end: {...}
- line: 2
- column: 61
}
}specifiers: [...] (2)
ImportDefaultSpecifier {...}
- type: "ImportDefaultSpecifier"
- start: 17
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 19
}
}local: Identifier {...}
- type: "Identifier"
- start: 17
- end: 28
loc: {...}
start: {...}
- line: 2
- column: 8
}end: {...}
- line: 2
- column: 19
}
}- name: "AudioPlayer"
}
} ImportSpecifier {...}
- type: "ImportSpecifier"
- start: 32
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 30
}
}imported: Identifier {...}
- type: "Identifier"
- start: 32
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 30
}
}- name: "stopAll"
}local: Identifier {...}
- type: "Identifier"
- start: 32
- end: 39
loc: {...}
start: {...}
- line: 2
- column: 23
}end: {...}
- line: 2
- column: 30
}
}- name: "stopAll"
}
}
]source: Literal {...}
- type: "Literal"
- start: 47
- end: 69
loc: {...}
start: {...}
- line: 2
- column: 38
}end: {...}
- line: 2
- column: 60
}
}- value: "./AudioPlayer.svelte"
- raw: "'./AudioPlayer.svelte'"
}
}
]- sourceType: "module"
}- attributes: []
}
}
The AST is not public API and may change at any point in time