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

    Embed our web player

    • Updated on 30 Aug 2024
    • 3 Minutes to read
    • 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.

    What's Next