지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 백엔드 개발 > PHP 튜토리얼 > javascript - 다음 노래 버튼을 클릭할 때 다음 js 코드를 사용하여 다음 노래를 재생하려면 어떻게 해야 합니까?

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

WBOY
풀어 주다： 2016-10-23 00:12:49
원래의
1236명이 탐색했습니다.

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

<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>
로그인 후 복사
로그인 후 복사

답글 내용:

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

<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>
로그인 후 복사
로그인 후 복사
관련 라벨：
javascript mysql php
원천：php.cn
이전 기사：sprintf가 소수점을 가로채는 문제에 대하여 다음 기사：사용자의 현재 상세한 지리적 위치를 얻는 방법
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
JavaScript를 사용하지 않고 클릭 시 이미지 소스를 동적으로 수정하는 CSS 전용 방법 img:active와 같은 CSS만 사용하여 마우스 클릭 시 이미지의 소스를 변경해야 합니다.{}
에서 2024-04-06 19:25:49
0
1
505
d3.js를 확대할 때 산점도 값이 유지되지 않습니다. d3.js를 처음 사용하는 것이므로 양해해 주시기 바랍니다. vue.js 파일에 순수 JavaScript로 구현했습니다. 확대/축소 기능을 사용하여 산점도를 만들...
에서 2024-04-06 18:16:26
0
1
403
공급업체별 의사 요소에 대한 JavaScript 호버 이벤트 나는 아래에 HTMLinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',fun...
에서 2024-04-06 15:35:24
0
1
274
Javascript/Jquery를 사용하여 버튼 없이 양식 제출 JavaScript 함수를 호출하고 JQUERY/PHP를 사용하여 양식을 실행하여 버튼 없이 양식을 제출하려고 합니다. 페이지를 다시 로드하지 않고 백엔드에서 양...
에서 2024-04-06 14:54:03
0
2
421
CollapseDisplay 클래스를 사용하여 Bootstrap 아코디언 헤더의 모양을 사용자 정의하세요. 클래스 Collapseshow를 사용하여 패널의 카드 제목 스타일을 지정하고 싶습니다. 이 예에서는 첫 번째 패널입니다. CSS를 사용하여 .accordion.c...
에서 2024-04-06 12:53:11
0
1
376
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿