Waffle Hut Ambiance Using HTML5 Audio and Backstretch

Waffle Hut Ambiance Using HTML5 Audio and Backstretch

Simply Delicious

Skiing is wrapping up for the season, but there are times where I’d like to transport myself back there. One of our favorite places to visit at Bristol Mountain is their waffle hut: the Morningstar Cafe. In the style of @noisli and other similar background noise generators, I used my iPhone to capture video and audio and stitched together a similar page.

Check out the final result at morningstar.scottpdawson.com

Tools for HTML5 Audio and Background Images

I used Scott Robbin’s backstretch plug-in for jQuery and HTML5’s audio tag. I didn’t do anything here to support older browsers, but the browser coverage for HTML5 audio is pretty good, to the extent I felt it was good enough for this demo.

HTML5 Audio on iPhone

I tested this on my iPhone, and found that iOS will not play audio automatically. Per this page in the Safari Developer Library, “In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled.” So, for web (which does auto-play audio), I have a JavaScript function to fade out the player when the mouse is moved, which will invariably happen on web after the page is loaded. On mobile, I don’t do anything to the player, assuming that if the user explicitly starts the player, they will want to be able to stop it, too.

Demo of HTML5 Audio and Backstretch

Please ensure your speakers are at an appropriate level before hitting the Result tab. Audio will auto-play on desktop browsers.

Check out this Pen!

Leave a Reply

Your email address will not be published. Required fields are marked *