Audio Player
A podcast episode, a narrated article, course lessons and sample previews. Every player on this page plays the same MP3 from the Media Library, each one set up differently in the Etch props panel.
Podcast episode page
Layout: Card · Theme: Light · Artwork and Download on · Remember Position with a Recording ID · System Media Controls on · Load Media: On Interaction
Lorem Sessions · Episode 14
Recording bass at home without a studio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus, posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla.
Pause halfway, reload the page and press Play: the episode continues where you stopped. This browser keeps the position for 30 days. While it plays, browsers that support it show the episode in the system media controls.
Listen to this article
Layout: Compact · Theme: Inherit · Load Media: When Visible · In a wide column the controls fit in one row
Blog · 6 min read
Five habits that make home recordings sound finished
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum.
Aenean lacinia bibendum nulla sed consectetur. Maecenas faucibus mollis interdum. Nulla vitae elit libero, a pharetra augue. Sed posuere consectetur est at lobortis.
Dark card with a loop
Layout: Card · Theme: Dark · Artwork on · Loop: On · Load Media: Eager, so the length shows right away
When the track ends, it starts again from the beginning.
Inherit on a dark section
Theme: Inherit · The player takes the light text of the section and switches its accent to Primary Light
Course lessons in a list
Three players · Load Media: On Interaction, so nothing downloads until Play · Auto Pause Other Players: On
Lorem Bass Academy · Module 1
Groove fundamentals
Start another lesson while one is playing: the first one pauses.
Sample previews in cards
Theme: Light · No visible title: Accessible Label names each player · Loop and Download on · In narrow cards the controls stack in three rows
Sample packs
Hear it before you download it
Polish controls
Language: Automatic · A parent element has lang="pl", so the tooltips, slider values and the download link switch to Polish
Najedź na przycisk albo przejdź do niego klawiszem Tab, aby zobaczyć polską podpowiedź.
Your brand colors
Theme: Dark · Styling variables on a parent class swap the surface and accent for the secondary color and give the buttons rounded-square corners
Ten variables on one wrapper; the component itself is unchanged.
End of the demo. Get the Audio Player component