Seamless looping minus jquery
This commit is contained in:
parent
7b773ece82
commit
8347a95867
6 changed files with 41 additions and 64 deletions
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
|
@ -1,63 +1,42 @@
|
||||||
$(document).ready(function() {
|
var playing = false;
|
||||||
if(isMobile.any()) {
|
var control = document.getElementById('control');
|
||||||
showButton("Play");
|
var background = document.getElementById('background');
|
||||||
|
|
||||||
|
var sound = new Howl({
|
||||||
|
urls: ['assets/audio/africa.ogg', 'assets/audio/africa.m4a'],
|
||||||
|
autoplay: true,
|
||||||
|
loop: true
|
||||||
|
});
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
if(playing) {
|
||||||
|
sound.pause();
|
||||||
|
playing = false;
|
||||||
|
control.className = 'icon-play';
|
||||||
} else {
|
} else {
|
||||||
showButton("None");
|
sound.play();
|
||||||
|
playing = true;
|
||||||
|
control.className = 'icon-pause';
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
var mediaPlayer = jQuery('#player');
|
function load() {
|
||||||
|
makeItRain();
|
||||||
|
if(!isMobile.any()) {
|
||||||
|
playing = true;
|
||||||
|
control.style.visibility = 'hidden';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
mediaPlayer.jPlayer({
|
function makeItRain() {
|
||||||
solution: "html",
|
background.onload = function() {
|
||||||
supplied : 'mp3, oga, m4a',
|
|
||||||
cssSelector: {
|
|
||||||
play: '#play',
|
|
||||||
},
|
|
||||||
|
|
||||||
ready: function() {jQuery(this).jPlayer("setMedia", {
|
|
||||||
mp3: 'assets/audio/africa.mp3',
|
|
||||||
oga: 'assets/audio/africa.oga',
|
|
||||||
m4a: 'assets/audio/africa.m4a'
|
|
||||||
}).jPlayer("play");},
|
|
||||||
|
|
||||||
loop: true
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#play').click(function() {
|
|
||||||
if(isMobile.any()) {
|
|
||||||
showButton("Pause");
|
|
||||||
}
|
|
||||||
$('#player').jPlayer('play');
|
|
||||||
});
|
|
||||||
|
|
||||||
$('#pause').click(function() {
|
|
||||||
if(isMobile.any()) {
|
|
||||||
showButton("Play");
|
|
||||||
}
|
|
||||||
$('#player').jPlayer('pause');
|
|
||||||
});
|
|
||||||
|
|
||||||
var image = document.getElementById('background');
|
|
||||||
image.onload = function() {
|
|
||||||
var engine = new RainyDay({
|
var engine = new RainyDay({
|
||||||
image: this
|
image: this
|
||||||
});
|
});
|
||||||
engine.rain([ [3, 2, 2] ], 100);
|
engine.rain([ [3, 2, 2] ], 100);
|
||||||
};
|
};
|
||||||
image.crossOrigin = 'anonymous';
|
background.src = 'assets/images/africa.png';
|
||||||
});
|
background.crossOrigin = 'anonymous';
|
||||||
|
|
||||||
function showButton(mode) {
|
|
||||||
if(mode === "Play") {
|
|
||||||
$('#play').show();
|
|
||||||
$('#pause').hide();
|
|
||||||
} else if(mode == "Pause") {
|
|
||||||
$('#play').hide();
|
|
||||||
$('#pause').show();
|
|
||||||
} else {
|
|
||||||
$('#play').hide();
|
|
||||||
$('#pause').hide();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
var isMobile = {
|
var isMobile = {
|
||||||
|
|
@ -68,3 +47,4 @@ var isMobile = {
|
||||||
Windows: function() { return navigator.userAgent.match(/IEMobile/i); },
|
Windows: function() { return navigator.userAgent.match(/IEMobile/i); },
|
||||||
any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
|
any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,17 +9,17 @@ html, body, img, #container {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
|
|
||||||
z-index: 500;
|
z-index: 500;
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.button {
|
#control {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 10px;
|
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
|
||||||
position: relative;
|
position: relative;
|
||||||
top: 50%;
|
|
||||||
-webkit-transform: translateY(50%);
|
-webkit-transform: translateY(50%);
|
||||||
-ms-transform: translateY(50%);
|
-ms-transform: translateY(50%);
|
||||||
transform: translateY(50%);
|
transform: translateY(50%);
|
||||||
|
|
@ -27,5 +27,4 @@ html, body, img, #container {
|
||||||
background: rgba(0, 0, 0, .5);
|
background: rgba(0, 0, 0, .5);
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 40vw;
|
font-size: 40vw;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
16
index.html
16
index.html
|
|
@ -8,19 +8,17 @@
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<link rel="stylesheet" href="assets/styles/style.css" type="text/css" />
|
<link rel="stylesheet" href="assets/styles/style.css" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
|
<link rel="stylesheet" href="assets/styles/font.css" type="text/css" />
|
||||||
<script src="assets/scripts/rainyday.js"></script>
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
|
|
||||||
<script src="//cdnjs.cloudflare.com/ajax/libs/jplayer/2.7.1/jquery.jplayer/jquery.jplayer.js"></script>
|
|
||||||
<script src="assets/scripts/africa.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body onload="javascript:load()";>
|
||||||
<img id="background" src="assets/images/africa.png" />
|
<img id="background" src="" />
|
||||||
|
|
||||||
<div id="container">
|
<div id="container">
|
||||||
<div id="player"></div>
|
<i id="control" class="icon-pause" onclick="javascript:toggle();"></i>
|
||||||
<div id="play" class="button"><i class="icon-play"></i></div>
|
|
||||||
<div id="pause" class="button"><i class="icon-pause"></i></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script src="//cdnjs.cloudflare.com/ajax/libs/howler/1.1.17/howler.min.js"></script>
|
||||||
|
<script src="assets/scripts/rainyday.js"></script>
|
||||||
|
<script src="assets/scripts/africa.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue