javascript - 請問我下面的js程式碼點擊下一首按鈕的時候怎麼播放下一首
- WBOY原創
- 2016-10-23 00:12:491240瀏覽
我做了個隨機播放，然後要做循壞遍歷異步返回的歌曲數據時候，本來是要做的效果是點擊左右按鈕可以播放上一首和下一首，但是結果是點擊左邊按鈕直接播放第一首，而點擊右按鈕的時候直接就播放了最後一首，誰幫忙給個解決思路，代碼如下
<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>陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：關於sprintf截取小數問題下一篇：關於sprintf截取小數問題