Slides from Mark Boas talk @ codemotion roma 2014

1. Hyperaudio
Weaving Audio into the Web
/Mark Boas @maboa

2. Audio and Video
are Black Boxes
image courtesy Bjoertvedt, Creative Commons

3. Best Case Scenario

4. 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.

5. What's so special about
transcripts?
Makes media part of the web!
(image courtesy )BonnerLibrary

6. Hypertranscripts in a nutshell.
<a data-m="12345">Ciao </a>
<a data-m="23456">Codemotion! </a>

7. Hypertranscript semantics.
<article>
<header></header>
<section>
<header></header>
<p><a data-m="396">I </a><a data-m="557">don't </a><a
<footer></footer>
</section>
</footer></footer>
</article>

8. 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.

9. Find and Navigate

10. Find and Navigate

12. Search and Share

13. Search and Share

14. Make and Remix

15. Make and Remix

16. Demo - Economy, Stupid
0:48

17. Live Demo
Presidential Debate

18. Hypertranscripts
help us

19. Elephant in the Room
Photo by . Elephantby .BitBoy Banksy

20. How do we make
Hypertranscripts?

21. Time Alignment Time
Answer : Chunking!

22. DIY - Make Great Tools!
( loosely coupled )

23. Simple Transcription Tool
1:21

24. Making and Remixing
The Hyperaudio Pad

25. Hyperaudio Pad Prototype
6:14

26. Hyperaudio Pad Prototype
Demo
2:16

27. Hyperaudio Pad Beta
1:20

28. Building Blocks
We Made
Hyperaudio.js
Hyperaudio API
Everything we make is open source and MIT Licensed.

29. Hyperaudio.js
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

30. Building Blocks
We Used
Node.js
MongoDB
Beanstalk (moving to Kue)
Backbone.js
Popcorn.js
Seriously.js (prototype)

31. The Future's Bright
Image by Cea
Media Fragments, Web Audio API, PlaybackRate

32. Free Ideas

33. 1. Video Essay System

34. 2. Language Learning Utility

35. 3. Courthouse Scribe

36. 4. Conference Mixer

37. 5. Journalist's Scratchpad

38. 6. Make Romney Say
Anything You Like

39. Warning : keep out of reach
of children
0:00 / 0:25
HyperAudio Pad on The 2nd Floor of the Chattano...

40. Join Us!
Image by istolethetv
Hyperaudio Inc is non-profit and open source, we want to

41. Thanks for Listening
We're on Twitter & (Web)@hyperaud_io hyperaud.io
Yak here : http://groups.google.com/group/hyperaudio
Hack here : https://github.com/hyperaudio-dev/
I'm or Ping me!@maboa mark@hyperaud.io
Special thanks to @slifty, @cubiq, @thepag, @gridinoc, @presentday, @dansinker, @mohamed