A Hypertranscript is a portable text-based format we at The Hyperaudio Project use to represent an Interactive Transcript.
If you’ve never used an Interactive Transcript you can try one out here.
We use HTML – the markup language of the web used to create the structure of web pages.
This gives us several advantages:
- It’s an established standard
- It’s readable by both humans and browsers
- We can use the semantic nature of HTML to add further meaning
- It can easily styled using CSS
- It will be picked up by search engines
So let’s take a look at a snippet from a Hypertranscript and see if we can understand what it represents:
<span data-m="4470" data-d="0" class="speaker">Doc: </span>
<span data-m="4470" data-d="270">We </span>
<span data-m="4740" data-d="240">have </span>
<span data-m="5010" data-d="300">two </span>
<span data-m="5310" data-d="600">selves </span>
<span data-m="6030" data-d="150">in </span>
<span data-m="6180" data-d="120">the </span>
<span data-m="6300" data-d="300">world </span>
<span data-m="6600" data-d="90">at </span>
<span data-m="6690" data-d="150">any </span>
<span data-m="6840" data-d="300">given </span>
<span data-m="7140" data-d="310">time </span>
<span data-m="7540" data-d="180">now. </span>Hopefully this is fairly self explanatory we have a list of words that make up a transcript encapsulated between spans, data-m represents the start time of each word in milliseconds, whereas data-d represents the duration of that word. The text itself is placed within the span tag and includes spaces and punctuation.
We can use classes to represent words or metadata that have special significance – in this case speaker names that we can style differently to stand out.
We can further style our transcript by putting content into paragraphs, to do this we use the <p> tag, illustrated by the following example:
<p>
<span data-m="560" data-d="0" class="speaker">[Angela] </span>
<span data-m="560" data-d="240">The </span>
<span data-m="800" data-d="640">Hyperaudio </span>
<span data-m="1440" data-d="240">Lite </span>
<span data-m="1680" data-d="400">Editor </span>
<span data-m="2080" data-d="320">makes </span>
<span data-m="2400" data-d="400">audio </span>
<span data-m="2800" data-d="240">and </span>
<span data-m="3040" data-d="400">video </span>
<span data-m="3440" data-d="240">more </span>
<span data-m="3680" data-d="480">accessible </span>
<span data-m="4160" data-d="240">through </span>
<span data-m="4400" data-d="160">the </span>
<span data-m="4560" data-d="480">creation </span>
<span data-m="5040" data-d="240">of </span>
<span data-m="5280" data-d="400">captions </span>
<span data-m="5680" data-d="240">and </span>
<span data-m="5920" data-d="500">interactive </span>
<span data-m="6640" data-d="500">transcripts. </span>
</p>
<p>
<span data-m="8240" data-d="240">The </span>
<span data-m="8480" data-d="320">first </span>
<span data-m="8800" data-d="320">step </span>
<span data-m="9130" data-d="160">is </span>
<span data-m="9290" data-d="80">to </span>
<span data-m="9370" data-d="500">transcribe </span>
<span data-m="10010" data-d="240">your </span>
<span data-m="10240" data-d="500">content. </span>
</p>This could be rendered like so:
But we can go further – a Hypertranscript is intended to be tag-agnostic, that’s just a fancy way of saying that the important parts are the attributes (data-m and data-d) rather than the tags (<span>, <p> and so on).
This allows us to add timings to things like titles:
<h5 data-m="214800">What kind of help is available for people to manage their own data?</h5>
<p>
<span data-m="218730" data-d="0" class="speaker">Jon: </span>
<span data-m="218730" data-d="480">We </span>
<span data-m="219270" data-d="450">need </span>
<span data-m="220740" data-d="180">to </span>
<span data-m="220920" data-d="360">move </span>
<span data-m="221280" data-d="120">the </span>
<span data-m="221400" data-d="420">debate </span>
<span data-m="221880" data-d="510">beyond </span>
...This might look something like this:
Clicking on the title heading takes you directly to that part in the discussion.
Note: You’ve probably noticed the captions over the above video, this is because the Hyperaudio Lite Library (which most of our open-source tools) generates captions automatically from the Hypertranscript.
You can also associate the source media file with the transcript – or various parts of a transcript. For semantic reasons we wrap a group of paragraphs representing the same piece of media with a <section> tag.
<section data-media-src="https://lab.hyperaud.io/video/BBC/education.mp4">
<h5 data-m="0">How do we make people more aware of their personal data?</h5>
<p>
<span data-m="4470" data-d="0" class="speaker">Doc: </span>
<span data-m="4470" data-d="270">We </span>
<span data-m="4740" data-d="240">have </span>
...Unless your transcript represents a mix of various sources you will usually have just one section tag. The data-media-src attribute is set to the URL of your media file.
Finally we wrap all <section>s with an <article> tag.
<article>
<section data-media-src="https://lab.hyperaud.io/video/BBC/education.mp4">
<h5 data-m="0">How do we make people more aware of their personal data?</h5>
<p>
<span data-m="4470" data-d="0" class="speaker">Doc: </span>
<span data-m="4470" data-d="270">We </span>
<span data-m="4740" data-d="240">have </span>
<span data-m="5010" data-d="300">two </span>
...
</p>
</section>
</article>And that pretty much sums up the anatomy of a Hypertranscript, you can use this format together with Hyperaudio WordPress Plugin and the hyperaudio shortcode, making it easy to tweak timings and formatting should you need to.
Our Hyperaudio Lite Editor produces HTML in Hypertranscript format, ready to use with the Hyperaudio WordPress Plugin.
Leave a Reply