Taking Audio to the Next Level with HTML5

Lana Phillips, Technical Evangelist, Dolby Developer

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.

In the past 5 years, I’ve worked on

Ecommerce Websites

WebApps

Before I get started…

Let’s talk about Audio and where we can find it

When I think of Audio in Web, I think of

P.S. At one point, I’ve worked on all of their websites.

Britney Spears

New Album, New Website.

The UI needs to compliment the album artwork.

Photography is usually key

Lady Antebellum

Every Single had a corresponding music video.

Each Artist usually has 3 or 4 music videos per album

New Album, New Tour.

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.

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.

Audio, to me, is a product I need to sell. The importance of Audio in the Web cannot be understated for these clients.

We included their music on the site in 2 ways.

iTunes

Other ways of including Audio on the Web

How to include Audio and Video with HTML5

Currently, the W3C states that supports the following audio formats.

MP3

Ogg

Wav

HTML5, meet Dolby.This is how we’re going to take audio to the next level with HTML5.

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

We can DD+ in a lot of places (not in the web)

Dolby Digital Plus Is in the Web

You should be excited about this!

DD+ web examples

Reflow Feisty Galaxies

Re.flow Feisty Galaxies Audiograph

DD Pianist Visaudio Rhone

https://developer.dolby.com/tools-tech.aspx#browser

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.

Demo TimeI’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

Questions?

Thank You FITC!Don’t forget to come by the Dolby Digital Booth! We have an interactive

touchscreen experience for you to experiment with.