Book Image

HTML5 Mobile Development Cookbook

By : Shi Chuan
Book Image

HTML5 Mobile Development Cookbook

By: Shi Chuan

Overview of this book

<p>How do I create fast and responsive mobile websites that work across a range of platforms? For developers dealing with the proliferation of mobile devices each with unique screen sizes and performance limitations, it is an important question. This cookbook provides the answer. You will learn how to apply the latest HTML5 mobile web features effectively across a range of mobile devices. <br /><br />HTML5 Mobile Development Cookbook will show you how to plan, build, debug and optimize mobile websites. Apply the latest HTML5 features that are best for mobile, while discovering emerging mobile web features to integrate in your mobile sites.<br /><br />Build a rock-solid default mobile HTML template and understand mobile user interaction. Make your site fast and responsive, leveraging the uniqueness of location-based mobile features and mobile rich media. Make your mobile website perfect using debugging, performance optimization and server-side tuning. The book finishes with a sneak preview of future mobile web technologies.</p>
Table of Contents (16 chapters)
HTML5 Mobile Development Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface

Playing audio on mobile


Target browsers: iOS, Android, Blackberry, webOS, Opera Mobile, Firefox Mobile

Multimedia consists of audio and video. Playing audio on mobile can be tricky. There are a few supported audio formats on mobile browsers—Ogg Vorbis, MP3, and WAV. One issue with these formats is that all of them are not supported by all browsers.

Getting ready

Create an HTML document and name it ch06r01.html.

How to do it...

Enter the following code in the document:

<!doctype html>
<html>
<head>
<title>Mobile Cookbook</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="main">
<audio src="resources/snake_charmer.mp3" controls preload="auto" autobuffer>
</audio>
</div>
</body>
</html>

Now when rendering it in the browser, you will see a music player displayed as follows, and when you press play, the music should stream:

How it works...