atomaka/playafri.ca
1
0
Fork 0
Code Releases Activity

Better dealing with autoplay

Browse source
This commit is contained in:
Andrew Tomaka 2014-09-25 13:40:32 -04:00
parent 8347a95867
commit 19f4316e65
3 changed files with 17 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
assets/scripts/africa.js
View file

@ -1,11 +1,13 @@
var playing = false; var playing = false;
var control = document.getElementById('control'); var control = document.getElementById('control');
var background = document.getElementById('background'); var background = document.getElementById('background');
var sound = new Howl({ var sound = new Howl({
urls: ['assets/audio/africa.ogg', 'assets/audio/africa.m4a'], urls: ['assets/audio/africa.ogg', 'assets/audio/africa.m4a'],
autoplay: true, autoplay: true,
loop: true loop: true,
onload: function() {
setTimeout(makeItPlay, 5);
}
}); });
function toggle() { function toggle() {
@ -22,10 +24,6 @@ function toggle() {
function load() { function load() {
makeItRain(); makeItRain();
if(!isMobile.any()) {
playing = true;
control.style.visibility = 'hidden';
}
} }
function makeItRain() { function makeItRain() {
@ -39,12 +37,9 @@ function makeItRain() {
background.crossOrigin = 'anonymous'; background.crossOrigin = 'anonymous';
} }
var isMobile = { var makeItPlay = function() {
Android: function() { return navigator.userAgent.match(/Android/i); }, if(sound.pos() === 0) {
BlackBerry: function() { return navigator.userAgent.match(/BlackBerry/i); }, playing = false;
iOS: function() { return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, control.style.visibility = 'visible';
Opera: function() { return navigator.userAgent.match(/Opera Mini/i); }, }
Windows: function() { return navigator.userAgent.match(/IEMobile/i); }, }
any: function() { return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }
};

1
assets/styles/style.css
View file

@ -16,6 +16,7 @@ html, body, img, #container {
} }
#control { #control {
visibility: hidden;
display: inline-block; display: inline-block;
border-radius: 10px; border-radius: 10px;

2
index.html
View file

@ -13,7 +13,7 @@
<img id="background" src="" /> <img id="background" src="" />
<div id="container"> <div id="container">
<i id="control" class="icon-pause" onclick="javascript:toggle();"></i> <i id="control" class="icon-play" onclick="javascript:toggle();"></i>
</div> </div>
<script src="//cdnjs.cloudflare.com/ajax/libs/howler/1.1.17/howler.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/howler/1.1.17/howler.min.js"></script>