[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"examples-content:\u002Fexamples\u002Fcomponents\u002Faudio-player":3,"content-store-meta":-1},{"canonical_path":4,"template":5,"family":6,"indexable":7,"totals":8,"category":11,"seo":15,"breadcrumbs":19,"content":28,"examples":37,"showcases":331,"links":332,"dates":381},"\u002Fexamples\u002Fcomponents\u002Faudio-player","collection","components",true,{"example_count":9,"app_count":10},29,17,{"id":12,"title":13,"description":14},170,"Audio player","Explore controls for listening to audio within an interface. Look at how playback actions, track information, and progress are arranged within the player component.",{"title":16,"description":17,"og_image":18},"Audio player UI examples - Nicelydone","Audio player UI design examples from SaaS apps. Explore controls for listening to audio within an interface. Look at how playback actions, track…","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F2d3069aa-5d77-40c3-be7b-a6eedc6802f2.png",[20,23,26],{"label":21,"to":22},"Examples","\u002Fexamples",{"label":24,"to":25},"SaaS UI component examples","\u002Fexamples\u002Fcomponents",{"label":27,"to":4},"Audio player UI examples",{"title":27,"eyebrow":29,"description":30,"sections":31,"body":35},"UI component category","Audio player UI design examples from SaaS apps. Explore controls for listening to audio within an interface. Look at how playback actions, track information, and progress are arranged within the player…",[32],{"title":33,"description":14,"links":34},"About Audio player",[],[36],"29 UI components",[38,64,85,111,146,169,191,209,232,252,281,300],{"uuid":39,"title":40,"description":41,"canonical_path":42,"image":18,"width":43,"height":44,"image_alt":45,"kind":46,"categories":47,"app":50},"cf76d889-f86d-46bd-89ab-a075b1ab9704","Elevenlabs UI component","A media player interface with playback controls and a progress bar.","\u002Fexamples\u002Fapps\u002Felevenlabs\u002Fcomponents",1485,221,"UI component from Elevenlabs","component",[48],{"id":12,"title":13,"slug":49},"audio-player",{"slug":51,"title":52,"logo":53,"baseline":54,"categories":55},"elevenlabs","Elevenlabs","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F040a4c11-6cc6-49d0-85e4-c7f5a0265a3a.png","Bringing technology to life",[56,60],{"id":57,"title":58,"slug":59},80,"Artificial Intelligence","artificial-intelligence",{"id":61,"title":62,"slug":63},37,"Developer APIs","developer-apis",{"uuid":65,"title":66,"description":67,"canonical_path":68,"image":69,"width":70,"height":71,"image_alt":72,"kind":46,"categories":73,"app":75},"134c1612-2fa6-4658-9198-9fb85bdf8e7b","Pocket Casts UI component","An audio player interface displaying podcast information and playback controls.","\u002Fexamples\u002Fapps\u002Fpocket-casts\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F3cc58dc2-ebe6-4d95-9743-b24d9640c907.png",3023,267,"UI component from Pocket Casts",[74],{"id":12,"title":13,"slug":49},{"slug":76,"title":77,"logo":78,"baseline":79,"categories":80},"pocket-casts","Pocket Casts","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Ff4d1fda4-3822-47c0-a321-da4fe83db7b8.png","Listen to podcasts with the best free podcasting app",[81],{"id":82,"title":83,"slug":84},15,"Media and Entertainment","media-and-entertainment",{"uuid":86,"title":87,"description":88,"canonical_path":89,"image":90,"width":91,"height":92,"image_alt":93,"kind":46,"categories":94,"app":96},"8b882bf3-a4aa-456e-89a1-949098c54359","Fyxer UI component","A modal window displaying an active audio recording interface with a waveform visualization and a stop button.","\u002Fexamples\u002Fapps\u002Ffyxer\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F522d348c-6310-4842-94ee-f18a6d13d8ed.png",1828,746,"UI component from Fyxer",[95],{"id":12,"title":13,"slug":49},{"slug":97,"title":98,"logo":99,"baseline":100,"categories":101},"fyxer","Fyxer","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F6c4767fa-eedd-41af-a293-2f6900ffa570.png","AI that writes your email replies",[102,103,107],{"id":57,"title":58,"slug":59},{"id":104,"title":105,"slug":106},92,"Email","email",{"id":108,"title":109,"slug":110},30,"Productivity","productivity",{"uuid":112,"title":113,"description":114,"canonical_path":115,"image":116,"width":117,"height":118,"image_alt":119,"kind":46,"categories":120,"app":122},"f3335d09-8223-44cb-af40-9fe0224eda1a","Livekit UI component","A call interface with controls for audio, video, screen sharing, chat, and ending the call, along with a status message.","\u002Fexamples\u002Fapps\u002Flivekit\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F12b2b1ba-3e34-41e9-b0e3-76c7299a91d7.png",1610,460,"UI component from Livekit",[121],{"id":12,"title":13,"slug":49},{"slug":123,"title":124,"logo":125,"baseline":126,"categories":127},"livekit","Livekit","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fe61f12ad-e18b-4b1e-91fb-39d0e1ce98ce.png","Build voice, video, and physical AI",[128,129,130,134,138,142],{"id":57,"title":58,"slug":59},{"id":61,"title":62,"slug":63},{"id":131,"title":132,"slug":133},45,"Open Source","open-source",{"id":135,"title":136,"slug":137},48,"Developer Tools","developer-tools",{"id":139,"title":140,"slug":141},70,"Video streaming","video-streaming",{"id":143,"title":144,"slug":145},100,"Video","video",{"uuid":147,"title":148,"description":149,"canonical_path":150,"image":151,"width":152,"height":153,"image_alt":154,"kind":46,"categories":155,"app":157},"e2a9593a-faee-492f-9d79-d814abc34ba5","Cofounder UI component","A media player interface with a seek bar and playback controls.","\u002Fexamples\u002Fapps\u002Fcofounder\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F66557648-0732-482d-ba02-eadd38fdf1f1.png",1500,299,"UI component from Cofounder",[156],{"id":12,"title":13,"slug":49},{"slug":158,"title":159,"logo":160,"baseline":161,"categories":162},"cofounder","Cofounder","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002F4cc93e65-72a6-45c1-b609-72d100b8934a.png","Automate your life with natural language",[163,164,165],{"id":57,"title":58,"slug":59},{"id":108,"title":109,"slug":110},{"id":166,"title":167,"slug":168},105,"Workflow Automation","workflow-automation",{"uuid":170,"title":171,"description":172,"canonical_path":173,"image":174,"width":175,"height":176,"image_alt":177,"kind":46,"categories":178,"app":180},"4408bd0f-40d0-439b-beeb-af1eef158b1d","Delphi UI component","Audio player interface.","\u002Fexamples\u002Fapps\u002Fdelphi\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F4600f54a-8725-4e89-a91b-72382b411cb0.png",1692,650,"UI component from Delphi",[179],{"id":12,"title":13,"slug":49},{"slug":181,"title":182,"logo":183,"baseline":184,"categories":185},"delphi","Delphi","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdelphi-4341n6b6.png","Your Mind. Now on Demand",[186,187],{"id":57,"title":58,"slug":59},{"id":188,"title":189,"slug":190},22,"Knowledge Management","knowledge-management",{"uuid":192,"title":193,"description":194,"canonical_path":195,"image":196,"width":197,"height":198,"image_alt":199,"kind":46,"categories":200,"app":202},"474d6f19-e762-4daf-b6a4-54b4f3bab9ff","Copilot UI component","A music player interface with playback controls.","\u002Fexamples\u002Fapps\u002Fcopilot\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002Fc46bc8f2-f6df-4f3b-bd70-c54b2e426eb7.png",831,253,"UI component from Copilot",[201],{"id":12,"title":13,"slug":49},{"slug":203,"title":204,"logo":205,"baseline":206,"categories":207},"copilot","Copilot","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fcopilot-rnbvo0y1.png","Your AI companion",[208],{"id":57,"title":58,"slug":59},{"uuid":210,"title":211,"description":212,"canonical_path":213,"image":214,"width":215,"height":216,"image_alt":217,"kind":46,"categories":218,"app":220},"82bfefef-8bb8-483d-bbea-85e9db2e777e","Reflect UI component","The screenshot shows a search bar, a shortcut and a recording interface.","\u002Fexamples\u002Fapps\u002Freflect\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F5008ff27-331f-4df7-a513-258befa90270.png",1969,234,"UI component from Reflect",[219],{"id":12,"title":13,"slug":49},{"slug":221,"title":222,"logo":223,"baseline":224,"categories":225},"reflect","Reflect","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Freflect-98047e97.png","Keep track of your notes, books, and meetings.",[226,227,228],{"id":108,"title":109,"slug":110},{"id":188,"title":189,"slug":190},{"id":229,"title":230,"slug":231},59,"Writing tools","writing-tools",{"uuid":233,"title":234,"description":235,"canonical_path":236,"image":237,"width":238,"height":239,"image_alt":240,"kind":46,"categories":241,"app":243},"be05f823-b900-44fe-8fd8-18974b30a859","Audio Player Controls","A horizontal audio player interface featuring a progress bar, playback controls (rewind, play, fast forward), playback speed indicator, and utility icons for highlighting, commenting, and adding images.","\u002Fexamples\u002Fapps\u002Fotter\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F932fd324-ef32-4c6f-a45c-a98d8a7b33fe.png",1537,220,"Audio Player Controls from Otter",[242],{"id":12,"title":13,"slug":49},{"slug":244,"title":245,"logo":246,"baseline":247,"categories":248},"otter","Otter","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fotter-995b0fae.png","Voice meeting notes",[249,250,251],{"id":57,"title":58,"slug":59},{"id":188,"title":189,"slug":190},{"id":108,"title":109,"slug":110},{"uuid":253,"title":254,"description":255,"canonical_path":256,"image":257,"width":258,"height":259,"image_alt":260,"kind":46,"categories":261,"app":263},"65ef35b2-5c46-4cbf-a980-b6bdeaaca113","Slack UI component","Audio player with reactions","\u002Fexamples\u002Fapps\u002Fslack\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F56507d21-b39e-410e-aa98-f7f80423cd6c.png",1110,535,"UI component from Slack",[262],{"id":12,"title":13,"slug":49},{"slug":264,"title":265,"logo":266,"baseline":267,"categories":268},"slack","Slack","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fslack-fd2f6962.png","Be less busy",[269,273,277],{"id":270,"title":271,"slug":272},23,"Collaboration","collaboration",{"id":274,"title":275,"slug":276},42,"Messaging","messaging",{"id":278,"title":279,"slug":280},82,"Communication","communication",{"uuid":282,"title":283,"description":284,"canonical_path":285,"image":286,"width":287,"height":288,"image_alt":289,"kind":46,"categories":290,"app":292},"3fa38889-c01e-43bd-9dee-8989614c775c","Descript UI component","A modal for audio recording and file selection.","\u002Fexamples\u002Fapps\u002Fdescript\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F67541045-f0c0-413d-aac2-109b9283a209.png",824,382,"UI component from Descript",[291],{"id":12,"title":13,"slug":49},{"slug":293,"title":294,"logo":295,"baseline":296,"categories":297},"descript","Descript","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Fdescript-c27a2fb9.png","Edit videos & podcasts like a doc",[298,299],{"id":143,"title":144,"slug":145},{"id":57,"title":58,"slug":59},{"uuid":301,"title":302,"description":303,"canonical_path":304,"image":305,"width":306,"height":307,"image_alt":308,"kind":46,"categories":309,"app":311},"7dd71e6a-6894-40fc-8020-5b971a2b38fb","AI Voiceover Configuration Popover","A popover allowing users to configure an AI voiceover. It includes a text area for the script, a selection of avatar voices, an audio playback control, and save\u002Fcancel actions.","\u002Fexamples\u002Fapps\u002Farcade\u002Fcomponents","https:\u002F\u002Fassets.nicelydone.club\u002Felements\u002Ffull\u002F666c67a1-769f-44e4-8871-453108fc016f.png",696,757,"AI Voiceover Configuration Popover from Arcade",[310],{"id":12,"title":13,"slug":49},{"slug":312,"title":313,"logo":314,"baseline":315,"categories":316},"arcade","Arcade","https:\u002F\u002Fassets.nicelydone.club\u002Flogos\u002Farcade-661b86c8.png","Create effortlessly beautiful demos in minutes",[317,321,325,326,327],{"id":318,"title":319,"slug":320},8,"Design","design",{"id":322,"title":323,"slug":324},25,"Marketing","marketing",{"id":57,"title":58,"slug":59},{"id":143,"title":144,"slug":145},{"id":328,"title":329,"slug":330},103,"Demo Automation","demo-automation",[],[333,336,339,342,345,348,351,354,357,360,363,366,369,372,375,378],{"label":334,"to":335},"Audio Player","\u002Fexamples\u002Fscreens\u002Faudio-player",{"label":337,"to":338},"Edit","\u002Fexamples\u002Fscreens\u002Fedit",{"label":340,"to":341},"Media Detail","\u002Fexamples\u002Fscreens\u002Fmedia-detail",{"label":343,"to":344},"Media Editor","\u002Fexamples\u002Fscreens\u002Fmedia-editor",{"label":346,"to":347},"Elevenlabs design examples","\u002Fexamples\u002Fapps\u002Felevenlabs",{"label":349,"to":350},"Pocket Casts design examples","\u002Fexamples\u002Fapps\u002Fpocket-casts",{"label":352,"to":353},"Fyxer design examples","\u002Fexamples\u002Fapps\u002Ffyxer",{"label":355,"to":356},"Livekit design examples","\u002Fexamples\u002Fapps\u002Flivekit",{"label":358,"to":359},"Cofounder design examples","\u002Fexamples\u002Fapps\u002Fcofounder",{"label":361,"to":362},"Delphi design examples","\u002Fexamples\u002Fapps\u002Fdelphi",{"label":364,"to":365},"Copilot design examples","\u002Fexamples\u002Fapps\u002Fcopilot",{"label":367,"to":368},"Reflect design examples","\u002Fexamples\u002Fapps\u002Freflect",{"label":370,"to":371},"Otter design examples","\u002Fexamples\u002Fapps\u002Fotter",{"label":373,"to":374},"Slack design examples","\u002Fexamples\u002Fapps\u002Fslack",{"label":376,"to":377},"Descript design examples","\u002Fexamples\u002Fapps\u002Fdescript",{"label":379,"to":380},"Arcade design examples","\u002Fexamples\u002Fapps\u002Farcade",{"published_at":382,"updated_at":383},"2022-08-21T20:07:35.000Z","2026-09-21T12:15:31.000Z"]