Your SlideShare is downloading. ×
0
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
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

"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller

2,417

Published on

A brief history of audio on the web, its present shape as of mid-2011, where things are going, and some examples of how you might use audio today on the web.

A brief history of audio on the web, its present shape as of mid-2011, where things are going, and some examples of how you might use audio today on the web.

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,417
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
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. “ Probably, Maybe, No”: The State Of HTML5 Audio
  • 2. Hi. <ul><li>Scott Schiller (@schill) </li></ul><ul><li>HTML Technician (front-end engineering) </li></ul><ul><li>Photography / DJing / carnivorous plant enthusiast </li></ul><ul><li>Y! Photos (2005-2007,) Flickr (present) </li></ul>
  • 3. The Point / Things I’m Going To Talk Aboot
  • 4. The Point / Things I’m Going To Talk Aboot <ul><li>Where we: </li></ul><ul><li>( were / are / going ) with web audio </li></ul>
  • 5. <ul><li>How we got this far </li></ul>The Point / Things I’m Going To Talk Aboot
  • 6. <ul><li>“ Show me something shiny ” </li></ul>The Point / Things I’m Going To Talk Aboot
  • 7. <ul><li>Inform + inspire + excite -> go and make shiny things </li></ul>The Point / Things I’m Going To Talk Aboot
  • 8. A (largely) silent web
  • 9. <ul><li>Sound is one of the senses. </li></ul>
  • 10. <ul><li>Yet, it seems to be largely missing from the web. </li></ul>
  • 11. <ul><li>WTF? </li></ul>
  • 12. <ul><li>It’s complicated. </li></ul>
  • 13. <ul><li>[ anti-audio rant here ] </li></ul>
  • 14. A Brief History of Web Audio
  • 15. <ul><li><bgsound=&quot;xfiles.mid&quot; controls=&quot;console&quot; loop=&quot;5&quot;> </li></ul><ul><li><!-- inline player UI, often QuickTime --> </li></ul>A Brief History of Web Audio
  • 16. <ul><li><!-- autostart === auto-annoy, hidden evil --> </li></ul><ul><li><embed src=&quot;hamsterdance.wav&quot; autostart=true loop=true volume=100 hidden=true> </li></ul><ul><li><noembed> </li></ul><ul><li><bgsound src=&quot;hamsterdance.wav&quot;> </li></ul><ul><li></noembed> </li></ul>A Brief History of Web Audio
  • 17. <ul><li><!-- Adobe Flash embed code, 2011 --> </li></ul><ul><li><OBJECT classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553540000&quot; codebase=&quot;http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0&quot; WIDTH=&quot;550&quot; HEIGHT=&quot;400&quot; id=&quot;myMovieName&quot;> </li></ul><ul><li><PARAM NAME=movie VALUE=&quot;flashSoundPlayer.swf&quot;> </li></ul><ul><li><PARAM NAME=quality VALUE=high> </li></ul><ul><li><PARAM NAME=bgcolor VALUE=#FFFFFF> </li></ul><ul><li><EMBED href=&quot;flashSoundPlayer.swf&quot; quality=high bgcolor=#FFFFFF WIDTH=&quot;550&quot; HEIGHT=&quot;400&quot; NAME=&quot;myMovieName&quot; ALIGN=&quot;&quot; TYPE=&quot;application/x-shockwave-flash&quot; PLUGINSPAGE=&quot;http://www.macromedia.com/go/getflashplayer&quot;></EMBED> </li></ul><ul><li></OBJECT> </li></ul>A Brief History of Web Audio
  • 18. The (Mis-)Truth Is Out There.
  • 19. <ul><li>The scary part... </li></ul>
  • 20. <ul><li>These are from search results. In 2011. </li></ul>
  • 21. <BGSOUND> + <EMBED> Limitations
  • 22. <ul><li>Slow. Buggy. Inconsistent. </li></ul><BGSOUND> + <EMBED> Limitations
  • 23. <ul><li><embed> loads a plugin/helper binary </li></ul><ul><li>(QT, RealPlayer, WMP) </li></ul><BGSOUND> + <EMBED> Limitations
  • 24. <ul><li>Parameters differ. loop=true vs. loop=5 </li></ul><BGSOUND> + <EMBED> Limitations
  • 25. <ul><li><embed> sometimes scriptable via JS. Little/no API docs per plugin. (+buggy.) * </li></ul><BGSOUND> + <EMBED> Limitations * Excluding Flash 8+, documented and scriptable via ExternalInterface.
  • 26. Which brings us to…
  • 27.  
  • 28. Ah, the future. So shiny.
  • 29. <ul><li><audio src=&quot;yayhtml5.mp3&quot; controls> </li></ul><ul><li>new Audio('yayhtml5.mp3'); </li></ul>
  • 30. So simple, too!
  • 31.  
  • 32. Browser format support is varied.
  • 33. (Shock, horror.)
  • 34. So it’s not that simple.
  • 35. <ul><li><audio src=&quot;html5.mp3&quot; controls> </li></ul><ul><li><!– for non-HTML5 browsers… --> </li></ul><ul><li>Download <a href=&quot;html5.mp3&quot;>html5.mp3</a>. </li></ul><ul><li></audio> </li></ul>
  • 36. Furthermore…
  • 37. No single format is supported in all major browsers.* * Not even .WAV, as of March 2011. Boourns.
  • 38. So it’s not really that simple.
  • 39. At least two formats are required.
  • 40. <ul><li><audio controls> </li></ul><ul><li><source src=&quot;html5.mp3&quot; /> </li></ul><ul><li><source src=&quot;html5.ogg&quot; /> </li></ul><ul><li>Download <a href=&quot;html5.mp3&quot;>html5.mp3</a> or <a href=&quot;html5.ogg&quot;>html5.ogg</a> </li></ul><ul><li></audio> </li></ul>
  • 41. AND…
  • 42. Your client wants it to work in IE 6.
  • 43. (As with any new technology, there are always a few “buts”…)
  • 44. If only <audio> were as simple as <img> .
  • 45. This is unlikely, given technical, philosophical and legal complexities.
  • 46. If only <audio> were as simple as <img> . The A/V Codec Fight
  • 47. Format Wars
  • 48. <ul><li>Mozilla + Google (OGG/WEB-M) vs. Apple + Microsoft (AAC/MP4/H.264) </li></ul>Format Wars
  • 49. <ul><li>Web-M = “free”*, H.264 = IP/$$$ </li></ul>Format Wars * Mumble mumble something about MPEG-LA threatening Web-M, allegedly violating IP, etc.
  • 50. <ul><li>Developer headaches, 2+ encodings, confusion </li></ul>Format Wars
  • 51. And then there’s mobile.
  • 52. “ Special snowflake” devices
  • 53. Only one sound at a time
  • 54. *Under most circumstances. iOS 4.2 locks this down pretty well. No auto-play allowed*
  • 55. Pop-up blocker-style security model for Audio.play()
  • 56. o nfinish()-> play() allowed, otherwise, fail
  • 57. (As with any new technology, there are always a few “buts”…)
  • 58. So it’s really not that simple.
  • 59. Other Annoyances
  • 60. Occasional Safari/OS X audio load failure.
  • 61. &quot;Safari&quot; (Windows) = No HTML5 A/V support.
  • 62. Download &quot;Safari + QuickTime&quot; = HTML5 A/V.
  • 63. How is HTML5 Audio Implemented?
  • 64. <ul><li>Multiple vendors targeting W3 spec </li></ul>How is HTML5 Audio Implemented?
  • 65. <ul><li>&quot;Plug-in&quot; architecture (eg. Safari -> QT Plugin) </li></ul>How is HTML5 Audio Implemented?
  • 66. <ul><li>Per spec, user should be able to install plugins </li></ul>How is HTML5 Audio Implemented?
  • 67. <ul><li>XiphQT -> Safari (and iTunes) do OGG </li></ul>How is HTML5 Audio Implemented?
  • 68. <ul><li>Chrome, Firefox /Mozilla include F/OSS-type libraries for playback </li></ul>How is HTML5 Audio Implemented?
  • 69. <ul><li>IE 9: WMP /DirectAudio / ?? </li></ul>How is HTML5 Audio Implemented?
  • 70. Potential vs. Reality
  • 71. <ul><li>HTML5, like AJAX, is not “magical.” * </li></ul>Potential vs. Reality * Unless you’re in marketing, and then maybe it is.
  • 72. <ul><li>The potential is there. </li></ul>Potential vs. Reality
  • 73. <ul><li>We'll get there, eventually. </li></ul>Potential vs. Reality
  • 74. <ul><li>For now, bugs and quirks will likely: </li></ul>Potential vs. Reality
  • 75. <ul><li>For now, bugs and quirks will likely: </li></ul><ul><li>* Enhance job security </li></ul>Potential vs. Reality
  • 76. <ul><li>For now, bugs and quirks will likely: </li></ul><ul><li>* Enhance job security </li></ul><ul><li>* Enhance grey hair </li></ul>Potential vs. Reality
  • 77. (As with any new technology, there are always a few “buts”…) [ enhance ]
  • 78. Can I Use HTML5 Audio Today?
  • 79. (Might as well) Go for it.
  • 80.  
  • 81. Use responsibly, tread carefully.
  • 82. HTML5 Audio via JavaScript
  • 83. <ul><li>Audio().canPlayType() = </li></ul><ul><li>'probably','maybe', 'no' * </li></ul><ul><li>The most un-computer-like response I’ve ever seen. Reflects the reality of fragmented format support. </li></ul>HTML5 Audio via JavaScript * Spec changed 'no' to '', to be a non-truthy return value.
  • 84. <ul><li>Audio().canPlayType('audio/mp3'); Audio().canPlayType('audio/mpeg; codecs=&quot;mp3&quot;'); More detail should = “probably” </li></ul>HTML5 Audio via JavaScript
  • 85. <ul><li>Audio can use HTTP partials, range requests. Arbitrary seek is a benefit. </li></ul>HTML5 Audio via JavaScript
  • 86. <ul><li>A taste of events: canplay, load, ended, error, progress, timeupdate, waiting </li></ul>HTML5 Audio via JavaScript
  • 87. And How About Flash?
  • 88. <ul><li>Single-vendor/platform consistency advantage </li></ul>And How About Flash?
  • 89. <ul><li>Overall, best non-HTML5 fallback for MP3/MP4 </li></ul>And How About Flash?
  • 90. Is Flash Dead Yet?
  • 91. No.
  • 92. http://isflashdeadyet.com/
  • 93. HTML5 Isn’t Going To Kill Flash?
  • 94. No.
  • 95. Flash remains a handy fallback for non-HTML5 UAs and is the de-facto method for “secure” RTMP streaming, etc.
  • 96. So HTML5 And Flash Can Co-Exist…
  • 97. CAN I USE BOTH AT THE SAME TIME TO PLAY AUDIO ON BOTH IE 6 AND THE iPHONE, DEPENDING ON WHICH TECHNOLOGY IS AVAILABLE?
  • 98. Exactly. :)
  • 99. This is why SoundManager 2 exists.
  • 100. <ul><li>JavaScript API for sound </li></ul>SoundManager 2
  • 101. <ul><li>HTML5 Audio() and/or Flash as needed (abstracted) ~10 KB (gzip) </li></ul>SoundManager 2
  • 102. <ul><li>soundManager.onready(function() { soundManager.play( 'mySound', '/path/to/an.mp3’ ); </li></ul><ul><li>}); JS talks to Flash (ExternalInterface) or HTML5 Audio(), depending on support. Transparent to developer. </li></ul>SoundManager 2
  • 103. <ul><li>[ demos ] </li></ul>SoundManager 2
  • 104. <ul><li>Why use an abstraction? </li></ul>SoundManager 2
  • 105. <ul><li>Why use an abstraction? Support for both HTML4 + HTML5 </li></ul>SoundManager 2
  • 106. <ul><li>Why use an abstraction? Support for both HTML4 + HTML5 Normalize HTML5 differences </li></ul>SoundManager 2
  • 107. SO ULTIMATELY TO PLAY MP3/MP4 EVERYWHERE, YOU MUST HAVE FLASH?
  • 108. Correct. It’s either that, or split formats.
  • 109. THAT IS LAME!
  • 110. Unfortunately, yes. LAME is also a great free MP3 encoder. ;)
  • 111. Bonus Flash Bits
  • 112. <ul><li>Flash audio API: Well-designed, overall </li></ul>Bonus Flash Bits
  • 113. <ul><li>Revamped with Flash 8, extended in 9, moreso in 10 </li></ul>Bonus Flash Bits
  • 114. <ul><li>Some conveniences/extras beyond HTML5 audio </li></ul>Bonus Flash Bits
  • 115. <ul><li>Audio metadata access (waveform/spectrum) = nifty visualizations http://flic.kr/p/9btbyE </li></ul>Bonus Flash Bits
  • 116. A Glimpse Into The Future
  • 117. <ul><li>HTML5 audio: A good start </li></ul>A Glimpse Into The Future
  • 118. <ul><li>Meets basics for sound apps (near-Flash parity) </li></ul>A Glimpse Into The Future
  • 119. <ul><li>Pending: Bug finding, fixes, improvements and eventual stability </li></ul>A Glimpse Into The Future
  • 120. What’s Next?
  • 121. Mozilla Audio Data API / Webkit “Web Audio” API
  • 122. <ul><li>Access/manipulate raw audio bytes during playback </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  • 123. <ul><li>Generate sound entirely from JavaScript </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  • 124. <ul><li>Mozilla released their API with Firefox 4 http://videos.mozilla.org/serv/blizzard/audio-slideshow/ https://wiki.mozilla.org/Audio_Data_API </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  • 125. <ul><li>Chrome 10+ beta with &quot;Web Audio&quot; enabled in about:flags http://chromium.googlecode.com/svn/trunk/samples/audio/o3d-webgl-samples/pool.html http://chromium.googlecode.com/svn/trunk/samples/audio/simple.html </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  • 126. A Glimpse Into The Future: Mozilla/Webkit Audio APIs <ul><li>[ demo? ] </li></ul>
  • 127. Show me the shiny.
  • 128. In late 2010, Technics announced that they were ceasing production of the DJ industry hallmark, the SL-1200 turntable.
  • 129. 1972 - 2010
  • 130. As a DJ / Web Developer, It seemed appropriate to take some sort of action.
  • 131. So I started looking at CSS, which does boxes quite well.
  • 132.  
  • 133. CSS3’s border-radius finally lets us draw circles.
  • 134.  
  • 135. We can also apply background:url() and overflow:hidden …
  • 136.  
  • 137. Mozilla and Webkit give us -moz-transform and –webkit-transform:rotate()
  • 138.  
  • 139.  
  • 140. <input type=“range” … />
  • 141. <input type=“crossfader”> ? ;)
  • 142. Prototype Goals
  • 143. <ul><li>Recreate core turntable UI + behaviours in a browser. </li></ul>Prototype Goals
  • 144. <ul><li>HTML5 audio should cover most sound requirements. Load, pause/play, seek etc. </li></ul>Prototype Goals
  • 145. <ul><li>Hardware acceleration should keep it fast, too. </li></ul>Prototype Goals
  • 146. <ul><li>Initially considered canvas, went with HTML + CSS. Layout advantage, fast render still possible. </li></ul>Prototype Findings
  • 147. <ul><li>HTML5 audio works, despite browser quirks (and support issues.) The fix: Flash fallback. </li></ul>Prototype Findings
  • 148. <ul><li>Heavily dependent on acceleration. transform:rotate3d() etc. Smooth in Webkit on OS X, some audio lag on Windows. Might be OK on IE 9. Acceleration is still “new.” </li></ul>Prototype Findings
  • 149. <ul><li>[ demo ] </li></ul>Turntable Prototype
  • 150. <ul><li>How about pitch bending, scratch, EQ effects etc.? (This is where Flash 10 / Audio Data APIs come in.) </li></ul>Turntable Prototype
  • 151. <ul><li>[ demo ] </li></ul>Turntable Prototype
  • 152. <ul><li>[ demo ] </li></ul>Turntable Prototype Layout/box model mode (RGBA outline and background colors)
  • 153. <ul><li>[ demo ] </li></ul>Turntable Prototype For fun, an alternate skin (background-color, etc.)
  • 154. The (Near) End
  • 155. In Closing <ul><li>HTML5: Tons of potential. </li></ul><ul><li>Bugs to be found + fixed. </li></ul><ul><li>X-platform/device support. </li></ul><ul><li>Audio Data APIs = shiny. </li></ul>
  • 156. In Closing <ul><li>Use abstractions as needed to get similar experiences in more places. </li></ul><ul><li>My hope is that SoundManager 2 becomes redundant over time. </li></ul>
  • 157. “ You see, HTML5 audio is like a shark…”
  • 158.  
  • 159. In Closing Creative Commons-Licensed Photos &quot;Butts&quot; by arbyreed - http://flic.kr/p/jvCCh &quot;Untitled&quot; (facepalm) by Zack Sheppard - http://flic.kr/p/7gwXNt &quot;20100216_0082_1600x1067&quot; (hockey photo) by Les_Stockton - http://flic.kr/p/7DL6NU &quot;Snow Phone&quot; by WKeown - http://flic.kr/p/7Ef7Aa &quot;Safari&quot; by aditza121 - http://flic.kr/p/k7kkq &quot;Holly (and shadow) mid jump&quot; by Ali Smiles :) - http://flic.kr/p/5ZKWKY &quot;I can't believe this illustration had no caption&quot; by Ross Harmes - http://flic.kr/p/9jmjyt &quot;Water Slide&quot; by Ross Harmes - http://flic.kr/p/9jJRB7 fin.

×