Hyperaudio - LXJS 2013

328 views

Published on

What exactly is Hyperaudio and how does can it liberate your media from its shell? Mark Boas explains how to weave audio and video into the fabric of the web.

LXJS 2013, Lisbon.

Video : http://www.youtube.com/watch?v=8xiI6-mQrSc
Original Slides : http//hyperaud.io/slides/lxjs13/

Published in: Technology
  • Be the first to comment

Hyperaudio - LXJS 2013

  1. 1. HYPERAUDIO WEAVING AUDIO INTO THE FABRIC OF THE WEB Mark Boas / @maboa
  2. 2. AUDIO AND VIDEO ARE BLACK BOXES image courtesy Bjoertvedt, Creative Commons
  3. 3. CURRENT MECHANISMS
  4. 4. BEST CASE SCENARIO
  5. 5. CHALLENGES 1. 2. 3. 4. How do we find stuff? How do we expose stuff? How do we share stuff? How do we make stuff?
  6. 6. HYPERAUDIO Bringing audio up to speed ... and video with it!
  7. 7. SO WHAT IS HYPERAUDIO? Audio and video represented and powered by transcripts. Transcripts are linked to and complement your media.
  8. 8. WHAT'S SO SPECIAL ABOUT TRANSCRIPTS? Hyper all the things! Hypertranscripts!
  9. 9. IT'S ESSENTIALLY SIMPLE < dt-=135>el <a a aam"24"Hlo /> < dt-=246>ibn<a a aam"35"Lso!/>
  10. 10. 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.
  11. 11. FIND AND EXPOSE
  12. 12. SEARCH AND SHARE
  13. 13. MAKE AND REMIX
  14. 14. DEMO - IT'S THE ECONOMY STUPID 0:00
  15. 15. LIVE DEMO PRESIDENTIAL DEBATE
  16. 16. HYPERTRANSCRIPTS HELP US 1. 2. 3. 4. 5. Navigate Search Share Make accessible Create and remix content
  17. 17. ELEPHANT IN THE ROOM Photo by BitBoy. Elephant by Banksy.
  18. 18. HOW DO WE MAKE HYPERTRANSCRIPTS?
  19. 19. TIME ALIGNMENT TIME
  20. 20. DOING TRANSCRIPTION BETTER Chunking Make great DIY transcription tools!
  21. 21. AUTO-CHUNKING IS HARD LET'S GO SHOPPING!
  22. 22. MINIMAL VIABLE TRANSCRIPTION TOOL 0:00
  23. 23. MAKING AND REMIXING THE HYPERAUDIO PAD Transcript based Simple Discoverable Shareable Infinitely Remixable
  24. 24. HYPERAUDIO PAD PROTOTYPE 0:00
  25. 25. HYPERAUDIO PAD PROTOTYPE DEMO 0:00
  26. 26. HYPERAUDIO PAD BETA - (WIP)
  27. 27. SAME ORIGIN POLICY WITH VIDEO - SERIOUSLY ? seriously.js
  28. 28. SILOS Why you no love the open web?
  29. 29. THE FUTURE'S BRIGHT Image by Cea Media Fragments, Web Audio API, PlaybackRate
  30. 30. JOIN US! Image by istolethetv Hyperaudio Inc is non-profit and open source, we want
  31. 31. 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-dev/ I'm @maboa or mark@hyperaud.io Ping me! Special thanks to @moltke, @slifty, @cubiq, @thepag, @gridinoc, @presentday, @dansinker, @mohamed, @bchirls and @aulentina <3

×