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:

<iframe src="https://SUBDOMAIN.huge.fm/play/POST_ID/" style="border: 0" loading="lazy" seamless width="100%" height="128px"></iframe>

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.

https://SUBDOMAIN.huge.fm/play/POST_ID/?bg=purple&text=white

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

AnalyticsHow to publish an audiobook