Your SlideShare is downloading. ×
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Hyperaudio: Weaving Audio into the Web - Boas
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hyperaudio: Weaving Audio into the Web - Boas

232

Published on

Slides from Mark Boas talk @ codemotion roma 2014

Slides from Mark Boas talk @ codemotion roma 2014

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
232
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 11. Search and Share
  • 12. Search and Share
  • 13. Make and Remix
  • 14. Make and Remix
  • 15. Demo - Economy, Stupid 0:48
  • 16. Live Demo Presidential Debate
  • 17. Hypertranscripts help us
  • 18. Elephant in the Room Photo by . Elephantby .BitBoy Banksy
  • 19. How do we make Hypertranscripts?
  • 20. Time Alignment Time Answer : Chunking!
  • 21. DIY - Make Great Tools! ( loosely coupled )
  • 22. Simple Transcription Tool 1:21
  • 23. Making and Remixing The Hyperaudio Pad
  • 24. Hyperaudio Pad Prototype 6:14
  • 25. Hyperaudio Pad Prototype Demo 2:16
  • 26. Hyperaudio Pad Beta 1:20
  • 27. Building Blocks We Made Hyperaudio.js Hyperaudio API Everything we make is open source and MIT Licensed.
  • 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. Building Blocks We Used Node.js MongoDB Beanstalk (moving to Kue) Backbone.js Popcorn.js Seriously.js (prototype)
  • 30. The Future's Bright Image by Cea Media Fragments, Web Audio API, PlaybackRate
  • 31. Free Ideas
  • 32. 1. Video Essay System
  • 33. 2. Language Learning Utility
  • 34. 3. Courthouse Scribe
  • 35. 4. Conference Mixer
  • 36. 5. Journalist's Scratchpad
  • 37. 6. Make Romney Say Anything You Like
  • 38. Warning : keep out of reach of children 0:00 / 0:25 HyperAudio Pad on The 2nd Floor of the Chattano...
  • 39. Join Us! Image by istolethetv Hyperaudio Inc is non-profit and open source, we want to
  • 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

×