"Autoplay" HTML5 audio player on mobile browsers
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
});
});
This question has been answered in other places before.
Regarding Apple devices specifically:
Googling will reveal more.
I have read in a few places that Chrome on Android also behaves this way, though other Android browsers may not.
How this applies to your case specifically:
Normally, just clicking on a link would work fine if the player were in the same page, since the click on that link would be counted as valid user interaction to start the media playback. But, you're loading a new page, which resets this check for user interaction, and so media will not start until the user interacted with the new page in some way. Thus, the user has to scroll, touch, tap, swipe, or something, in order to auto play, or just hit the play button on the media player.
链接地址: http://www.djcxy.com/p/71144.html上一篇: jQuery自动播放HTML5音频