Make Your Website Sound Better as Speech

Podopi fetches your content either by visiting your website or with RSS. With automation enabled, the text content gets converted to audio right away. You can use pre-processing tags to tweak the text to sound better in speech. Read along to learn how to leverage this feature to optimize your content for audio!

Remove Content with .podopi-exclude

Add the podopi-exclude-CSS class to any HTML element and Podopi will exclude it. This is useful in scenarios where you have elements only relevant for web, inlined with the text content.

Example

In this example we imagine a website that have a newsletter subscription-form inlined with their content. Since it wouldn’t make sense to listen to “Sign up for our Newsletter!” and such, we want to tell Podopi to exclude it.

<p>In this blog post you will learn about bats.</p>

<div id="newsletter-signup" class="podopi-exclude newsletter-form">
  <h3>Sign up for our Newsletter!</h3>
  <p>Would you like to receive our weekly updates?</p>
  <input type="email" />
  <p>Click <a href="/newsletter">here</a> to learn more.</p>
</div>

<p>Bats are pretty cool creatures.</p>

The secret sauce here is the CSS class podopi-exclude. As you can see in the example above, you can add it with your existing class names withouth any conflicts. The example results in Podopi reading the page like this:

In this blog post you will learn about bats.
Bats are pretty cool creatures.

Perfect. No “Sign up for our Newsletter!” or “Click here to learn more.”. Only a crazy person would speak like that!

Replace Content with data-podopi-say

Add the attribute data-podopi-say to any HTML element and Podopi will replace the tag with another text. You can use this to replace text that doesn’t work well as audio with something that does.

Example: Click Here -> “Visit …”

In the example below we show a website that have a “call to action”-button inlined with the article content. Clicking on a button makes perfect sence online, but not in speech. Let’s fix it!

<p>Our beloved Bat T-Shirts are back in stock!</p>

<p data-podopi-say="Visit www.bat-tees.com to place your order.">
  Go <button>place your order</button> before they run out.
</p>

<p>There's only a <strong>limited supply</strong> of T-shirts,
so you better hurry up.</p>

With data-podopi-say we can make our content more suitable for speech. The example results in Podopi reading the page like this:

Our beloved Bat T-Shirts are back in stock!
Visit www.bat-tees.com now to place your order.
There's only a limited supply of T-shirts, so you better hurry up.

Example: Fine-tune Pronunciations

Podopi’s AI voices are generally very good at pronunciations. There are, however, some cases where you may want to make some adjustments. Here’s how it can be done with the data-podopi-say-attribute:

<p>
  I work <span data-podopi-say="with head and neck surgery">
  as an Otorhinolaryngologist</span> at The Mayo Clinic.
</p>

Otorhinolaryngologist is a hard word to pronounce, even if you’re (super)human. An AI can do it pretty well, but “head and neck surgery” is a bit easier to remember if you hear it for the first time.

Podopi will interpret the above as:

I work with head and neck surgery at The Mayo Clinic.

While Google and website visitors will see:

I work as an Otorhinolaryngologist at The Mayo Clinic.