javascript - 다음 노래 버튼을 클릭할 때 다음 js 코드를 사용하여 다음 노래를 재생하려면 어떻게 해야 합니까?-PHP 튜토리얼-php.cn

집

백엔드 개발

PHP 튜토리얼

javascript - 다음 노래 버튼을 클릭할 때 다음 js 코드를 사용하여 다음 노래를 재생하려면 어떻게 해야 합니까?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Oct 23, 2016 am 12:12 AM

javascriptmysqlphp

무작위 재생을 한 후 비동기적으로 반환된 노래 데이터를 반복하고 싶을 때 원래 효과는 왼쪽 및 오른쪽 버튼을 클릭하여 이전 및 다음 노래를 재생하는 것이었지만 결과는 왼쪽을 클릭하는 것이었습니다. 버튼을 직접 누르면 첫 곡이 재생되는데 오른쪽 버튼을 누르면 마지막 곡이 바로 재생되는데요. 혹시 해결 방법을 알려주실 수 있으신가요?

<code>


    <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>


     <div class="container">
         <div class="row">
             <div class="col-sm-4 col-sm-offset-4 col-xs-8">
                 <div class="logo"><img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/bg.jpg" 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>
                     </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 id="歌单">歌单</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 + '')
           };
           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>

</code>

답글 내용:

<code>


    <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>


     <div class="container">
         <div class="row">
             <div class="col-sm-4 col-sm-offset-4 col-xs-8">
                 <div class="logo"><img class="img-responsive lazy" src="/static/imghwm/default1.png" data-src="img/bg.jpg" 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>
                     </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 id="歌单">歌单</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 + '')
           };
           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>

</code>

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.