I2I: Google Read Aloud Player

[mhalabi-google]

Summary

Google has developed a technology to read web articles out loud. The technology can take public web pages and transform their content into longform audio using Text-to-Speech. The technology is already available in Google Assistant (video) and in Google Go.

We would like to create a new AMP media component that enables publishers to embed this technology into their web pages. By embedding the new AMP component, an iframe containing a player will be displayed in the page and their users will be able to listen to an audio version of the web page.

Demo

• Video
• Screenshot
  

Usage

Here is an example of the HTML code that will be needed in order to embed the AMP component in a web page (this tag should be added at the desired location of the player within the page).

<amp-google-read-aloud-player
    data-api-key="<YOUR_API_KEY>"  
    data-url="https://www.blog.google/products/assistant/easier-access-web-pages-let-assistant-read-it-aloud/">
</amp-google-read-aloud-player>

Attributes

• data-api-key (required): API key identifies the publisher and must be provided in order to use the player. During the experiment phase, the API key will be provided to the publisher by Google.

• data-url (optional): The URL of the web page to read aloud. The URL should be correlated to the web page that contains the player, which must be a publicly accessible page. If not provided, the canonical link of the page is used.

• data-speakable (optional): Whether to distill the contents for reading aloud based on the Speakable Markup. The Speakable Markup is a metadata attribute which is used to specify which sections of the web page are especially appropriate for Text-To-Speech conversion. If not present, Google automatically analyses the web page and decide which text parts to read aloud.

Note: This is the list of the main attributes, more custom attributes are to come.

How does it work?

The client sends the URL of the web page to Google's server, the server extracts the text to read aloud from the web page, creates a streamed audio using TTS and streams it to the client.

Motivation

The Read Aloud component will allow web page owners (e.g., publishers and bloggers) the option to distribute their content using audio. This will enable their users to consume the content when they cannot read or prefer to consume it as audio (e.g., while running or cooking, or for people with visual or reading difficulties).

As of today, no AMP component provides the ability to narrate web pages. In order to achieve this, publishers need to use TTS and integrate with (or write a new) player on their own.

We are not using amp-iframe (or amp-video-iframe) for those main reasons:

1. In the future, we plan to add complex logic (e.g., word highlighting, actions and events) which cannot be achieved with amp-iframe.
2. Web developers may find it harder to configure the component using amp-iframe, since they need to provide the iframe a long custom URL as src attribute.

/cc @alanorozco
/cc @omrishefi
/cc @ampproject/wg-approvers

[alanorozco]

Hi @mhalabi-google

This looks alright to me! The rest of the wg can approve during the scheduled design review.

One note, it's possible we might not need data-url as a markup attribute. Could we use the canonical URL instead? That way the origin remains stable regardless of cache (eg. cache, publisher's origin, ie. always https://www.blog.google in your example).

- const iframeSrcUrl = `https://.../?url=${this.element.dataset.url}`;
+ const iframeSrcUrl = `https://.../?url=${Services.documentInfoForDoc(this.element).canonicalUrl}`;

and marked up without the attribute:

<amp-read-aloud
    data-api-key="<YOUR_API_KEY>"  
-   data-url="https://www.blog.google/products/assistant/easier-access-web-pages-let-assistant-read-it-aloud/"
></amp-read-aloud>

[mhalabi-google]

Hi @alanorozco

Thank you for the review.

This is a good point, in case the canonicalUrl is available, we can use it.

According to Make your pages discoverable, the publisher must set the canonical link. Is there any check by the AMP validator that the canonical link was set? Do we know roughly in what percent of the pages it is available?

We will modify the behavior to make data-url an optional (instead of a required) attribute, but we still need to enable publishers to set it for the following reasons:

1. Playing other URL: It may be useful when publishers want to play web page content which is different from the displayed page. For example, several players on the same page in blog summary pages (like blog.amp.dev), portal pages (like bbc.co.uk).

2. Canonical URL is missing: In some cases the canonical link is not set by publishers and we still want to enable them to add the player.

What do you say?

Regards,
Michal

[alanorozco]

Yes, the canonical URL is always available on valid AMP documents. Also sounds good to make data-url optional.

[Code-Bear]

I know this is meant for issues but I was wondering if you could tell me if this was ever implemented and if so, how I might be able to use it on a WP site? I came across this Forbes article and notice this exact player being used and in my searching, I came across this issue.

[mhalabi-google]

Hi Code-Bear,

Thank you for showing interest in the Read Aloud player.
The player is still in development and not yet generally available for other websites.

Regards,
Michal

[moojnick]

Hi Code-Bear,

Thank you for showing interest in the Read Aloud player. The player is still in development and not yet generally available for other websites.

Regards, Michal

Hey Michal :)
Great work! I saw this feature online on Ynet.
Is there a release date in the horizon?

Thanks!
Liran

[mhalabi-google]

Hi moonjnick@,

Thank you for the feedback.
Unfortunately, we still do not have a release date that we can share with the community. Stay tuned!

Regards,
Michal

[developerwordpresss]

Hi moonjnick@,

Thank you for the feedback. Unfortunately, we still do not have a release date that we can share with the community. Stay tuned!

Regards, Michal

Hey,
I have recently seen a lot of news websites using this player.
When will it be available to publishers?

[Code-Bear]

Hi moonjnick@,
Thank you for the feedback. Unfortunately, we still do not have a release date that we can share with the community. Stay tuned!
Regards, Michal

Hey, I have recently seen a lot of news websites using this player. When will it be available to publishers?

Yep, I literally asked the same thing. I first saw it on Forbes. Literally sat there reading the source code to try to figure out where it came from and ended up here almost 4 months ago and still no updates. I hope they spin it off into its own project because APM is quickly becoming obsolete outside of news companies and frankly that would be huge bloat to have on a site just for access to this read-aloud functionality.

[jgui1129]

This is a great feature for publisher. Hope they open it up for public use. Following this thread.

[jgui1129]

This is a great feature for publisher. Hope they open it up for public use. Following this thread.

[annarose4]

There are a few more solutions, very similar and offer even more. You got [www.trinityaudio.ai] that offers an add-on for WP and wix, beyoundwords, player.ht, and a few more. I surprisingly found google to be very basic, the voices are not as high-end as the other solutions, and there are no additional features that can be found in the other players (speed, translation, sharing)
I'd rather use Trinity Audio on my website, which focuses on AI TTS and provide a much more advanced and scalable solution.

[cgrra]

Maybe it´s a simple question:
Where/How do you get API Key, I have read that it´s provided by google to the publisher, but is there any guide?

[zigi85]

Is there any news regarding the use of a player for websites in Hebrew?