我做了個隨機播放，然后要做循壞遍歷異步返回的歌曲數據時候，本來是要做的效果是點擊左右按鈕可以播放上一首和下一首，但是結果是點擊左邊按鈕直接播放第一首，而點擊右按鈕的時候直接就播放了最后一首，誰幫忙給個解決思路，代碼如下

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;

}

歌單

//加載頁面的播放器動畫

// 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('

' + 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))

});

}

總結

以上是生活随笔為你收集整理的audio 上一首 下一首 自定义样式_请问我下面的js代码点击下一首按钮的时候怎么播放下一首...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。