Heim > Artikel > Backend-Entwicklung > javascript - 请问我下面的js代码点击下一首按钮的时候怎么播放下一首
javascript - 请问我下面的js代码点击下一首按钮的时候怎么播放下一首
- WBOYOriginal
- 2016-10-23 00:12:491183Durchsuche
我做了个随机播放，然后要做循坏遍历异步返回的歌曲数据时候，本来是要做的效果是点击左右按钮可以播放上一首和下一首，但是结果是点击左边按钮直接播放第一首，而点击右按钮的时候直接就播放了最后一首，谁帮忙给个解决思路，代码如下
<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 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>
</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 + '')
};
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 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>
</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 + '')
};
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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：关于sprintf截取小数问题Nächster Artikel：如何获取用户当前详细地理位置
In Verbindung stehende Artikel
Mehr sehen- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- So verwenden Sie cURL zum Implementieren von Get- und Post-Anfragen in PHP
- Alle Ausdruckssymbole in regulären Ausdrücken (Zusammenfassung)