Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Taking Audio to the Next Level with HTML5

372 views

Published on

Presented at FITC's Web Unleashed 2016 in Toronto
by Lana Phillips Dolby

FITC produces events for digital creators in Toronto, Amsterdam, NYC and beyond
Save 10% off any of our events with discount code 'slideshare'
Check out our events at http://fitc.ca
or follow us at https://twitter.com/fitc


Overview

With Lana’s unique client history, including Lady Antebellum, Miley Cyrus and Britney Spears audio has played a huge part in her website work. In her presentation, she will not only cover some of those projects, but the impact that audio and video had on them. With the new technology from Dolby, Dolby Digital Plus, she will also be talking about what you can do to make the web just a little bit (or a lot) better with audio and HTML5.

Objective

Web developers will learn how to create a better web experience for their projects.

Target Audience

Web workers: developers, audio engineers, game developers, studios, creative

Assumed Audience Knowledge

Basic web audio formats, HTML5, Java

Five Things Audience Members Will Learn

Theater-quality audio in the browser is now possible
Why better audio is important to web developers
Which browsers support Dolby audio
Browser feature detection for audio support
Encoding tools and utilities

Published in: Internet
  • Be the first to comment

Taking Audio to the Next Level with HTML5

  1. 1. Taking Audio to the Next Level with HTML5 Lana Phillips, Technical Evangelist, Dolby Developer
  2. 2. Hi, I’m Lana Freelance Front End Engineer for Dolby Developer, Zappos, Image Punch Entertainment, and Sniff Design Studio. No, one job is not enough.
  3. 3. In the past 5 years, I’ve worked on Ecommerce Websites WebApps
  4. 4. Before I get started… Let’s talk about Audio and where we can find it
  5. 5. When I think of Audio in Web, I think of P.S. At one point, I’ve worked on all of their websites.
  6. 6. Britney Spears New Album, New Website. The UI needs to compliment the album artwork. Photography is usually key
  7. 7. Lady Antebellum Every Single had a corresponding music video. Each Artist usually has 3 or 4 music videos per album New Album, New Tour.
  8. 8. Backstreet Boys I totally spent over 3 weeks on BSB. Everything had to be perfect. My childhood was absolutely being re- lived by building their website.
  9. 9. Miley Cyrus … and then there’s this website. The pot leaf, on click, fills the browser with pot leaves. Certain Images are draggable. Certain images are fancyboxes to Music Videos. Web Archive Link I can’t sing, but I can code. At the end of the day, I played a part in connecting the fans with the music. It’s been some of the proudest projects I’ve worked on.
  10. 10. Audio, to me, is a product I need to sell. The importance of Audio in the Web cannot be understated for these clients.
  11. 11. We included their music on the site in 2 ways. iTunes
  12. 12. Other ways of including Audio on the Web
  13. 13. How to include Audio and Video with HTML5 Currently, the W3C states that supports the following audio formats. MP3 Ogg Wav
  14. 14. HTML5, meet Dolby. This is how we’re going to take audio to the next level with HTML5.
  15. 15. Who is Dolby and What is Dolby Digital Plus? Dolby is an Audio Company. Dolby Digital Plus is an advanced surround sound audio technology that enables the Dolby Audio experience across home theaters, smartphones, operating systems, and (now) browsers. The audio format is called AC-3 (EC3).
  16. 16. We can DD+ in a lot of places (not in the web)
  17. 17. Dolby Digital Plus Is in the Web You should be excited about this!
  18. 18. DD+ web examples Reflow Feisty Galaxies Re.flow Feisty Galaxies Audiograph DD Pianist Visaudio Rhone https://developer.dolby.com/tools-tech.aspx#browser
  19. 19. To Audio Publishers and Consumers No more compromises in audio quality! Get the same quality Audio as that Hollywood uses… in the browser. Anyone who still buys DVDs, just look at your DVD cover. Streaming services like Vudu and Netflix already use DD+ (not in the web… yet). Now, audio publishers (even musicians and bands like Backstreet Boys) can publish DD+ quality audio with their videos. Disclaimer Not every browser supports DD+ yet. Don’t worry, we’re working on that! File size is always a concern. It’s safe to assume that DD+ file sizes definitely can be larger than your average MP3, but not always.
  20. 20. Demo Time I’m going to show you how to include Dolby Digital Plus in your HTML5 Video. https://developer.dolby.com/tools-tech.aspx#browser https://developer.dolby.com/support.aspx#utilities http://www.w3schools.com/tags/ref_av_dom.asp
  21. 21. Questions?
  22. 22. Thank You FITC! Don’t forget to come by the Dolby Digital Booth! We have an interactive touchscreen experience for you to experiment with.

×