请问我下面的js代码点击下一首按钮的时候怎么播放下一首

我做了个随机播放,然后要做循坏遍历异步返回的歌曲数据时候,本来是要做的效果是点击左右按钮可以播放上一首和下一首,但是结果是点击左边按钮直接播放第一首,而点击右按钮的时候直接就播放了最后一首,谁帮忙给个解决思路,代码如下

<!DOCTYPE html>
<html>
<head lang="en"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <title></title> <link rel="stylesheet" href="css/bootstrap.css"/> <style> body{ background:deepskyblue; } .container{ margin-top:150px; } a{ color: #000; } span{ font-size: 2.5em; } .music{ border:1px #ddd dashed; } .info li{ color: red; } .list{ border: 1px dashed #ddd; } .time-bar{ width: 0; height: 5px; background: yellow; } </style>
</head>
<body> <div class="container"> <div class="row"> <div class="col-sm-4 col-sm-offset-4 col-xs-8"> <div class="logo"><img src="img/bg.jpg" class="img-responsive" alt=""/></div> <div class="music text-center"> <audio id="audio" src="res/TakeMeToYourHeart.mp3" loop="loop" autoplay></audio> <ul class="list-inline list-unstyled info"> <li></li> <li></li> </ul> <ul class="list-unstyled list-inline control"> <li><a href="#"><span class="glyphicon glyphicon-backward"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-play"></span></a></li> <li><a href="#"><span class="glyphicon glyphicon-forward"></span></a></li> </ul> <div class="time-bar"></div> </div> </div> <div class="col-xs-4"> <ul class="list-unstyled list text-center"> <h1 class="">歌单</h1> </ul> </div> </div> </div> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery-ui.js"></script> <script> //加载页面的播放器动画
// setTimeoutfunction{
// $.row.togglepulsate;
// console.logaa;
// },1000; document.getElementById"audio".setAttributeloop,loop;//循环歌曲 //异步请求数据库歌曲数据 $document.readyfunction{ $.getJSONmusicList.php,functiondata{ console.logdata; var playList=data; doResponseplayList; } } ;
//测试数据
// var playList=[{player:薛之谦,music:来日方长},
// {player:薛之谦,music:一半.mp3},
// {"player":邓紫棋,music:喜欢你.mp3}]; function doResponseplayList { for var i = 0; i < playList.length; i++ { $.list-unstyled.list.append<li> + playList[i].player + playList[i].music + </li> }; var str = $#audio[0].getAttributesrc.splitres/; console.logstr; $.info li:first-child[0].innerHTML = str[1].split.mp3[0].split.; $.music ul li a.clickfunction e { e.preventDefault; var index = $this.parent.index; var x=parseIntMath.random*playList.length-1; console.logx; if index == 0 { $audio.attrsrc, res/ + playList[x].music; $.info li:first-child[0].innerHTML = playList[x].player; $.info li:last-child[0].innerHTML = playList[x].music.split.mp3[0].split.; console.logindex; console.logi; } else if index == 1 { if $#audio[0].paused { $#audio[0].play; $.control li a span:eq1[0].className = glyphicon glyphicon-play } else { $#audio[0].pause; $.control li a span:eq1[0].className = glyphicon glyphicon-stop } //console.logindex; } else ifindex==2 { $audio.attrsrc, res/ + playList[x].music; $.info li:first-child[0].innerHTML = playList[x].player; $.info li:last-child[0].innerHTML = playList[x].music.split.mp3[0].split.; console.logindex; } //console.logparseFloat$#audio[0].duration }; } </script>
</body>
</html>

发表评论

电子邮件地址不会被公开。 必填项已用*标注