ampproject / ampproject/amphtml
I2I: Google Read Aloud Player
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## 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](https://blog.google/products/assistant/easier-access-web-pages-let-assistant-read-it-aloud/) ([video](https://www.youtube.com/watch?v=psEX5jPkYiw)) and in [Google Go](https://www.blog.google/technology/next-billion-users/make-google-read-it/).
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](https://youtu.be/-_plZX78wvs)
* 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).
```html
```
### 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](https://developers.google.com/search/docs/advanced/crawling/consolidate-duplicate-urls?hl=en&visit_id=637407880947679788-2485816081&rd=1#expandable-6) of the page is used.
- `data-speakable` (_optional_): Whether to distill the contents for reading aloud based on the [Speakable Markup](https://schema.org/speakable). 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
Contributor guide
Research direction
Start by reviewing the existing amp-iframe and amp-video-iframe components, then compare their configuration and lifecycle with the proposed amp-google-read-aloud-player usage example. The work is done when the new AMP media component can embed the Google Read Aloud player using data-api-key, data-url, and data-speakable, including the stated canonical-URL fallback.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 25/100