我正在为移动用户创建一个 HTML5 音乐网站。目标是让它完全在移动浏览器中运行。
问题是，当用户选择要播放的曲目时，他们会被带到“播放器”页面。然后我在 HTML5 音频元素中进行 AJAX，并将 autoplay 属性设置为 true。这在桌面上效果很好，但在移动设备上效果不佳。
但到达此页面后，曲目不会播放，用户需要从该播放器页面显式单击“播放”才能开始音频播放。
关于如何调整流程以便音频播放的任何想法autoplay加载播放页面后？
这是我的 HTML 代码：
<!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
});
});
