Taking Audio to the Next Level with HTML5
Transcript of Taking Audio to the Next Level with HTML5
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.
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.
How to include Audio and Video with HTML5
Currently, the W3C states that supports the following audio formats.
MP3
Ogg
Wav
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).
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