Weaving Audio into the Web

Mark Boas / @maboa

Audio and Video
are Black Boxes

image courtesy Bjoertvedt, Creative Commons

Best Case Scenario

So what is Hyperaudio?

And how does it help?

Audio and video represented and powered by transcripts.

Transcripts are linked to and complement your media.

What's so special about transcripts?

Makes media part of the web!

(image courtesy Bonner Library)

Hypertranscripts in a nutshell.


Hypertranscript semantics.


Hypertranscripts are transcripts linked to the media

  • Click on a word to go to that part of the media.
  • See words highlighted as media is played.

Find and Navigate

Find and Navigate

Search and Share

Search and Share

Make and Remix

Make and Remix

Demo - Economy, Stupid

Live Demo
Presidential Debate

help us

Elephant in the Room

Photo by BitBoy. Elephant by Banksy.

How do we make Hypertranscripts?

Time Alignment Time

Answer : Chunking!

DIY - Make Great Tools!

( loosely coupled )

Simple Transcription Tool

Making and Remixing
The Hyperaudio Pad

Hyperaudio Pad Prototype

Hyperaudio Pad Prototype Demo

Hyperaudio Pad Beta

Building Blocks
We Made

  • Hyperaudio.js
  • Hyperaudio API

Everything we make is open source and MIT Licensed.


Makes it easy for you to write your own applications by getting out of the way.

Specify transcript and media and you're good to go!

Simple example

Building Blocks
We Used

  • Node.js
  • MongoDB
  • Beanstalk (moving to Kue)
  • Backbone.js
  • Popcorn.js
  • Seriously.js (prototype)

The Future's Bright

Image by Cea

Media Fragments, Web Audio API, PlaybackRate

Free Ideas

1. Video Essay System

2. Language Learning Utility

3. Courthouse Scribe

4. Conference Mixer

5. Journalist's Scratchpad

6. Make Romney Say Anything You Like

Warning : keep out of reach of children

Join Us!

Image by istolethetv

Hyperaudio Inc is non-profit and open source, we want to encourage remixing and the opening up of media.

Thanks for Listening

We're @hyperaud_io on Twitter & hyperaud.io (Web)

Yak here : http://groups.google.com/group/hyperaudio

Hack here : https://github.com/hyperaudio/

I'm @maboa or mark@hyperaud.io Ping me!

Special thanks to @slifty, @cubiq, @thepag, @gridinoc, @presentday, @dansinker, @mohamed