# Adding an Audio file to a page? **URL:** \ **Category:** Elements\ **Created:** [March 14, 2025, 2:07am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725 "2025-03-14T02:07:04Z")\ **Posts on this page:** 19\ **Page:** 1
**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\ **Post date:** [March 14, 2025, 2:07am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/1 "2025-03-14T02:07:04Z")
Can anyone help me how to add an audio file to an Elements page? Cheers. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 4:58am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/2 "2025-03-14T04:58:28Z")
Here is a basic audio file component [http://www.garysimpson.co.uk/vault/temp-sharing/shared-components/Audio%20Player.elementsdevpack.zip](http://www.garysimpson.co.uk/vault/temp-sharing/shared-components/Audio%20Player.elementsdevpack.zip) ---
**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\ **Post date:** [March 14, 2025, 5:28am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/3 "2025-03-14T05:28:01Z")
Thanks Doorbox, but what do I do with an elementsdevpack? I don’t know what you mean as I am not a programmer. Cheers. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 5:43am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/4 "2025-03-14T05:43:53Z")
Download it… Put it somewhere on your Mac you will keep all your random components… Open the Settings in Elements, Top menu bar \> Elements \> Settings… Select the middle tab in settings “Adonis”… Click “Add Pack”… You choose the file you downloaded, Audio Player.elementsdevpack ---
**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\ **Post date:** [March 14, 2025, 6:09am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/5 "2025-03-14T06:09:12Z")
Doorbox, thank you very much for this. Works perfectly, but you knew that anyway. Do you have a PayPal account so I can send you something? Cheers, Paul Cruice [paulcruice@gmail.com](mailto:paulcruice@gmail.com) ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 6:43am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/6 "2025-03-14T06:43:37Z")
Ah no problem. Its very basic, I might make something better when the api is set in stone. ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 7:29am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/7 "2025-03-14T07:29:30Z")
@paulcruice I updated it for a stumbling block I’m sure you’d quickly run into. Now if you have more than one auto player on a page, and one is playing. When the visitor plays another one, anything else that is playing is stopped. Same download link. ---
**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\ **Post date:** [March 14, 2025, 7:49am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/8 "2025-03-14T07:49:46Z")
Gary, it would be nice if the size of the player could be larger or perhaps adjustable to a size to suit. Cheers. ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 14, 2025, 8:33am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/9 "2025-03-14T08:33:02Z")
That’s awesome, nice work 🥰 ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 8:34am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/10 "2025-03-14T08:34:32Z")
OK, I’ve implemented a number of width settings from full to extra small. Same download link. Now thats ya lot 😂😂😂 Just kidding. But will wait till elements is further down the road before making a full on custom player. ![CleanShot 2025-03-14 at 8 .31.35@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/e/c/ec47c6f1168b342a8485fdeeaf98f212e0dc5d39.png) ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 14, 2025, 8:55am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/11 "2025-03-14T08:55:45Z")
I had a quick look around your audio component, and it seems you’re getting up to speed quickly. Nice! However, I had a few suggestions… You may already know all this, in which case you can just ignore me 😊 Cheers! ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 9:03am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/12 "2025-03-14T09:03:29Z")
Thank’s @dan I had known about about most of those things, but hadn’t realised I could just output the hooks like that. I’ll clean it up now. It started as a quick stop gap for Paul, but now were here, lets get it cleaned up. Back soon… ---
**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\ **Post date:** [March 14, 2025, 9:06am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/13 "2025-03-14T09:06:45Z")
Awesome 🥰 And sorry to be a pain, in my video I should have said… You _ **must** _ use the themeSpacing as you can’t gaurentee those Tailwind classes will exist — a user (or theme creator) can change the spacing scale and names in the theme studio, so those sm/md/lg values might not exist 😅 ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 14, 2025, 1:20pm UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/14 "2025-03-14T13:20:19Z")
@dan I dwelled on the theme spacing watching a movie (good movie by the way “The Gorge”). Anyway, while I totally get the upsides, there are some downsides in this case. As you demonstrated in your video, the player collapses to a single button at anything less than 14rem. So a first time user could be clicking away trying all the different sizing passed from the theme studio, and not see any change in the player until they stumble on the higher values, I think only the top 4 are greater than 14rem in the shipped themes. Then they have to figure out they need to create a custom spacing. Users can always set theme spacing on the parent container if they wish. So I re-worked it a little, polished it up, and going with - ```auto { "title": "Max Width", "id": "max", "select": { "default": "max-w-[350px]", "items": [{ "value": "max-w-[50px]", "title": "Button Only" }, { "value": "max-w-[200px]", "title": "Small" }, { "value": "max-w-[350px]", "title": "Medium" }, { "value": "max-w-[500px]", "title": "Large" }, { "value": "max-w-[650px]", "title": "Extra Large" }, { "value": "max-w-[800px]", "title": "Double XL" }, { "value": "", "title": "Full Width" }] } }, ``` Added a couple extras, and forced inline on mobile. ![CleanShot 2025-03-14 at 1 .16.15@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/8/282c67061b8a9de18a8532c0657e031635768faa.png) Same download link ☝ ---
**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\ **Post date:** [March 14, 2025, 1:58pm UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/15 "2025-03-14T13:58:36Z")
> [@Doobox](#): > > the player collapses to a single button at anything less than 14rem. So a first time user could be clicking away trying all the different sizing passed from the theme studio, and not see any change in the player until they stumble on the higher values I see what you’re saying here, and your example is a good one. I would suggest perhaps a min-width class/control might be worth adding, if you don’t want the player to go under a certain width 🙂 With that said, we think the best approach is to use the built-in `themeSpacing` control, for a number of reasons. First, `themeSpacing` ensures consistency across all components and projects by keeping spacing values centralised and easy to adjust. If components start using arbitrary Tailwind width classes, they introduce inconsistencies and make it harder to maintain a unified design system. Second, `themeSpacing` is more flexible than it might seem. If the predefined values don’t fit your needs, you can set a **custom arbitrary value** as the default on the `themeSpacing` control, giving you a way to set a default custom width when needed. Relying on those arbitrary Tailwind classes for widths might work in the short term, but in the long run, we believe that it will make the user’s project harder to manage and scale. Using `themeSpacing` keeps things clean, consistent, and maintainable, IMHO 🙂 ---
**Author:** ![paulcruice](https://avatars.discourse-cdn.com/v4/letter/p/f0a364/32.png) [@paulcruice](https://forums.realmacsoftware.com/u/paulcruice)\ **Post date:** [March 15, 2025, 11:31am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/16 "2025-03-15T11:31:53Z")
Gary, not only length wise change but vertical as well. I find the writing on the player a little too small for me. Cheers ---
**Author:** ![Doobox](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/doobox/32/32373_2.png) [@Doobox](https://forums.realmacsoftware.com/u/Doobox)\ **Post date:** [March 15, 2025, 11:34am UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/17 "2025-03-15T11:34:57Z")
Sorry, there is no way to alter the height of an audio tag. Well, there is, kind of. it involves creating a complete new custom UI for the payer and discarding it’s native controls. That’s the pro version 😉 ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [August 7, 2025, 12:16pm UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/18 "2025-08-07T12:16:46Z")
THIS IS PERFECT FOR ME!!! WOW thank you so much… I am going to use this a lot for [WindyTown.com](http://WindyTown.com) 70+ times on homepage… I - also - would like to send you some compensation - think about it - really appreciate your work!!! [MichaelDroste@mac.com](mailto:MichaelDroste@mac.com) ---
**Author:** ![MichaelDroste](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/michaeldroste/32/37212_2.png) [@MichaelDroste](https://forums.realmacsoftware.com/u/MichaelDroste)\ **Post date:** [August 8, 2025, 7:56pm UTC](https://forums.realmacsoftware.com/t/adding-an-audio-file-to-a-page/46725/19 "2025-08-08T19:56:39Z")
Strange my .htaccess is blocking access to the mp3 files… oops - fixed 🙂