my code was working fine and good. it calls javascript scripts on the html page which draws on the page and makes animations. now, what i have done now is to add the tag in order to play an audio clip automatically. the problem i have is that my animations stop drawing, but there is music playing in the background.
below is the index.html that i use to run on. it is the only html file in the project.
<!doctype html>
<html class="no-js" lang="en" manifest="./main.manifest">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> My Game </title>
<meta name="description" content="">
<meta name="author" content="SweetPotatoes">
<meta name = "viewport" content = "user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, width=device-width" />
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/game.css">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
</head>
<body>
<div id="container">
<canvas id="canvasSausage" display="block" ></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/libs/jquery-1.6.2.min.js"><\/script>')
</script>
<!-- JavaScript at the bottom for fast page loading -->
<script src="js/libs/modernizr-2.0.6.min.js"></script>
<script src="js/libs/require.1.0.8.min.js"></script>
<script src="js/libs/Draw.js"></script>
<script src="js/libs/Smile.js"></script>
<script src="js/libs/UpDpwn.js"></script>
<script src="js/mylibs/SmellyCanvas/core/canvasMain.js"></script>
<!-- scripts concatenated and minified via ant build script-->
<script defer src="js/plugins.js"></script>
<script defer src="js/script.js"></script>
<!-- end scripts-->
<script>
window._gaq = [['_setAccount', 'UAXXXXXXXX1'], ['_trackPageview'], ['_trackPageLoadTime']];
Modernizr.load({
load : ('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js'
});
</script>
<!-- Prompt IE 6 users to install Chrome Frame. Remove this if you want to support IE 6.
chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
<audio autoplay="true">
<source src="sound/Heart.mp3"></source>
audio tag not supported.
</audio>
</body>
</html>
my main.manifest
CACHE MANIFEST
# 2012-08-11
index.html
sound/Heart.mp3
Don’t use manifest while you are developing.
Manifest is like browser-caching on steroids.
There are enough problems with making changes to external .js files and then having the browser not grab them, because you’re using versions the browser saved from previous visits (when something was broken/different).
With a manifest, you’re pretty much extending that caching ability to eternity, unless you’re going to write scripts to manage the manifest.
In a word: don’t.
Build what you’re going to build, and when it’s done — at least, when it’s at a 1.0 phase, or a good, solid, public-beta…
…then start thinking about caching files for eternity in the manifest.