Embed audio automatically

Use the automatic Player to automatically embed audio versions alongside text versions.

You can automatically embed audio versions alongside their text versions on your website or app by using our customizable automatic Player.

💡

If you have followed setup instructions for the WordPress plugin or Ghost integration, the automatic Player is already enabled.

RSS Feed Importer and API users can enable the automatic Player via:

The automatic Player checks whether there is an audio version of each page on your website or app by comparing the page URL/ID against the audio metadata. The automatic Player will not render if an audio version is unavailable.

Enable the automatic Player on AMP

To enable the automatic Player on AMP, you will need to add the AMP-specific embed code into your article template:

<amp-iframe
    width="295" height="43"
    sandbox="allow-scripts allow-same-origin allow-popups"
    layout="responsive" scrolling="no" frameborder="0"
    src="https://spkt.io/amp/{project_id}?podcast_id={podcast_id}">
  <amp-img
    width="643" height="150"
    layout="responsive" placeholder
    src="https://s3-eu-west-1.amazonaws.com/speechkit-js/logo.svg"></amp-img>
</amp-iframe>

You will need to replace project_id with your own Project ID and pass one of the following parameters: podcast_id | external_id | article_url.

You can open this example in the AMP Playground.

The player does not render when audio is unavailable. However, due to AMP restrictions we cannot hide an amp-irrame (as we do normally) when audio is unavailable. To solve this you will need to add a function checker to show/hide the amp-frame and this must be added on your side due to the restrictions.

The function needs to make a request to our API and to check whether the audio exists or not. You can then show/hide the iFrame depending on the response. The following snippet will give you the request URL:

 [https://app.speechkit.io/api/v2/projects/{project_id}/podcasts/search?url={article_url}](https://app.speechkit.io/api/v2/projects/%7Bproject_id%7D/podcasts/search?url=%7Barticle_url%7D)
curl -X GET "https://app.speechkit.io/api/v2/projects/{project_id}/podcasts/search?url={article_url} \
 -H "Accept: application/json"

When you make a request using sRequestUrl, it will return a 200 JSON response for an existing audio article, or a 404 Not Found response for an article that can't be found. You can then show/hide the iframe according to this response.

Response

Meaning

🟢 200: OK

Audio exists

🔴 404: Not Found

Audio cannot be found

FAQs

Can I customize the automatic Player?

Yes, you can customize the automatic Player used by the iFrame code, JavaScript SDK, iOS SDK, Android SDK, WordPress plugin, and Ghost integration. See instructions here.


Will the automatic Player slow down my website?

Our automatic Player should not slow down your website. We’ve designed SpeechKit to minimize any effect on latency. Our default JavaScript player is lightweight and, when embedded via iFrame, it only loads after all other page content has loaded. We’re also the only text-to-speech service that transcodes audio for HLS (HTTP Live Streaming), which splits audio into 15-second segments at different bit rates to ensure frictionless listening.


Can I disable the automatic Player?

Yes, you can temporarily or permanently disable the automatic Player. See instructions here.