<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Home Page</h1>
</div>
<div role="main" class="ui-content">
<p>Content</p>
<a href="second.html" class="ui-btn">Second Page</a>
</div>
<div data-role="footer" data-position="fixed">
<h1> <button class="play">play</button></h1>
</div>
</div>
</body>
</html>
$(document).on("pagecontainercreate pagecontainerbeforechange pagecontainerbeforetransition pagecontainerbeforeload pagebeforecreate pagecontainerload pagecreate pagecontainerbeforehide pagecontainerbeforeshow pagecontainertransition pagecontainerhide pagecontainershow pagecontainerloadfail pageremove", function(e) {
console.log(e.type);
});
$(document).on({
pagecontainercreate: function() {
if ($("audio").length === 0)
$('<audio height="0" width="0" src="http://38.96.175.97:7736/;" type="audio/x-aac"></audio>').appendTo("body").trigger("play").prop({
volume: .4
})
$(".play").text($("audio").prop("paused")?"play":"pause")
},
})
$(document).on("click", ".play", function() {
if ($("audio").prop("paused")) {
$("audio").trigger("play")
$(this).text("pause")
} else {
$("audio").trigger("pause")
$(this).text("play")
}
})
/* Styles go here */
jQuery Mobile - Single Page Model
including pagecontainer events
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-add-back-btn="true">
<h1>Second Page</h1>
</div>
<div role="main" class="ui-content">
<p>Content</p>
</div>
<div data-role="footer" data-position="fixed">
<h1> <button class="play">play</button></h1>
</div>
</div>
</body>
</html>
$(document).on("mobileinit", function (e){
/* override global settings */
});