Enabling the playlist reader

The playlist reader is used for reading a list of links on a web page out loud. The list can be, for example, the latest news, the latest blog posts, or any other similar list.

Instructions

1. Request the playlist reader code from Readit

2. Add the reader code to your web page

Add the playlist reader to your web page by adding the received code into your web page, at the end of the <head> section, for example.

    ...
    <script src="https://portal.aimater.com/static/reader/playlist/xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx.js"></script>
</head>

3. Mark the readable playlists in your web page source code

All links that should be read out loud, must be inside an element with the class 'aim-playlist'.

<div class="aim-playlist">
    <a href="article-1">
        Article 1
    </a>
    <a href="article-2">
        Article 2
    </a>
</div>

4. Mark the readable text content inside the links

In addition to marking the playlists, you must also mark the text content inside the links that is read out loud. This is done by adding the class 'aim-readable' to the element(s) that you want the reader to read out loud.

<article class="aim-readable">
    This article content is read out loud.
</article>

Marking the readable elements inside the links is done exactly the same way as with the regular web page reader. Detailed instructions are available in the regular reader's instructions. Unlike the regular reader, the playlist reader cannot skip elements hidden with CSS. Hide such elements with the hidden attribute instead.

5. Finished

Now the playlist reader will appear at the top of the playlist element, and the content of the links can be read out loud with the reader.

Read the following Notes section for additional notes and instructions.

Notes

Multiple playlists

You can have multiple playlists visible on your website at the same time. The playlist reader is automatically added for each playlist separately. Only one playlist can be read out loud at a time.

Dynamic playlists

The playlist reader automatically detects if a new 'aim-playlist' element appears on the page. A new playlist reader is created for this playlist. Also, playlists that are removed from the website are detected.

The playlist reader also detects if new links are added to the playlists or if links are removed from the playlists. New links are added to the end of the playlist.

The playlist reader's position

The playlist reader is inserted as the first element inside the 'aim-playlist' element.

<div class="aim-playlist">
    <div class="aim-playlist-host">
        <!-- This playlist reader is inserted into the page. -->
    </div>
    <a href="article-1">...</a>
    <a href="article-2">...</a>
</div>

The playlist reader reads all links that are inside the 'aim-playlist' element. If you want to skip a link, you can add the class 'aim-skip' to that element.

<div class="aim-playlist">
    <a href="article-1">...</a> <!-- Included -->
    <a href="article-2" hidden>...</a> <!-- Included -->
    <a href="article-3" class="aim-skip">...</a> <!-- Skipped -->
</div>

Usage alongside the regular reader

You may use the playlist reader alongside the regular reader. You may have 'aim-readable' elements on the same page as the 'aim-playlist' elements. Also, we recommend enabling the regular reader in the sites behind the links. This allows the user to listen to the links one by one as well.