Skip to main content
Create new
Introduction
Reactivity
Props
Logic
Events
Bindings
Lifecycle
Stores
Motion
Transitions
Animations
Easing
SVG
Actions
Classes
Component composition
Context API
Special elements
Module context
Debugging
7GUIs
Miscellaneous
App.svelte
AudioPlayer.svelte
<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
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: ,
});
/* 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
Named exports • Playground • Svelte