svelte-audio-ui
A set of accessible and composable Audio UI components.
File Explorer
Download Latest Version (.zip)- config.json
- README.md
- twelve-dryers-crash.md
- settings.json
- bug_report.md
- feature_request.md
- release.yml
- CODEOWNERS
- FUNDING.yml
- PULL_REQUEST_TEMPLATE.md
- components.json
- index.d.ts
- index.js
- libs.json
- overview.json
- ui.json
- playback-speed.md
- player.md
- provider.md
- queue.md
- track.md
- audio-store.md
- html-audio.md
- fader.md
- knob.md
- slider.md
- sortable-list.md
- xy-pad.md
- changelog.md
- get-started.md
- index.md
- registry-item.json
- registry.json
- build-registry.ts
- generate-registry.ts
- index.js
- command-menu-item.svelte
- command-menu.svelte
- component-code-viewer-code-title.svelte
- component-code-viewer-code.svelte
- component-code-viewer-copy-code-button.svelte
- component-code-viewer-file-tree.svelte
- component-code-viewer-tree.svelte
- component-code-viewer.svelte
- doc-tabs-content.svelte
- doc-tabs-list.svelte
- doc-tabs-trigger.svelte
- doc-tabs.svelte
- index.ts
- bash.svelte
- css.svelte
- icons.ts
- json.svelte
- mcp.svelte
- svelte.svelte
- ts.svelte
- a.svelte
- blockquote.svelte
- blueprint.svelte
- figcaption.svelte
- h1.svelte
- h2.svelte
- h3.svelte
- h4.svelte
- h5.svelte
- h6.svelte
- hr.svelte
- img.svelte
- index.ts
- li.svelte
- ol.svelte
- p.svelte
- pre.svelte
- strong.svelte
- table.svelte
- td.svelte
- th.svelte
- tr.svelte
- ul.svelte
- index.ts
- player-widget.svelte
- player.svelte
- pocket-synth.svelte
- wave-shaper.svelte
- plasma-grid-scene.svelte
- plasma-grid.svelte
- accordion-content.svelte
- accordion-item.svelte
- accordion-trigger.svelte
- accordion.svelte
- index.ts
- alert-description.svelte
- alert-title.svelte
- alert.svelte
- index.ts
- fader.svelte
- index.ts
- index.ts
- knob.svelte
- index.ts
- slider.svelte
- index.ts
- sortable-drag-handle.svelte
- sortable-item.svelte
- sortable-list.svelte
- index.ts
- wave.svelte
- index.ts
- waveform.svelte
- index.ts
- xypad.svelte
- fader-custom-thumb-marks-demo.svelte
- fader-demo.svelte
- fader-horizontal-demo.svelte
- fader-multiple-control-demo.svelte
- fader-no-thumb-marks-demo.svelte
- fader-volume-control-demo.svelte
- knob-demo.svelte
- knob-filter-control-demo.svelte
- knob-multiple-control-demo.svelte
- knob-size-variants-demo.svelte
- playback-speed-demo.svelte
- player-demo.svelte
- player-stacked-layout-demo.svelte
- player-with-queue-demo.svelte
- queue-all-controls-demo.svelte
- queue-preferences-demo.svelte
- queue-shuffle-repeat-demo.svelte
- queue-simple-demo.svelte
- slider-demo.svelte
- sortable-list-demo.svelte
- track-demo.svelte
- track-list-demo.svelte
- track-list-grid-demo.svelte
- track-sortable-list-demo.svelte
- track-sortable-list-grid-demo.svelte
- xypad-demo.svelte
- xypad-filter-control-demo.svelte
- xypad-format-value-demo.svelte
- xypad-hide-value-demo.svelte
- xypad-synthesizer-control-demo.svelte
- index.ts
- playback-speed.svelte
- audio-player-control-bar.svelte
- audio-player-control-group.svelte
- audio-player-fast-forward.svelte
- audio-player-play.svelte
- audio-player-rewind.svelte
- audio-player-seek-bar.svelte
- audio-player-skip-back.svelte
- audio-player-skip-forward.svelte
- audio-player-time-display.svelte
- audio-player-volume.svelte
- audio-player.svelte
- audio-seek-slider.svelte
- index.ts
- audio-provider.svelte
- index.ts
- audio-queue-preferences.svelte
- audio-queue-repeat-mode.svelte
- audio-queue-shuffle.svelte
- audio-queue.svelte
- index.ts
- audio-track-list.svelte
- audio-track.svelte
- index.ts
- badge.svelte
- index.ts
- button.svelte
- index.ts
- button-group-separator.svelte
- button-group-text.svelte
- button-group.svelte
- index.ts
- collapsible-content.svelte
- collapsible-trigger.svelte
- collapsible.svelte
- index.ts
- command-dialog.svelte
- command-empty.svelte
- command-group.svelte
- command-input.svelte
- command-item.svelte
- command-link-item.svelte
- command-list.svelte
- command-loading.svelte
- command-separator.svelte
- command-shortcut.svelte
- command.svelte
- index.ts
- dialog-close.svelte
- dialog-content.svelte
- dialog-description.svelte
- dialog-footer.svelte
- dialog-header.svelte
- dialog-overlay.svelte
- dialog-portal.svelte
- dialog-title.svelte
- dialog-trigger.svelte
- dialog.svelte
- index.ts
- dropdown-menu-checkbox-group.svelte
- dropdown-menu-checkbox-item.svelte
- dropdown-menu-content.svelte
- dropdown-menu-group-heading.svelte
- dropdown-menu-group.svelte
- dropdown-menu-item.svelte
- dropdown-menu-label.svelte
- dropdown-menu-portal.svelte
- dropdown-menu-radio-group.svelte
- dropdown-menu-radio-item.svelte
- dropdown-menu-separator.svelte
- dropdown-menu-shortcut.svelte
- dropdown-menu-sub-content.svelte
- dropdown-menu-sub-trigger.svelte
- dropdown-menu-sub.svelte
- dropdown-menu-trigger.svelte
- dropdown-menu.svelte
- index.ts
- index.ts
- input.svelte
- index.ts
- kbd-group.svelte
- kbd.svelte
- index.ts
- popover-close.svelte
- popover-content.svelte
- popover-portal.svelte
- popover-trigger.svelte
- popover.svelte
- index.ts
- resizable-handle.svelte
- resizable-pane-group.svelte
- index.ts
- select-content.svelte
- select-group-heading.svelte
- select-group.svelte
- select-item.svelte
- select-label.svelte
- select-portal.svelte
- select-scroll-down-button.svelte
- select-scroll-up-button.svelte
- select-separator.svelte
- select-trigger.svelte
- select.svelte
- index.ts
- separator.svelte
- index.ts
- sheet-close.svelte
- sheet-content.svelte
- sheet-description.svelte
- sheet-footer.svelte
- sheet-header.svelte
- sheet-overlay.svelte
- sheet-portal.svelte
- sheet-title.svelte
- sheet-trigger.svelte
- sheet.svelte
- constants.ts
- context.svelte.ts
- index.ts
- sidebar-content.svelte
- sidebar-footer.svelte
- sidebar-group-action.svelte
- sidebar-group-content.svelte
- sidebar-group-label.svelte
- sidebar-group.svelte
- sidebar-header.svelte
- sidebar-input.svelte
- sidebar-inset.svelte
- sidebar-menu-action.svelte
- sidebar-menu-badge.svelte
- sidebar-menu-button.svelte
- sidebar-menu-item.svelte
- sidebar-menu-skeleton.svelte
- sidebar-menu-sub-button.svelte
- sidebar-menu-sub-item.svelte
- sidebar-menu-sub.svelte
- sidebar-menu.svelte
- sidebar-provider.svelte
- sidebar-rail.svelte
- sidebar-separator.svelte
- sidebar-trigger.svelte
- sidebar.svelte
- index.ts
- skeleton.svelte
- index.ts
- slider.svelte
- index.ts
- sonner.svelte
- index.ts
- tabs-content.svelte
- tabs-list.svelte
- tabs-trigger.svelte
- tabs.svelte
- index.ts
- toggle.svelte
- index.ts
- toggle-group-item.svelte
- toggle-group.svelte
- index.ts
- tooltip-content.svelte
- tooltip-portal.svelte
- tooltip-provider.svelte
- tooltip-trigger.svelte
- tooltip.svelte
- app-sidebar.svelte
- callout.svelte
- code-tabs.svelte
- component-preview-tabs.svelte
- component-preview.svelte
- component-source.svelte
- copy-button.svelte
- copy-registry.svelte
- cta-mobile.svelte
- cta.svelte
- docs-copy-page.svelte
- docs-toc.svelte
- ethical.svelte
- github-link.svelte
- github.svelte
- install-cards.svelte
- install-tabs.svelte
- layout-toggle.svelte
- linked-card.svelte
- logo.svelte
- main-nav.svelte
- metadata.svelte
- mobile-nav.svelte
- mode-toggle.svelte
- pm-add-comp.svelte
- pm-block.svelte
- pm-create.svelte
- pm-execute.svelte
- pm-install.svelte
- pm-remove.svelte
- pm-run.svelte
- pm-upgrade.svelte
- search.svelte
- site-footer.svelte
- site-header.svelte
- source.svelte
- step.svelte
- steps.svelte
- svelte-white.svelte
- sidebar-component-data.generated.ts
- is-mobile.svelte.ts
- use-clipboard.svelte.ts
- use-mutation-observer.svelte.ts
- app.css
- utilities.css
- audio-store.svelte.ts
- config.ts
- docs.ts
- html-audio.ts
- index.ts
- navigation.ts
- package-manager.ts
- registry-utils.ts
- shiki.ts
- user-config.svelte.ts
- utils.ts
- +page.svelte
- +page.ts
- +layout.svelte
- +layout.ts
- +page.svelte
- particle-display.svelte
- +page.svelte
- +layout.svelte
- +server.ts
- +server.ts
- +server.ts
- +error.svelte
- +layout.server.ts
- +layout.svelte
- +layout.ts
- +page.svelte
- prettier-plugin-svelte-browser.d.ts
- app.d.ts
- app.html
- hooks.server.ts
- geist-mono.woff2
- geist.woff2
- LICENSE.TXT
- inter.woff2
- LICENSE.txt
- audio-store.json
- fader-custom-thumb-marks-demo.json
- fader-demo.json
- fader-horizontal-demo.json
- fader-multiple-control-demo.json
- fader-no-thumb-marks-demo.json
- fader-volume-control-demo.json
- fader.json
- html-audio.json
- index.json
- knob-demo.json
- knob-filter-control-demo.json
- knob-multiple-control-demo.json
- knob-size-variants-demo.json
- knob.json
- particle-player-widget.json
- particle-player.json
- particle-pocket-synth.json
- particle-wave-shaper.json
- playback-speed-demo.json
- playback-speed.json
- player-demo.json
- player-stacked-layout-demo.json
- player-with-queue-demo.json
- player.json
- provider.json
- queue-all-controls-demo.json
- queue-preferences-demo.json
- queue-shuffle-repeat-demo.json
- queue-simple-demo.json
- queue.json
- slider-demo.json
- slider.json
- sortable-list-demo.json
- sortable-list.json
- track-demo.json
- track-list-demo.json
- track-list-grid-demo.json
- track-sortable-list-demo.json
- track-sortable-list-grid-demo.json
- track.json
- wave.json
- waveform.json
- xypad-demo.json
- xypad-filter-control-demo.json
- xypad-format-value-demo.json
- xypad-hide-value-demo.json
- xypad-synthesizer-control-demo.json
- xypad.json
- android-chrome-192x192.png
- android-chrome-512x512.png
- apple-touch-icon.png
- favicon-16x16.png
- favicon-32x32.png
- favicon.ico
- ogImage.png
- robots.txt
- site.webmanifest
- .gitattributes
- .gitignore
- .npmrc
- .prettierignore
- .prettierrc
- bun.lock
- CODE_OF_CONDUCT.md
- components.json
- CONTRIBUTING.md
- eslint.config.js
- GEMINI.md
- LICENSE
- mdsx.config.js
- package-lock.json
- package.json
- README.md
- SECURITY.md
- svelte.config.js
- tsconfig.json
- velite.config.js
- vite.config.ts
# Installation Guide
1. Get the code
git clone https://github.com/ddtamn/svelte-audio-ui
Downloads the entire project code from GitHub to your computer.
cd svelte-audio-ui
Moves into the project folder you just downloaded.
2. Node.js
Easy RecommendedPrerequisites
npm install
Downloads and installs the libraries listed in package.json.
npm start
Starts the development/run server.
After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.
// repository documentation
Was this content helpful?
(0 ratings)
