Your SlideShare is downloading. ×
“ Probably, Maybe, No”: The State Of HTML5 Audio
Hi. <ul><li>Scott Schiller (@schill) </li></ul><ul><li>HTML Technician (front-end engineering) </li></ul><ul><li>Photograp...
The Point / Things I’m Going To Talk Aboot
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><li>How we got this far </li></ul>The Point / Things I’m Going To Talk Aboot
<ul><li>“ Show me something  shiny ” </li></ul>The Point / Things I’m Going To Talk Aboot
<ul><li>Inform + inspire + excite ->  go and make shiny things </li></ul>The Point / Things I’m Going To Talk Aboot
A (largely) silent  web
<ul><li>Sound is one of the senses. </li></ul>
<ul><li>Yet, it seems to be largely missing from the web. </li></ul>
<ul><li>WTF? </li></ul>
<ul><li>It’s complicated. </li></ul>
<ul><li>[ anti-audio rant here ] </li></ul>
A Brief History of Web Audio
<ul><li><bgsound=&quot;xfiles.mid&quot; controls=&quot;console&quot; loop=&quot;5&quot;> </li></ul><ul><li><!-- inline pla...
<ul><li><!-- autostart === auto-annoy, hidden evil --> </li></ul><ul><li><embed src=&quot;hamsterdance.wav&quot; autostart...
<ul><li><!-- Adobe Flash embed code, 2011 --> </li></ul><ul><li><OBJECT classid=&quot;clsid:D27CDB6E-AE6D-11cf-96B8-444553...
The (Mis-)Truth Is Out There.
<ul><li>The scary part... </li></ul>
<ul><li>These are from search results. In 2011. </li></ul>
<BGSOUND> + <EMBED>  Limitations
<ul><li>Slow. Buggy. Inconsistent. </li></ul><BGSOUND> + <EMBED>  Limitations
<ul><li><embed>  loads a plugin/helper binary </li></ul><ul><li>(QT, RealPlayer, WMP) </li></ul><BGSOUND> + <EMBED>  Limit...
<ul><li>Parameters differ.  loop=true vs. loop=5 </li></ul><BGSOUND> + <EMBED>  Limitations
<ul><li><embed>  sometimes scriptable via JS. Little/no API docs per plugin. (+buggy.) * </li></ul><BGSOUND> + <EMBED>  Li...
Which brings us to…
 
Ah, the future. So shiny.
<ul><li><audio src=&quot;yayhtml5.mp3&quot; controls> </li></ul><ul><li>new Audio('yayhtml5.mp3'); </li></ul>
So simple, too!
 
Browser format support is varied.
(Shock, horror.)
So it’s not that simple.
<ul><li><audio src=&quot;html5.mp3&quot; controls> </li></ul><ul><li><!– for non-HTML5 browsers… --> </li></ul><ul><li>Dow...
Furthermore…
No single format is supported in all major browsers.* * Not even .WAV, as of March 2011. Boourns.
So it’s not  really  that simple.
At least  two  formats are required.
<ul><li><audio controls> </li></ul><ul><li><source src=&quot;html5.mp3&quot; /> </li></ul><ul><li><source src=&quot;html5....
AND…
Your client wants it to work in IE 6.
(As with any new technology, there are always a few “buts”…)
If only  <audio>  were as simple as  <img> .
This is unlikely, given technical, philosophical and legal complexities.
If only  <audio>  were as simple as  <img> . The A/V Codec Fight
Format Wars
<ul><li>Mozilla + Google (OGG/WEB-M) vs. Apple + Microsoft (AAC/MP4/H.264) </li></ul>Format Wars
<ul><li>Web-M = “free”*, H.264 = IP/$$$ </li></ul>Format Wars *  Mumble mumble something about MPEG-LA threatening Web-M, ...
<ul><li>Developer headaches, 2+ encodings, confusion </li></ul>Format Wars
And then there’s mobile.
“ Special snowflake” devices
Only one sound at a time
*Under most circumstances. iOS 4.2 locks this down pretty well. No auto-play allowed*
Pop-up blocker-style security model for  Audio.play()
o nfinish()-> play()  allowed, otherwise, fail
(As with any new technology, there are always a few “buts”…)
So it’s  really  not that simple.
Other Annoyances
Occasional Safari/OS X audio load failure.
&quot;Safari&quot; (Windows) = No HTML5 A/V support.
Download &quot;Safari + QuickTime&quot; = HTML5 A/V.
How is HTML5 Audio Implemented?
<ul><li>Multiple vendors targeting W3 spec </li></ul>How is HTML5 Audio Implemented?
<ul><li>&quot;Plug-in&quot; architecture (eg. Safari -> QT Plugin) </li></ul>How is HTML5 Audio Implemented?
<ul><li>Per spec, user should be able to install plugins </li></ul>How is HTML5 Audio Implemented?
<ul><li>XiphQT -> Safari (and iTunes) do OGG </li></ul>How is HTML5 Audio Implemented?
<ul><li>Chrome, Firefox /Mozilla include  F/OSS-type libraries for playback </li></ul>How is HTML5 Audio Implemented?
<ul><li>IE 9: WMP /DirectAudio / ?? </li></ul>How is HTML5 Audio Implemented?
Potential vs. Reality
<ul><li>HTML5, like AJAX, is not “magical.” * </li></ul>Potential vs. Reality * Unless you’re in marketing, and then maybe...
<ul><li>The potential is there. </li></ul>Potential vs. Reality
<ul><li>We'll get there, eventually. </li></ul>Potential vs. Reality
<ul><li>For now, bugs and quirks will likely: </li></ul>Potential vs. Reality
<ul><li>For now, bugs and quirks will likely: </li></ul><ul><li>* Enhance job security </li></ul>Potential vs. Reality
<ul><li>For now, bugs and quirks will likely: </li></ul><ul><li>* Enhance job security </li></ul><ul><li>* Enhance grey ha...
(As with any new technology, there are always a few “buts”…) [ enhance ]
Can I Use HTML5 Audio Today?
(Might as well) Go for it.
 
Use responsibly, tread carefully.
HTML5 Audio via JavaScript
<ul><li>Audio().canPlayType() = </li></ul><ul><li>'probably','maybe', 'no' * </li></ul><ul><li>The most un-computer-like r...
<ul><li>Audio().canPlayType('audio/mp3'); Audio().canPlayType('audio/mpeg; codecs=&quot;mp3&quot;'); More detail should = ...
<ul><li>Audio can use HTTP partials, range requests. Arbitrary seek is a benefit. </li></ul>HTML5 Audio via JavaScript
<ul><li>A taste of events: canplay, load, ended, error, progress, timeupdate, waiting </li></ul>HTML5 Audio via JavaScript
And How About Flash?
<ul><li>Single-vendor/platform consistency advantage </li></ul>And How About Flash?
<ul><li>Overall, best non-HTML5 fallback for MP3/MP4 </li></ul>And How About Flash?
Is Flash Dead Yet?
No.
http://isflashdeadyet.com/
HTML5 Isn’t Going To Kill Flash?
No.
Flash remains a handy fallback for non-HTML5 UAs and is the de-facto method for “secure” RTMP streaming, etc.
So HTML5 And Flash Can Co-Exist…
CAN I USE BOTH AT THE SAME TIME TO PLAY AUDIO ON BOTH IE 6 AND THE iPHONE, DEPENDING ON WHICH TECHNOLOGY IS AVAILABLE?
Exactly. :)
This is why SoundManager 2 exists.
<ul><li>JavaScript API for sound </li></ul>SoundManager 2
<ul><li>HTML5  Audio() and/or Flash as needed (abstracted) ~10 KB (gzip) </li></ul>SoundManager 2
<ul><li>soundManager.onready(function() {   soundManager.play(   'mySound',   '/path/to/an.mp3’   ); </li></ul><ul><li>});...
<ul><li>[ demos ] </li></ul>SoundManager 2
<ul><li>Why use an abstraction? </li></ul>SoundManager 2
<ul><li>Why use an abstraction? Support for both HTML4 + HTML5 </li></ul>SoundManager 2
<ul><li>Why use an abstraction? Support for both HTML4 + HTML5 Normalize HTML5 differences </li></ul>SoundManager 2
SO ULTIMATELY TO PLAY MP3/MP4 EVERYWHERE, YOU MUST HAVE FLASH?
Correct. It’s either that, or split formats.
THAT IS LAME!
Unfortunately, yes. LAME is also a great free MP3 encoder. ;)
Bonus Flash Bits
<ul><li>Flash audio API: Well-designed, overall </li></ul>Bonus Flash Bits
<ul><li>Revamped with Flash 8, extended in 9, moreso in 10 </li></ul>Bonus Flash Bits
<ul><li>Some conveniences/extras beyond HTML5 audio </li></ul>Bonus Flash Bits
<ul><li>Audio metadata access (waveform/spectrum) = nifty visualizations http://flic.kr/p/9btbyE </li></ul>Bonus Flash Bits
A Glimpse Into The Future
<ul><li>HTML5 audio: A good start </li></ul>A Glimpse Into The Future
<ul><li>Meets basics for sound apps (near-Flash parity) </li></ul>A Glimpse Into The Future
<ul><li>Pending: Bug finding, fixes, improvements and eventual stability </li></ul>A Glimpse Into The Future
What’s Next?
Mozilla Audio Data API / Webkit “Web Audio” API
<ul><li>Access/manipulate raw audio bytes during playback </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
<ul><li>Generate sound entirely from JavaScript </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
<ul><li>Mozilla released their API with Firefox 4 http://videos.mozilla.org/serv/blizzard/audio-slideshow/ https://wiki.mo...
<ul><li>Chrome 10+ beta with &quot;Web Audio&quot; enabled in about:flags http://chromium.googlecode.com/svn/trunk/samples...
A Glimpse Into The Future: Mozilla/Webkit Audio APIs <ul><li>[ demo? ] </li></ul>
Show me the shiny.
In late 2010, Technics announced that they were ceasing production of the DJ industry hallmark, the SL-1200 turntable.
1972 - 2010
As a DJ / Web Developer, It seemed appropriate to take some sort of action.
So I started looking at CSS, which does boxes quite well.
 
CSS3’s  border-radius  finally lets us draw circles.
 
We can also apply background:url()  and  overflow:hidden …
 
Mozilla and Webkit give us  -moz-transform  and  –webkit-transform:rotate()
 
 
<input type=“range” … />
<input type=“crossfader”> ? ;)
Prototype Goals
<ul><li>Recreate core turntable UI + behaviours in a browser. </li></ul>Prototype Goals
<ul><li>HTML5 audio should cover most sound requirements. Load, pause/play, seek etc. </li></ul>Prototype Goals
<ul><li>Hardware acceleration should keep it fast, too. </li></ul>Prototype Goals
<ul><li>Initially considered canvas, went with HTML + CSS. Layout advantage, fast render still possible. </li></ul>Prototy...
<ul><li>HTML5 audio works, despite browser quirks (and support issues.) The fix: Flash fallback. </li></ul>Prototype Findi...
<ul><li>Heavily dependent on acceleration. transform:rotate3d() etc. Smooth in Webkit on OS X, some audio lag on Windows. ...
<ul><li>[ demo ] </li></ul>Turntable Prototype
<ul><li>How about pitch bending, scratch, EQ effects etc.? (This is where Flash 10 / Audio Data APIs come in.) </li></ul>T...
<ul><li>[ demo ] </li></ul>Turntable Prototype
<ul><li>[ demo ] </li></ul>Turntable Prototype Layout/box model mode (RGBA outline and background colors)
<ul><li>[ demo ] </li></ul>Turntable Prototype For fun, an alternate skin (background-color, etc.)
The (Near) End
In Closing <ul><li>HTML5: Tons of potential. </li></ul><ul><li>Bugs to be found + fixed. </li></ul><ul><li>X-platform/devi...
In Closing <ul><li>Use abstractions as needed to get similar experiences in more places. </li></ul><ul><li>My hope is that...
“ You see, HTML5 audio is like a shark…”
 
In Closing Creative Commons-Licensed Photos &quot;Butts&quot; by arbyreed - http://flic.kr/p/jvCCh &quot;Untitled&quot; (f...
"Probably, Maybe, No: The State of HTML5 Audio" - Scott Schiller
Upcoming SlideShare
Loading in...5
×

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

2,434

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.

1 Comment
2 Likes
Statistics
Notes
No Downloads
Views
Total Views
2,434
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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

  1. 1. “ Probably, Maybe, No”: The State Of HTML5 Audio
  2. 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. 3. The Point / Things I’m Going To Talk Aboot
  4. 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. 5. <ul><li>How we got this far </li></ul>The Point / Things I’m Going To Talk Aboot
  6. 6. <ul><li>“ Show me something shiny ” </li></ul>The Point / Things I’m Going To Talk Aboot
  7. 7. <ul><li>Inform + inspire + excite -> go and make shiny things </li></ul>The Point / Things I’m Going To Talk Aboot
  8. 8. A (largely) silent web
  9. 9. <ul><li>Sound is one of the senses. </li></ul>
  10. 10. <ul><li>Yet, it seems to be largely missing from the web. </li></ul>
  11. 11. <ul><li>WTF? </li></ul>
  12. 12. <ul><li>It’s complicated. </li></ul>
  13. 13. <ul><li>[ anti-audio rant here ] </li></ul>
  14. 14. A Brief History of Web Audio
  15. 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. 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. 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. 18. The (Mis-)Truth Is Out There.
  19. 19. <ul><li>The scary part... </li></ul>
  20. 20. <ul><li>These are from search results. In 2011. </li></ul>
  21. 21. <BGSOUND> + <EMBED> Limitations
  22. 22. <ul><li>Slow. Buggy. Inconsistent. </li></ul><BGSOUND> + <EMBED> Limitations
  23. 23. <ul><li><embed> loads a plugin/helper binary </li></ul><ul><li>(QT, RealPlayer, WMP) </li></ul><BGSOUND> + <EMBED> Limitations
  24. 24. <ul><li>Parameters differ. loop=true vs. loop=5 </li></ul><BGSOUND> + <EMBED> Limitations
  25. 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. 26. Which brings us to…
  27. 28. Ah, the future. So shiny.
  28. 29. <ul><li><audio src=&quot;yayhtml5.mp3&quot; controls> </li></ul><ul><li>new Audio('yayhtml5.mp3'); </li></ul>
  29. 30. So simple, too!
  30. 32. Browser format support is varied.
  31. 33. (Shock, horror.)
  32. 34. So it’s not that simple.
  33. 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>
  34. 36. Furthermore…
  35. 37. No single format is supported in all major browsers.* * Not even .WAV, as of March 2011. Boourns.
  36. 38. So it’s not really that simple.
  37. 39. At least two formats are required.
  38. 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>
  39. 41. AND…
  40. 42. Your client wants it to work in IE 6.
  41. 43. (As with any new technology, there are always a few “buts”…)
  42. 44. If only <audio> were as simple as <img> .
  43. 45. This is unlikely, given technical, philosophical and legal complexities.
  44. 46. If only <audio> were as simple as <img> . The A/V Codec Fight
  45. 47. Format Wars
  46. 48. <ul><li>Mozilla + Google (OGG/WEB-M) vs. Apple + Microsoft (AAC/MP4/H.264) </li></ul>Format Wars
  47. 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.
  48. 50. <ul><li>Developer headaches, 2+ encodings, confusion </li></ul>Format Wars
  49. 51. And then there’s mobile.
  50. 52. “ Special snowflake” devices
  51. 53. Only one sound at a time
  52. 54. *Under most circumstances. iOS 4.2 locks this down pretty well. No auto-play allowed*
  53. 55. Pop-up blocker-style security model for Audio.play()
  54. 56. o nfinish()-> play() allowed, otherwise, fail
  55. 57. (As with any new technology, there are always a few “buts”…)
  56. 58. So it’s really not that simple.
  57. 59. Other Annoyances
  58. 60. Occasional Safari/OS X audio load failure.
  59. 61. &quot;Safari&quot; (Windows) = No HTML5 A/V support.
  60. 62. Download &quot;Safari + QuickTime&quot; = HTML5 A/V.
  61. 63. How is HTML5 Audio Implemented?
  62. 64. <ul><li>Multiple vendors targeting W3 spec </li></ul>How is HTML5 Audio Implemented?
  63. 65. <ul><li>&quot;Plug-in&quot; architecture (eg. Safari -> QT Plugin) </li></ul>How is HTML5 Audio Implemented?
  64. 66. <ul><li>Per spec, user should be able to install plugins </li></ul>How is HTML5 Audio Implemented?
  65. 67. <ul><li>XiphQT -> Safari (and iTunes) do OGG </li></ul>How is HTML5 Audio Implemented?
  66. 68. <ul><li>Chrome, Firefox /Mozilla include F/OSS-type libraries for playback </li></ul>How is HTML5 Audio Implemented?
  67. 69. <ul><li>IE 9: WMP /DirectAudio / ?? </li></ul>How is HTML5 Audio Implemented?
  68. 70. Potential vs. Reality
  69. 71. <ul><li>HTML5, like AJAX, is not “magical.” * </li></ul>Potential vs. Reality * Unless you’re in marketing, and then maybe it is.
  70. 72. <ul><li>The potential is there. </li></ul>Potential vs. Reality
  71. 73. <ul><li>We'll get there, eventually. </li></ul>Potential vs. Reality
  72. 74. <ul><li>For now, bugs and quirks will likely: </li></ul>Potential vs. Reality
  73. 75. <ul><li>For now, bugs and quirks will likely: </li></ul><ul><li>* Enhance job security </li></ul>Potential vs. Reality
  74. 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
  75. 77. (As with any new technology, there are always a few “buts”…) [ enhance ]
  76. 78. Can I Use HTML5 Audio Today?
  77. 79. (Might as well) Go for it.
  78. 81. Use responsibly, tread carefully.
  79. 82. HTML5 Audio via JavaScript
  80. 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.
  81. 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
  82. 85. <ul><li>Audio can use HTTP partials, range requests. Arbitrary seek is a benefit. </li></ul>HTML5 Audio via JavaScript
  83. 86. <ul><li>A taste of events: canplay, load, ended, error, progress, timeupdate, waiting </li></ul>HTML5 Audio via JavaScript
  84. 87. And How About Flash?
  85. 88. <ul><li>Single-vendor/platform consistency advantage </li></ul>And How About Flash?
  86. 89. <ul><li>Overall, best non-HTML5 fallback for MP3/MP4 </li></ul>And How About Flash?
  87. 90. Is Flash Dead Yet?
  88. 91. No.
  89. 92. http://isflashdeadyet.com/
  90. 93. HTML5 Isn’t Going To Kill Flash?
  91. 94. No.
  92. 95. Flash remains a handy fallback for non-HTML5 UAs and is the de-facto method for “secure” RTMP streaming, etc.
  93. 96. So HTML5 And Flash Can Co-Exist…
  94. 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?
  95. 98. Exactly. :)
  96. 99. This is why SoundManager 2 exists.
  97. 100. <ul><li>JavaScript API for sound </li></ul>SoundManager 2
  98. 101. <ul><li>HTML5 Audio() and/or Flash as needed (abstracted) ~10 KB (gzip) </li></ul>SoundManager 2
  99. 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
  100. 103. <ul><li>[ demos ] </li></ul>SoundManager 2
  101. 104. <ul><li>Why use an abstraction? </li></ul>SoundManager 2
  102. 105. <ul><li>Why use an abstraction? Support for both HTML4 + HTML5 </li></ul>SoundManager 2
  103. 106. <ul><li>Why use an abstraction? Support for both HTML4 + HTML5 Normalize HTML5 differences </li></ul>SoundManager 2
  104. 107. SO ULTIMATELY TO PLAY MP3/MP4 EVERYWHERE, YOU MUST HAVE FLASH?
  105. 108. Correct. It’s either that, or split formats.
  106. 109. THAT IS LAME!
  107. 110. Unfortunately, yes. LAME is also a great free MP3 encoder. ;)
  108. 111. Bonus Flash Bits
  109. 112. <ul><li>Flash audio API: Well-designed, overall </li></ul>Bonus Flash Bits
  110. 113. <ul><li>Revamped with Flash 8, extended in 9, moreso in 10 </li></ul>Bonus Flash Bits
  111. 114. <ul><li>Some conveniences/extras beyond HTML5 audio </li></ul>Bonus Flash Bits
  112. 115. <ul><li>Audio metadata access (waveform/spectrum) = nifty visualizations http://flic.kr/p/9btbyE </li></ul>Bonus Flash Bits
  113. 116. A Glimpse Into The Future
  114. 117. <ul><li>HTML5 audio: A good start </li></ul>A Glimpse Into The Future
  115. 118. <ul><li>Meets basics for sound apps (near-Flash parity) </li></ul>A Glimpse Into The Future
  116. 119. <ul><li>Pending: Bug finding, fixes, improvements and eventual stability </li></ul>A Glimpse Into The Future
  117. 120. What’s Next?
  118. 121. Mozilla Audio Data API / Webkit “Web Audio” API
  119. 122. <ul><li>Access/manipulate raw audio bytes during playback </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  120. 123. <ul><li>Generate sound entirely from JavaScript </li></ul>A Glimpse Into The Future: Mozilla/Webkit Audio APIs
  121. 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
  122. 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
  123. 126. A Glimpse Into The Future: Mozilla/Webkit Audio APIs <ul><li>[ demo? ] </li></ul>
  124. 127. Show me the shiny.
  125. 128. In late 2010, Technics announced that they were ceasing production of the DJ industry hallmark, the SL-1200 turntable.
  126. 129. 1972 - 2010
  127. 130. As a DJ / Web Developer, It seemed appropriate to take some sort of action.
  128. 131. So I started looking at CSS, which does boxes quite well.
  129. 133. CSS3’s border-radius finally lets us draw circles.
  130. 135. We can also apply background:url() and overflow:hidden …
  131. 137. Mozilla and Webkit give us -moz-transform and –webkit-transform:rotate()
  132. 140. <input type=“range” … />
  133. 141. <input type=“crossfader”> ? ;)
  134. 142. Prototype Goals
  135. 143. <ul><li>Recreate core turntable UI + behaviours in a browser. </li></ul>Prototype Goals
  136. 144. <ul><li>HTML5 audio should cover most sound requirements. Load, pause/play, seek etc. </li></ul>Prototype Goals
  137. 145. <ul><li>Hardware acceleration should keep it fast, too. </li></ul>Prototype Goals
  138. 146. <ul><li>Initially considered canvas, went with HTML + CSS. Layout advantage, fast render still possible. </li></ul>Prototype Findings
  139. 147. <ul><li>HTML5 audio works, despite browser quirks (and support issues.) The fix: Flash fallback. </li></ul>Prototype Findings
  140. 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
  141. 149. <ul><li>[ demo ] </li></ul>Turntable Prototype
  142. 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
  143. 151. <ul><li>[ demo ] </li></ul>Turntable Prototype
  144. 152. <ul><li>[ demo ] </li></ul>Turntable Prototype Layout/box model mode (RGBA outline and background colors)
  145. 153. <ul><li>[ demo ] </li></ul>Turntable Prototype For fun, an alternate skin (background-color, etc.)
  146. 154. The (Near) End
  147. 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>
  148. 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>
  149. 157. “ You see, HTML5 audio is like a shark…”
  150. 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.

×