Embed Size (px)
DESCRIPTION
Slides from Mark Boas talk @ codemotion roma 2014
Citation preview
Audio and Videoare Black Boxes
image courtesy Bjoertvedt, Creative Commons
Best Case Scenario
So what is Hyperaudio?And how does it help?
Audio and video represented andpowered by transcripts.
Transcripts are linked to andcomplement your media.
What's so special abouttranscripts?
Makes media part of the web!
(image courtesy )Bonner Library
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">don't </a><a data-m="718">really </a><a data-m="1579">know </a><a data-m="1940">what </a><a data-m="2353">a </a><a data-m="2766">dosier </a><a data-m="3179">is </a><a data-m="3592">in </a><a data-m="4130">this </a><a data-m="4669">context, </a><a data-m="5207">so </a><a data-m="5499">what </a><a data-m="5790">I </a><a data-m="6082">wanted </a><a data-m="6374">to </a><a data-m="6665">see </a><a data-m="6957">is </a><a data-m="7180">if </a><a data-m="7402">you </a><a data-m="7625">could </a><a data-m="7847">give </a><a data-m="8070">me </a><a data-m="8292">a </a><a data-m="8515">yes </a><a data-m="8737">or </a><a data-m="8960">no </a><a data-m="9182">answer </a><a data-m="9405">to </a><a data-m="9768">the </a><a data-m="10131">question </a><a data-m="10494">does </a><a data-m="10855">the </a><a data-m="11217">NSA </a><a data-m="11578">collect </a><a data-m="11939">any </a><a data-m="12430">type </a><a data-m="12921">of </a><a data-m="13412">data </a><a data-m="13902">at </a><a data-m="14393">all </a><a data-m="14884">on </a><a data-m="15289">millions </a><a data-m="15695">or </a><a data-m="16100">hundreds </a><a data-m="16517">of </a><a data-m="16935">millions </a><a data-m="17352">of </a><a data-m="17576">Americans?</a> </p><p><a data-m="19400">No </a><a data-m="19800">sir.</a> </p><p><a data-m="21318">It </a><a data-m="21500">does </a><a data-m="21700">not?</a> </p><p><a data-m="23600">Not </a><a data-m="23800">wittingly. </a><a data-m="24500">There </a><a data-m="26294">are </a><a data-m="26565">cases </a><a data-m="26837">where </a><a data-m="27109">they </a><a data-m="27380">could </a><a data-m="27652">inadvertently </a><a data-m="28612">perhaps </a><a data-m="29572">... </a><a data-m="30533">collect </a><a data-m="31493">but </a><a data-m="31961">not </a><a data-m="32430">... </a><a data-m="32899">wittingly.</a> </p> <footer></footer> </section>
</footer></footer></article>
Hypertranscripts aretranscripts linked to the
mediaClick 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
0:48
Live DemoPresidential Debate
Hypertranscriptshelp us
Elephant in the Room
Photo by . Elephant by .BitBoy Banksy
How do we makeHypertranscripts?
Time Alignment Time
Answer : Chunking!
DIY - Make Great Tools!
( loosely coupled )
Simple Transcription Tool
1:21
Making and RemixingThe Hyperaudio Pad
Hyperaudio Pad Prototype
6:14
Hyperaudio Pad PrototypeDemo
2:16
Hyperaudio Pad Beta
1:20
Building BlocksWe 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 bygetting out of the way.
Specify transcript and media and you're good to go!
Simple example
Building BlocksWe 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 SayAnything You Like
Warning : keep out of reachof 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 ListeningWe'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 [email protected]
Special thanks to @slifty, @cubiq, @thepag, @gridinoc, @presentday, @dansinker, @mohamed
