Skip to content

Output Realizations

One of the main motivations for ReadAlong-Studio was to provide a one-stop-shop for audio/text alignment. With that in mind, there are a variety of different output formats that can be created. Here are a few:

Simple web deployment

The www folder generated by the CLI's readalongs align command or included in the Web Bundle download format from the Web App includes everything you need to host your ReadAlong on your own server.

Copy the whole folder with all its contents to your web server, and that should work as is on most web servers. The index.html provided will generate a page that shows only your readalong.

The elements of the index.html can also be copied into a larger page with other contents or multiple readalongs -- see Web Component details below.

WordPress deployment

Deploying to WordPress requires our wordpress plugin and the snippet generated by our Web or CLI app, which is included in the readme.txt file generated in each Web Bundle from the Web App, or in your output folder from the CLI.

Web Component details

The standard output from ReadAlong-Studio consists of 1) a .readalong file in XML, 2) an audio file, 3) optional image assets, and 4) a sample index.html file bringing it all together, which you can mobilize to the web or hybrid mobile apps quickly and painlessly.

This is done using the ReadAlong WebComponent. Web components are re-useable, custom-defined HTML elements that you can embed in any HTML, regardless of which framework you used to build your site, whether React, Angular, Vue, or just Vanilla HTML/CSS/JS.

Below is an example of a minimal implementation in a basic standalone html page. Please visit https://stenciljs.com/docs/overview for more information on framework integrations.

<!DOCTYPE html>
<html>
    <head>
        <!-- Import fonts. Material Icons are needed by the web component -->
        <link href="https://fonts.googleapis.com/css?family=Lato|Material+Icons|Material+Icons+Outlined" rel="stylesheet">
    </head>

    <body>
        <!-- Here is how you declare the Web Component -->
        <read-along href="assets/sample.readalong" audio="assets/sample.wav"></read-along>
    </body>

    <!-- The last step needed is to import the package -->
    <script type="module" src='https://unpkg.com/@readalongs/web-component@^1.4.0/dist/web-component/web-component.esm.js'</script>
</html>

The above assumes the following structure, which is the default provided in the Web Bundle generated from the web app:

www
├── assets
│   ├── sample.wav
│   └── sample.readalong
├── index.html
└── readme.txt

Then you can host your site anywhere, or run it locally (cd www && python3 -m http.server for example)

Single-file HTML

With -o html, the ReadAlongs Studio will output a completely self-contained HTML file that be shared by e-mail and used without requiring any access to the Internet.

This file is also compatible with our Editor where you can make further modifications to your readalong.

ELAN/Praat files

With -o eaf or -o TextGrid, the ReadAlongs Studio can output files in the ELAN eaf and Praat TextGrid file formats.