:butterfly: Hyperaudio Lite :butterfly:

:high_brightness: To make media on the web more accessible we believe that every piece of spoken-word audio and video should come with an Interactive Transcript.:high_brightness:

Hyperaudio Lite - is an Interactive Transcript Viewer

You can use Hyperaudio Lite to provide Interactive Transcripts, this readme details why and how.

• lightweight (around 10Kb minified)
• no dependencies
• no frameworks (vanilla JavaScript)
• no build step
• MIT Licensed

:tiger: Hyperaudio Lite in the Wild :tiger:

As demonstrated here https://hyperaudio.github.io/hyperaudio-lite/ plus equivalent multiplayer version

Active word version https://hyperaudio.github.io/hyperaudio-lite/active.html

Alternatively styled version https://lab.hyperaud.io/mozfest2021/interviews/lance_weiler/

YouTube Integration https://hyperaudio.github.io/hyperaudio-lite/youtube.html — and a multiplayer version with two YouTube players on one page

SoundCloud Integration https://hyperaudio.github.io/hyperaudio-lite/soundcloud.html

Vimeo Integration https://hyperaudio.github.io/hyperaudio-lite/vimeo.html

VideoJS Integration https://hyperaudio.github.io/hyperaudio-lite/videojs.html

VidStack Integration https://hyperaudio.github.io/hyperaudio-lite/vidstack.html

Spotify Integration https://hyperaudio.github.io/hyperaudio-lite/spotify.html

Vitorio's version https://github.com/vitorio/hyperaudio-lite

:star2: Hyper Powers :star2:

Interactive transcripts are transcripts with special powers. Hyperaudio's Interactive Transcripts are called Hypertranscripts and are infused with the following hyper-powers:

:world_map: Navigate

Click on the text to navigate directly to the part of the audio where that word was said.

:mag_right: Search

Find words and phrases inside your transcript and make your media search-engine friendly.

:couple_with_heart_woman_woman: Share

Selecting part of a transcript creates a URL with timing data which when shared will take people directly to the corresponding piece of audio where the highlighted words are spoken.

:vhs: Data Formats :vhs:

Hypertranscripts contain the following data:

• Paragraphs
• Words
• Word start time (data-m milliseconds)
• Word duration (data-d milliseconds)

Here's an example:

<p>
  <span data-m="52890" data-d="0" class="speaker">Alexandra: </span>
  <span data-m="52890" data-d="90">I </span>
  <span data-m="52980" data-d="240">think </span>
  <span data-m="53220" data-d="720">unfortunately </span>
  <span data-m="53970" data-d="60">at </span>
  <span data-m="54030" data-d="60">the </span>
  <span data-m="54090" data-d="270">minute, </span>
  <span data-m="54390" data-d="180">we </span>
  <span data-m="54570" data-d="180">make </span>
  <span data-m="54750" data-d="270">people </span>
  <span data-m="55020" data-d="300">aware </span>
  <span data-m="55320" data-d="90">of </span>
  <span data-m="55410" data-d="150">their </span>
  <span data-m="55560" data-d="480">personal </span>
  <span data-m="56040" data-d="330">data </span>
  <span data-m="56370" data-d="210">when </span>
  <span data-m="56580" data-d="480">terrible </span>
  <span data-m="57060" data-d="300">things </span>
  <span data-m="57360" data-d="510">happen. </span>
</p>

Hyperaudio Lite is "tag agnostic" so for example, you could use other tags instead of to wrap words.

You could also make headings link to chapter points using attributes, like this:

<h5 data-m="214800">
  What kind of help is available for people to manage their own data?
</h5>

We can see that a Hypertranscript is really just HTML, this helps keep it:

• :clap: extensible
• :clap: accessible
• :clap: readable

How to make a Hypertranscript

The best way is to use the Hyperaudio Lite Editor.

Another way is to use the Hyperaudio Converter

This currently takes 4 possible inputs:

• SRT (Subtitle format)
• Speechmatics JSON\*
• Gentle JSON
• Google Speech-to-Text JSON

:floppy_disk: Hyperaudio Lite Code :floppy_disk:

Essentially the Hyperaudio Lite library is made from 4 JavaScript files:

1. hyperaudio-lite.js - the core that deals with the linking of media to words
2. hyperaudio-lite wrapper - adds search, selection and playback rate functionality

1. hyperaudio-lite-player.css

Add to your HTML file in the following way:

<head>
  <link rel="stylesheet" href="css/hyperaudio-lite-player.css">
</head>

and at the end of the :

<script src="js/hyperaudio-lite.js"></script>
  <script src="js/hyperaudio-lite-wrapper.js"></script>
</body>

Using as an ES module or CommonJS

Hyperaudio Lite is also distributed as ES module and CommonJS forms alongside the classic script, so modern frontend projects (Vite, webpack, Rollup, etc.) and Node-based tooling can consume it directly without vendoring or patching:

// ESM
import { HyperaudioLite } from 'hyperaudio-lite';
// CommonJS
const { HyperaudioLite } = require('hyperaudio-lite');

The classic Chat with me