I am creating a HTML5 music website for mobile users.The goal is to get it running completely in mobile browsers..
The issue is that when a user selects a track to play, they are taken to the "player" page.I then AJAX in a HTML5 audio element in with the autoplay attribute set to true. This works great on desktops, not so much on mobile.
The track is not playing though once this page is reached, and the user instead needs to explicitly click play from this player page in order for audio playback to start.
Any ideas on how I can adjust my flow in order for audio playback to autoplay after loading the playing page?
Here's my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>Mobile Websites</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/responsive.css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,800,800italic,700italic' rel='stylesheet' type='text/css'>
<script type='text/javascript' src='js/jquery.js'></script>
<script type='text/javascript' src='js/amazingaudioplayer.js'></script>
</head>
<body>
<div class="right-part">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-color">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<div class="back"><a href="index.html">back</a></div>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<div class="song-name">Player</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3">
<div class="playerr"></div>
</div>
</div>
</div>
</div>
<div class="bg">
<div class="container filter-main-div">
<div class="song-main-div row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 player-div">
<!-- <ul class="share-song">
<li><a class="fav" href="#123"></a></li>
<li><a class="share" href="#123">share</a></li>
<li><a class="rbt" href="#123">RBT</a></li>
</ul>-->
<div id="primary">
<div class="demo-slider">
<link rel="stylesheet" type="text/css" media="all" href="css/initaudioplayer.css" />
<div id="amazingaudioplayer-7" style="display:block;position:relative;width:320px;height:164px;margin:0px auto 0px;"><div class="suffle">Suffle</div>
<ul class="amazingaudioplayer-audios" style="display:none;">
<li data-artist="pinkzebra" data-title="In The Moment of Inspiration" data-album="AudioJungle" data-info="" data-image="images/diamon-img.png" data-duration="154">
<div class="amazingaudioplayer-source" data-src="audio/devesh.mp3" data-type="audio/mpeg" />
</li>
</ul>
</div><div class="play-fav"><a class="fav" href="#123">sdfsdfsdfdsf</a></div>
</div>
</div>
<script src="js/initaudioplayer.js"></script>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//www.googleadservices.com/pagead/conversion.js"></script>
</body>
</html>
initaudioplayer.js :
jQuery(document).ready(function(){
var jsFolder = "images";
jQuery("#amazingaudioplayer-7").amazingaudioplayer({
jsfolder:jsFolder,
volumeimagewidth:24,
barbackgroundimage:"",
imagewidth:100+'%',
showtime:true,
titleinbarwidth:80,
showprogress:true,
random:false,
titleformat:"%TITLE%",
height:164,
prevnextimage:"prevnext-48-48-0.png",
showinfo:true,
imageheight:100+'%',
skin:"MusicBox",
loopimage:"repeat-img.png",
loopimagewidth:33,
volumebarheight:80,
prevnextimageheight:40,
infoformat:"By %ARTIST% %ALBUM%<br />%INFO%",
showstop:false,
showvolumebar:true,
width:320,
showtitleinbar:false,
showloop:true,
volumeimage:"volume-24-24-1.png",
playpauseimagewidth:75,
loopimageheight:36,
tracklistitemformat:"%ORDER%. %TITLE% %DURATION%",
prevnextimagewidth:40,
tracklistarrowimage:"tracklistarrow-16-16-0.png",
playpauseimageheight:75,
showbackgroundimage:false,
progresswidthmode:"fixed",
stopimage:"stop-48-48-0.png",
showvolume:true,
playpauseimage:"playpause-48-48-0.png",
showprevnext:true,
backgroundimage:"",
volumebarpadding:8,
progressheight:8,
showtracklistbackgroundimage:false,
progresswidth:296,
showtitle:true,
tracklistarrowimageheight:16,
heightmode:"fixed",
titleinbarformat:"%TITLE%",
showtracklist:true,
stopimageheight:48,
volumeimageheight:24,
stopimagewidth:48,
tracklistbackgroundimage:"",
showbarbackgroundimage:false,
showimage:true,
tracklistwidth:320,
tracklistarrowimagewidth:16,
timeformat:"%CURRENT% / %DURATION%",
autoplay:true,
loop:1,
tracklistitem:10
});
});
See Question&Answers more detail:
os 
