Add Audio to Your Blog Posts With the Podopi Player

Add the Podopi Player widget to your site and let visitors enjoy crisp audio versions of all your content.

The lightweight widget is easy to add to your site. You need only install it once. Every article with audio versions ready will then render the audio player. The widget loads unobtrusively, and won’t obscure the flow of your website content. Website performance remains unchanged. Minimal bundle size (51 kB) ensures your website remains snappy!

Features

The latest version of the widget packs lots of power in a small package. New features and improvements are deployed automatically.

  • Easy install — Install once and every article will be ready for audio.
  • Performant — Renders in the blink of an eye!
  • Unobtrusive — Designed to look great on most websites.
  • Responsive — Optimized for mobile, tablet and desktop.
  • Accessible — Built with modern standards for usable websites.
  • Familiar — Podcast listeners will feel right at home.

How to Install

Follow these instructions to install the Widget on your website. Please reach out if you need any assistance — it’s free and we’d love to help.

Get the embed snippet for your website at app.podopi.com by selecting the podcast you want to embed. Click “Embed”. The snippet looks similarly to the one below, but will include the ID of your podcast.

  1. Insert this snippet before the closing </head>-element:
<script src="https://embed.podopi.com/player.js"></script>
  1. Insert this snippet where you want to render the player:
<div id="podopi"></div>
<script>
  PodopiPlayer({
    podcastId: '[Insert Podcast ID]',

    // optional, but recommended:
    canonicalUrl: '[Insert Canonical URL]',
  }).render("#podopi")
</script>

Important: We highly recommend setting the optional canonicalUrl-param. See the “Troubleshooting & Help”-section below for details.

Customization

Initialize the PodopiPlayer instance with the required options.

PodopiPlayer Options

NameTypeRequiredDescription
podcastIdStringYESThe unique ID of your Podcast.
canonicalUrlStringRecommendedThe canonical URL of the article.
darkModebooleanNOEnable a dark color theme.

PodopiPlayer Instance Methods

Access instance methods by assigning the Podopi Player to a variable.

var podopi = PodopiPlayer(opts)
podopi.updateProps(newProps)
NameDescription
updatePropsUsed to set options after the player has been initialized.

Match OS Color Scheme

Modern operating systems allow the user to set their preferred color scheme. This option is accessible in web browsers supporting the matchMedia API.

Leverage the API to toggle the color scheme of the Podopi Player:

// Create an instance of PodopiPlayer
const podopi = PodopiPlayer({
  // Match OS color scheme
  darkMode: window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches,
  // TODO: add required opts
})

podopi.render('#podopi')

// Add event listener for preferred color scheme
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
  podopi.updateProps({
    darkMode: e.matches,
  })
})

The look & feel of the player will now match the user’s OS. The event handler will get called when OS settings change and let the player instance know about it.

Troubleshooting & Help

Here are common things that can go wrong, and how to fix them.

Widget not rendering

If nothing shows up, here are a couple of things you can try:

  • Make sure the snippet from the “How to Install”-section above exists inside the <head>-section of your website’s markup.
  • Visit a page on your website that you know have a working audio version.
  • Make sure the podcast and episode visibility is set to public.
  • Open the browser’s developer console and look for potential error messages to point you in the right direction.

What is the Canonical URL?

A canonical URL is the URL of the best representative page from a group of duplicate pages, according to Google. If you only have one unique URL per page, it’s that one. If you have several URLs pointing to the same page, either will do. Just make sure to always set the canonicalUrl-option to the same URL for all pages with the same content.

You can think of the canonical URL as the ID of your content, as interpreted by web browsers and search engines. It’s supposed to be unique, and using multiple IDs for the same content wouldn’t make any sense.

Blogging platforms and CMS systems usually have a tag to render the canonical URL. For example, WordPress use get_permalink() and Ghost use canonical_url. Read the docs for your platform to learn more.

Podopi will default to use window.location.href when canonicalUrl is not set manually. Although this works fine in most cases, it’s not a robust solution. By setting it manually you will ensure a smooth experience for your users.

Browser Support

The Widget is tested & optimized for modern web browsers.

  • Edge 12+
  • Chrome 95+
  • Firefox 93+
  • Safari 15+
  • Opera 80+
Ultimate Machine
© 2022