The document summarizes the state of HTML5 audio, including its history, current limitations, and future potential. It discusses how browser support for audio formats is fragmented, requiring multiple formats for broad compatibility. It also notes that Flash still provides the best cross-browser support and is needed as a fallback for non-HTML5 browsers. The document demonstrates an HTML5 audio player prototype built with CSS but dependent on Flash for full functionality across browsers.

1. “ Probably, Maybe, No”: The State Of HTML5 Audio

3. The Point / Things I’m Going To Talk Aboot

8. A (largely) silent web

14. A Brief History of Web Audio

18. The (Mis-)Truth Is Out There.

21. <BGSOUND> + <EMBED> Limitations

26. Which brings us to…

28. Ah, the future. So shiny.

30. So simple, too!

32. Browser format support is varied.

33. (Shock, horror.)

34. So it’s not that simple.

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.

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

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?

70. 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.

81. Use responsibly, tread carefully.

82. HTML5 Audio via JavaScript

87. 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.

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

116. A Glimpse Into The Future

120. What’s Next?

121. Mozilla Audio Data API / Webkit “Web Audio” API

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.

133. CSS3’s border-radius finally lets us draw circles.

135. We can also apply background:url() and overflow:hidden …

137. Mozilla and Webkit give us -moz-transform and –webkit-transform:rotate()

140. <input type=“range” … />

141. <input type=“crossfader”> ? ;)

142. Prototype Goals

154. The (Near) End

157. “ You see, HTML5 audio is like a shark…”

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.