Can anyone help me how to add an audio file to an Elements page?
Cheers.
Here is a basic audio file component
http://www.garysimpson.co.uk/vault/temp-sharing/shared-components/Audio%20Player.elementsdevpack.zip
Thanks Doorbox, but what do I do with an elementsdevpack? I don’t know what you mean as I am not a programmer.
Cheers.
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
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
Ah no problem. Its very basic, I might make something better when the api is set in stone.
@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.
Gary, it would be nice if the size of the player could be larger or perhaps adjustable to a size to suit.
Cheers.
That’s awesome, nice work 
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.
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!
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…
1 Like
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 
@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 -
{
"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.
Same download link 
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
Gary, not only length wise change but vertical as well. I find the writing on the player a little too small for me.
Cheers
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 