javascript - 请问我下面的js代码点击下一首按钮的时候怎么播放下一首-php教程-PHP中文网

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

php中文网

发布： 2016-10-23 00:12:49

原创

1512人浏览过

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

What-the-Diff

检查请求差异，自动生成更改描述

103

查看详情

<code><!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">@@##@@</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>
         //加载页面的播放器动画
//             setTimeout(function(){
//                 $('.row').toggle('pulsate');
//                 console.log('aa');
//             },1000);
         document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
         //异步请求数据库歌曲数据
             $(document).ready(function(){
                         $.getJSON('musicList.php',function(data){
                             console.log(data);
                             var playList=data;
                             doResponse(playList);
                         })
                 }
             );
//测试数据
//         var playList=[{'player':'薛之谦','music':'来日方长'},
//             {'player':'薛之谦','music':'一半.mp3'},
//             {"player":'邓紫棋','music':'喜欢你.mp3'}];
       function doResponse(playList) {
           for (var i = 0; i < playList.length; i++) {
               $('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '</li>')
           };
           var str = $('#audio')[0].getAttribute('src').split('res/');
           console.log(str);
           $('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
           $('.music ul li a').click(function (e) {
               e.preventDefault();
               var index = $(this).parent().index();
               var x=parseInt(Math.random()*(playList.length-1));
               console.log(x);
                       if (index == 0) {
                           $('audio').attr('src', '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.log(index);
                           console.log(i);
                       } else if (index == 1) {
                           if ($('#audio')[0].paused) {
                               $('#audio')[0].play();
                               $('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
                           } else {
                               $('#audio')[0].pause();
                               $('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
                           }
                           //console.log(index);
                       } else if(index==2) {
                           $('audio').attr('src', '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.log(index);
                       }
               //console.log(parseFloat($('#audio')[0].duration))
           });
       }
     </script>
</body>
</html></code>

登录后复制

回复内容：

<code><!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">@@##@@</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>
         //加载页面的播放器动画
//             setTimeout(function(){
//                 $('.row').toggle('pulsate');
//                 console.log('aa');
//             },1000);
         document.getElementById("audio").setAttribute('loop','loop');//循环歌曲
         //异步请求数据库歌曲数据
             $(document).ready(function(){
                         $.getJSON('musicList.php',function(data){
                             console.log(data);
                             var playList=data;
                             doResponse(playList);
                         })
                 }
             );
//测试数据
//         var playList=[{'player':'薛之谦','music':'来日方长'},
//             {'player':'薛之谦','music':'一半.mp3'},
//             {"player":'邓紫棋','music':'喜欢你.mp3'}];
       function doResponse(playList) {
           for (var i = 0; i < playList.length; i++) {
               $('.list-unstyled.list').append('<li>' + playList[i].player + playList[i].music + '</li>')
           };
           var str = $('#audio')[0].getAttribute('src').split('res/');
           console.log(str);
           $('.info li:first-child')[0].innerHTML = str[1].split('.mp3')[0].split('.');
           $('.music ul li a').click(function (e) {
               e.preventDefault();
               var index = $(this).parent().index();
               var x=parseInt(Math.random()*(playList.length-1));
               console.log(x);
                       if (index == 0) {
                           $('audio').attr('src', '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.log(index);
                           console.log(i);
                       } else if (index == 1) {
                           if ($('#audio')[0].paused) {
                               $('#audio')[0].play();
                               $('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-play'
                           } else {
                               $('#audio')[0].pause();
                               $('.control li a span:eq(1)')[0].className = 'glyphicon glyphicon-stop'
                           }
                           //console.log(index);
                       } else if(index==2) {
                           $('audio').attr('src', '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.log(index);
                       }
               //console.log(parseFloat($('#audio')[0].duration))
           });
       }
     </script>
</body>
</html></code>

登录后复制