hyperaudio: weaving audio into the web - boas
DESCRIPTION
Slides from Mark Boas talk @ codemotion roma 2014TRANSCRIPT
![Page 2: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/2.jpg)
Audio and Videoare Black Boxes
image courtesy Bjoertvedt, Creative Commons
![Page 3: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/3.jpg)
Best Case Scenario
![Page 4: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/4.jpg)
So what is Hyperaudio?And how does it help?
Audio and video represented andpowered by transcripts.
Transcripts are linked to andcomplement your media.
![Page 5: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/5.jpg)
What's so special abouttranscripts?
Makes media part of the web!
(image courtesy )Bonner Library
![Page 6: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/6.jpg)
Hypertranscripts in a nutshell.
<a data-m="12345">Ciao </a><a data-m="23456">Codemotion! </a>
![Page 7: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/7.jpg)
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>
![Page 8: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/8.jpg)
Hypertranscripts aretranscripts linked to the
mediaClick on a word to go to that part of the media.
See words highlighted as media is played.
![Page 9: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/9.jpg)
Find and Navigate
![Page 10: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/10.jpg)
Find and Navigate
![Page 12: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/12.jpg)
Search and Share
![Page 13: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/13.jpg)
Search and Share
![Page 14: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/14.jpg)
Make and Remix
![Page 15: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/15.jpg)
Make and Remix
![Page 16: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/16.jpg)
Demo - Economy, Stupid
0:48
![Page 17: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/17.jpg)
Live DemoPresidential Debate
![Page 18: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/18.jpg)
Hypertranscriptshelp us
![Page 19: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/19.jpg)
Elephant in the Room
Photo by . Elephant by .BitBoy Banksy
![Page 20: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/20.jpg)
How do we makeHypertranscripts?
![Page 21: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/21.jpg)
Time Alignment Time
Answer : Chunking!
![Page 22: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/22.jpg)
DIY - Make Great Tools!
( loosely coupled )
![Page 23: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/23.jpg)
Simple Transcription Tool
1:21
![Page 24: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/24.jpg)
Making and RemixingThe Hyperaudio Pad
![Page 25: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/25.jpg)
Hyperaudio Pad Prototype
6:14
![Page 26: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/26.jpg)
Hyperaudio Pad PrototypeDemo
2:16
![Page 27: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/27.jpg)
Hyperaudio Pad Beta
1:20
![Page 28: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/28.jpg)
Building BlocksWe Made
Hyperaudio.js
Hyperaudio API
Everything we make is open source and MIT Licensed.
![Page 29: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/29.jpg)
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
![Page 30: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/30.jpg)
Building BlocksWe Used
Node.js
MongoDB
Beanstalk (moving to Kue)
Backbone.js
Popcorn.js
Seriously.js (prototype)
![Page 31: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/31.jpg)
The Future's Bright
Image by Cea
Media Fragments, Web Audio API, PlaybackRate
![Page 32: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/32.jpg)
Free Ideas
![Page 33: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/33.jpg)
1. Video Essay System
![Page 34: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/34.jpg)
2. Language Learning Utility
![Page 35: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/35.jpg)
3. Courthouse Scribe
![Page 36: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/36.jpg)
4. Conference Mixer
![Page 37: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/37.jpg)
5. Journalist's Scratchpad
![Page 38: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/38.jpg)
6. Make Romney SayAnything You Like
![Page 39: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/39.jpg)
Warning : keep out of reachof children
0:00 / 0:25
HyperAudio Pad on The 2nd Floor of the Chattano...
![Page 40: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/40.jpg)
Join Us!
Image by istolethetv
Hyperaudio Inc is non-profit and open source, we want to
![Page 41: Hyperaudio: Weaving Audio into the Web - Boas](https://reader034.vdocuments.us/reader034/viewer/2022052619/55514686b4c905bd1c8b503a/html5/thumbnails/41.jpg)
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