Embed our web player
  • 30 Aug 2024
  • 3 Minutes to read
  • Dark
    Light
  • PDF

Embed our web player

  • Dark
    Light
  • PDF

Article summary

Our web player can be embedded on any website adding simple HTML iframe code.

Important: Our web player requires an HTTPS enabled website.

We support a variety of embeddable web players depending on the type of content.

ContentDescription
EpisodeEmbeds a single and specific podcast episode.
ShowFollows a specific podcast show (channel), always displaying the latest available episode, with the ability to add a small playlist view.
PublisherFollows all the podcast episodes from a specific publisher over all podcast shows, displaying the latest available episode, with the ability to add a small playlist view.
StreamEmbeds a single and specific radio live stream.

Getting the iframe code

The easiest, and recommended, method of embedding a player on your site is to paste the iframe code as-is into your HTML. The code will look something like the following:

<iframe src="https://iframe.iono.fm/chan/123" width="100%" height="450" frameborder="0"><a href="https://iono.fm/c/123">Content hosted by iono.fm</a></iframe>

To get the embed code for a provider, show, episode or stream, visit it's page on our website, and then click the "Share" button.

This will trigger a drawer that shows the default iframe code and also a button that allows customisation of the player.

Screenshot 2023-05-17 at 15.15.12.png

Customizing the web player

Our embeds can be customised in various ways by adding one or more of the URL parameters. Our "Customise embed" tool provides a visual tool where these can be configured. Thery are:

ParameterDescription
widthThe width, in pixels, of the embedded control.
heightThe height, in pixels, of the embedded control.
layoutThe layout to be rendered.
legacy – (Default) Render the default rectangular layout.
square – Render the square layout.
playlistEnable the playlist component of the player. Only available on publisher ("provider") and podcast show ("channel").
latest – (Default) Displays the latest episodes.
none – Do not shot the playlist component.
popular – Displays most popular episodes for this publisher or show.
descriptionWhether or not to include the episode description in the player.
0 – (Default) Disables episode descriptions.
1 – Enables episode descriptions.
qualityThe default quality profile of the player.
low – Low quality profile.
medium – (Default) Medium quality profile.
high – High quality profile.
langThe language to be used for the player interface. Currently the following languages are supported:
en – (Default) English
af – Afrikaans
de – German
fr – French
pt – Portuguese
st – Sesotho
tn – Setswana
nr – Southern Ndebele
pt – Swahili
xh – Xhosa
zu – Zulu
sharingWhether or not to show the sharing section component.
0 – Disables sharing.
1 – (Default) Enables sharing.
artworkWhether or not to show cover art. Only available on streams, required valid "Now Playing" metadata.
0 – Disables cover art.
1 – (Default) Enables cover art.
waveformsWhether or not to render use a simple scroll area or audio waveforms.
0 – Disables waveforms.
1 – (Default) Enables waveforms.
accentTheme accent color as a hexadecimal code. Example: ed3d96
backgroundTheme background color as a hexadecimal code. Example: ffffff
borderTheme border color as a hexadecimal code. Example: dddddd
textTheme text color as a hexadecimal code. Example: 444444
roundedTheme rounded corners, must be a value between 0 and 20

Wordpress integration

You can add iono.fm as an oEmbed provider on your WordPress blog by adding the following code to your theme's functions.php file.

wp_oembed_add_provider('#https?://(www\.)?iono\.fm/(p|c|e|s)/.*#i', 'https://embed.iono.fm/oembed', true);

You can find out more about embedding content in WordPress by reading this article.

Unsupported browsers

Almost all desktop and mobile browsers support HTML5 audio, but for very old browsers our player will render a basic HTML4 fallback with only a direct link to open audio content.