AMP Player

To enable the SpeechKit 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-iframe (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}
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

200: OK

404: Not Found

Audio exists.

Audio cannot be found.