javascript - Wie verwende ich den folgenden JS-Code, um das nächste Lied abzuspielen, wenn ich auf die Schaltfläche „Nächstes Lied' klicke?-PHP-Tutorial-php.cn

javascript - Wie verwende ich den folgenden JS-Code, um das nächste Lied abzuspielen, wenn ich auf die Schaltfläche „Nächstes Lied' klicke?

WBOY

Freigeben： 2016-10-23 00:12:49

Original

1237 Leute haben es durchsucht

Ich habe eine Zufallswiedergabe durchgeführt, und als ich dann die asynchron zurückgegebenen Songdaten durchlaufen wollte, bestand der ursprüngliche Effekt darin, auf die linke und rechte Schaltfläche zu klicken, um den vorherigen und nächsten Song abzuspielen, aber das Ergebnis war, dass ich auf die linke Maustaste klickte Schaltfläche direkt Das erste Lied wird abgespielt, aber wenn auf die rechte Schaltfläche geklickt wird, wird das letzte Lied direkt abgespielt. Kann mir jemand eine Lösung geben? Der Code lautet wie folgt:

<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"><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>
         //加载页面的播放器动画
//             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>

Nach dem Login kopieren

Antwortinhalt:

<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"><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>
         //加载页面的播放器动画
//             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>

Nach dem Login kopieren