Making Audio a First Class Citizen of the Web.


As hypertext is to text, hyperaudio is to audio.

What makes audio so special?


Demo 1 - Martin Luther King

more info

What do we need to make audio interactive?

Simply put ...

Word time-aligned transcripts. Hypertranscripts?

  <span data-t="123">Hello</span>
  <span data-t="456">Edinburgh!</span>

more info on custom data attributes

Demo 2 - Hyperdisken

more and more

Transcripts break audio out of its black box

And make it ...


A transcript can give you a very good idea of media content.

We can scroll through a transcript and take in content more easily than we can scrub audio or video.


Transcribing your audio makes it much more findable and shareable.

Search engines can index your media and you can also search through text for keywords.


Now we have a good grip on our content's word timings, we can allow people to link to excerpts of audio and their associated text.

We can add social mechanisms.

Language Switching

Precise timings mean we can switch languages on-the-fly.

Use Case : language learning applications.

Demo 3 - RadioLab

more info




Popcorn.js + jPlayer

A winning combo?

jPlayer Popcorn Player

Going further with text

Demo 4 - Radio24Syv

more info

The elephant in the room

How do we create word-aligned timed transcripts?

Third party transcription services (paid) $

Third party transcription services (free) ☮


As most video has an audio track, we can apply the same techniques we use to control audio, to video.

Demo 5 - US Presidential Debates

Demo 6 - State of the Union Speech


When we synchronise audio with text we can manipulate audio in the same way we can text.

Demo 7 - Hyperaudio Pad

screen cam and github

Hyperaudio Pad

Nothing left on cutting room floor.

Hyperaudio Pad Applications

Hyperaudio Ecosystem

... and now for something completely different.

We've talked a lot about speech-to-text.

What about text-to-speech?

Introducing speak.js

Demo 7 - Perceptive Media


Dynamically generated audio

We are starting to see the ability to dynamically generate audio content.

The Web Audio API

The Web Audio API is a high-level JavaScript API for processing and synthesizing audio in web applications.

It takes a node based approach, each node performs an audio function and connected together to define the overall audio rendering.

It can be as simple as this ...

Source : Getting Started with Web Audio API (HTML5Rocks)

or as complex as this ...

Source : Web Audio API spec (w3.org)

Web Audio API - Three Audio


What's around the corner?

Lots of new media related web technology:


A technology to facilitate P2P comms.


Useful for ..

Opus Audio Codec

Live Streaming is Possible

Media Fragments

The three main parts are :

Web Speech API


Mobile is Getting Better

But watch out for older mobile browsers.

Web Native Audio & Video - The Stats

source: statcounter.com

The Future is Now

The audio element is very well supported, already we can break audio out of it's black box and integrate into our web experiences in new ways and forms.

Very soon we will have cross-browser support for advanced audio and real-time communications.

source: statcounter.com


Thanks for listening, you can find us on...

More info Hyperaudio Google Group