Hyperaudio
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 linke...
What's so special about
transcripts?
Makes media part of the web!
(image courtesy )BonnerLibrary
Hypertranscripts in a nutshell.
<a data-m="12345">Ciao </a>
<a data-m="23456">Codemotion! </a>
Hypertranscript semantics.
<article>
<header></header>
<section>
<header></header>
<p><a data-m="396">I </a><a data-m="557...
Hypertranscripts are
transcripts linked to the
media
Click on a word to go to that part of the media.
See words highlighte...
Find and Navigate
Find and Navigate
Search and Share
Search and Share
Make and Remix
Make and Remix
Demo - Economy, Stupid
0:48
Live Demo
Presidential Debate
Hypertranscripts
help us
Elephant in the Room
Photo by . Elephantby .BitBoy Banksy
How do we make
Hypertranscripts?
Time Alignment Time
Answer : Chunking!
DIY - Make Great Tools!
( loosely coupled )
Simple Transcription Tool
1:21
Making and Remixing
The Hyperaudio Pad
Hyperaudio Pad Prototype
6:14
Hyperaudio Pad Prototype
Demo
2:16
Hyperaudio Pad Beta
1:20
Building Blocks
We Made
Hyperaudio.js
Hyperaudio API
Everything we make is open source and MIT Licensed.
Hyperaudio.js
Makes it easy for you to write your own applications by
getting out of the way.
Specify transcript and media...
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
0:00 / 0:25
HyperAudio Pad on The 2nd Floor of the Chattano...
Join Us!
Image by istolethetv
Hyperaudio Inc is non-profit and open source, we want to
Thanks for Listening
We're on Twitter & (Web)@hyperaud_io hyperaud.io
Yak here : http://groups.google.com/group/hyperaudio...
Hyperaudio: Weaving Audio into the Web - Boas
Upcoming SlideShare
Loading in …5
×

Hyperaudio: Weaving Audio into the Web - Boas

468 views

Published on

Slides from Mark Boas talk @ codemotion roma 2014

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

Hyperaudio: Weaving Audio into the Web - Boas

  1. 1. Hyperaudio Weaving Audio into the Web /Mark Boas @maboa
  2. 2. Audio and Video are Black Boxes image courtesy Bjoertvedt, Creative Commons
  3. 3. Best Case Scenario
  4. 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. 5. What's so special about transcripts? Makes media part of the web! (image courtesy )BonnerLibrary
  6. 6. Hypertranscripts in a nutshell. <a data-m="12345">Ciao </a> <a data-m="23456">Codemotion! </a>
  7. 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. 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. 9. Find and Navigate
  10. 10. Find and Navigate
  11. 11. Search and Share
  12. 12. Search and Share
  13. 13. Make and Remix
  14. 14. Make and Remix
  15. 15. Demo - Economy, Stupid 0:48
  16. 16. Live Demo Presidential Debate
  17. 17. Hypertranscripts help us
  18. 18. Elephant in the Room Photo by . Elephantby .BitBoy Banksy
  19. 19. How do we make Hypertranscripts?
  20. 20. Time Alignment Time Answer : Chunking!
  21. 21. DIY - Make Great Tools! ( loosely coupled )
  22. 22. Simple Transcription Tool 1:21
  23. 23. Making and Remixing The Hyperaudio Pad
  24. 24. Hyperaudio Pad Prototype 6:14
  25. 25. Hyperaudio Pad Prototype Demo 2:16
  26. 26. Hyperaudio Pad Beta 1:20
  27. 27. Building Blocks We Made Hyperaudio.js Hyperaudio API Everything we make is open source and MIT Licensed.
  28. 28. 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
  29. 29. Building Blocks We Used Node.js MongoDB Beanstalk (moving to Kue) Backbone.js Popcorn.js Seriously.js (prototype)
  30. 30. The Future's Bright Image by Cea Media Fragments, Web Audio API, PlaybackRate
  31. 31. Free Ideas
  32. 32. 1. Video Essay System
  33. 33. 2. Language Learning Utility
  34. 34. 3. Courthouse Scribe
  35. 35. 4. Conference Mixer
  36. 36. 5. Journalist's Scratchpad
  37. 37. 6. Make Romney Say Anything You Like
  38. 38. Warning : keep out of reach of children 0:00 / 0:25 HyperAudio Pad on The 2nd Floor of the Chattano...
  39. 39. Join Us! Image by istolethetv Hyperaudio Inc is non-profit and open source, we want to
  40. 40. 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

×