Audio embeds
Every public audio post you create can be easily embedded onto any web page, using Huge’s custom audio player.
About the player
The Huge audio player loads one post audio at a time.
The publication name, post date and post title are displayed.
If the post has episode artwork, that is displayed, otherwise the publication’s podcast artwork will be displayed.
There are helpful buttons for skipping backwards 15 seconds and skipping forwards 30 seconds.
There is an option to cycle through different playback speeds: 1x, 1.2x, 1.5x and 2x.
There is a “Share” icon in the top right corner, which lets listeners copy the default embed code as well as the main post URL.
Private posts
For member-only posts, the player will only display if the visitor is logged in to your hosted site. If they are not, a message is shown saying that the post is private.
This ensures that private posts cannot be embedded or shared outside of your hosted site.
Find the embed code
On the Posts page in your Huge account, hover over the post you want to embed and click on the embed icon. This will copy HTML to your clipboard, which you can then paste into a web page.
The default embed code looks like this:
Here is a live player:
Customising the player
There are a few options you can use to customise the appearance of the player when embedding it in a web page.
These options are applied using query parameters in the embed URL.
Note that the first query parameter must be preceded by a ? character and all subsequent parameters by a & character.
Every value must be URI-encoded.
Here’s an example with purple and white colours applied:
Background colour
bg=COLOR
This setting accepts hex codes, rgb(), rgba() and named colours.
Examples:
bg=%23CCC(URI-encoded#CCC)bg=rgb(200,57,178)bg=rgba(200,57,178,0.75)bg=green
Note that if the user’s browser is in dark mode and theme is not specified, the custom background is not applied.
Main colour
This colour is used for all text and elements in the player. Opacity is used to style different elements.
text=COLOR
This setting accepts hex codes, rgb(), rgba() and named colours.
Examples:
text=%23777(URI-encoded#777)text=rgb(200,57,178)text=rgba(200,57,178,0.75)text=green
Note that if the user’s browser is in dark mode and theme is not specified, the custom main colour is not applied.
Theme
By default, the player will adjust and automatically adapt to the browser dark mode setting.
To force light mode always, use theme=light.
To force dark mode always, use theme=dark.
Note that in dark mode, custom background and text colours (see above) are not applied.
Hide publication name
name=hide
Hide date
date=hide