All Collections
Sharing your audio
Embedding audio on your site
Embedding audio on your site

Here's how to embed a player for your podcast on your website.

Sharon Taylor avatar
Written by Sharon Taylor
Updated over a week ago

Omny Studio generates two kinds of players for your audio: single clip embed and playlist embed players. 

To find the HTML code for these players, click on the clip or playlist you want to share and go to "Details". Select the "Embed" tab and choose which embed player you'd like to use.

Embed player styles

Omny Studio has various embed player size and style options:

  • Wide artwork player: the player adapts the width to the container, is 180px tall, displays the artwork on the side, and adapts the background color with a blurred artwork.

  • Wide colored player: the player adapts the width to the container, is 180px tall, displays the artwork on the side, and has a solid background color.

  • Large player: the player is set at a fixed size, and displays the artwork in full as the background. It is available at various preset sizes (400×400, 300×300, 560×315).

  • Transcript player: the player adapts to the width of the container, is 600px tall, shows the published transcript with interactive highlighting and click word to seek.

Note: the embed player iframe HTML can be manually adjusted for other size options, but some sizes may not be appropriate for the style option.

Embed player options

Embed players can be customized individually or options can be set as defaults for an entire organization, network or program.

  • Show artwork: show or hide the clip's artwork.

  • Show share: show or hide the share button and functionality.

  • Show download: show or hide the "Download" button in the share screen.

  • Show description: show or hide the "Info" button and the clip's description.

  • Show podcast subscribe: show or hide the "Subscribe" button.

  • Custom colors: override the embed player's highlight colors (shown on the play button and waveform played section), background color (only applicable to the wide style) and text color (only applicable to the wide style).

Advanced embed player functionality

Embed players can also be manually tweaked to enable further functionality. This can be done by editing the src attribute of the embed HTML code to include additional query parameters. For example, playing the embed from 1 minute and 5 seconds would involve changing the iframe src from:

src="https://omny.fm/shows/show-slug/clip-slug/embed"

to:

src="https://omny.fm/shows/show-slug/clip-slug/embed?t=1m05s"

If enabling multiple advanced options, combine them with ampersands (&). For example, playing the embed from 1 minute and 5 seconds with autoplay enabled and locked to German would involve changing your iframe src from:

src="https://omny.fm/shows/show-slug/clip-slug/embed"

to:

src="https://omny.fm/shows/show-slug/clip-slug/embed?t=1m05s&autoplay=1&lang=de"

The available options are:

  • Play from: use the query string parameter t to start the player at a specified time. The time format is ##m##s for minutes and seconds. For example, use ?t=5s to start at 00:00:05 or ?t=1m05s to start at 00:01:05.

  • Autoplay: use the query string parameter autoplay with the value 1 to enable autoplay on load. (Note: autoplay will not work on all modern desktop and mobile browsers due to media restrictions). For example: ?autoplay=1.

  • Select clip in playlist embed: use the query string parameter selectedClip with a Clip ID to pre-select a clip in a playlist embed. For example: ?selectedClip=365994b2-ce5c-4984-8aeb-4679add7b905.

  • Hide playlist in playlist embed: use the query string parameter list with the value 0 to hide the playlist list in a playlist embed to simulate an automatically updating embed. You will also need to change the height to '180' in the iframe code.

  • Limit number of clips in playlist embed: use the query string parameter limit with a positive integer value to cap the number of clips displayed in a playlist embed. For example: ?limit=5 will cause up to 5 clips to be shown.

  • Lock embed to a specific language: by default, Omny Studio's embed players will be displayed in the user's browser/operating system language (where supported). To always display an embed player in a specific language, use the query string parameter lang with a supported language code (see list below). For example: ?lang=de for German.

Supported languages

  • Arabic (with RTL support) - ar

  • Czech - cs

  • English - en

  • French - fr-fr, Canadian French - fr-ca

  • German - de

  • Hebrew (with RTL support) - he

  • Italian - it

  • Japanese - ja

  • Malay - ms

  • Portuguese - pt-pt, Brazilian Portuguese - pt-br

  • Spanish - es

  • Turkish - tr

Player.js

Developers can programmatically control the embed player using the Player.js Javascript library.

oEmbed

Omny provides an oEmbed API at https://omny.fm/oembed

Did this answer your question?