我做了个随机播放，然后要做循坏遍历异步返回的歌曲数据时候，本来是要做的效果是点击左右按钮可以播放上一首和下一首，但是结果是点击左边按钮直接播放第一首，而点击右按钮的时候直接就播放了最后一首，谁帮忙给个解决思路，代码如下
<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
es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM去掉重复并排序的方法：1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句，去掉数组中的重复元素，返回去重后的新数组；2、利用sort()对去重数组进行排序，语法“去重数组.sort()”。
JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题，包括了Symbol类型的描述、Symbol不会隐式转字符串等问题，下面一起来看一下，希望对大家有帮助。
原来利用纯CSS也能实现文字轮播与图片轮播！Jun 10, 2022 pm 01:00 PM怎么制作文字轮播与图片轮播？大家第一想到的是不是利用js，其实利用纯CSS也能实现文字轮播与图片轮播，下面来看看实现方法，希望对大家有所帮助！
JavaScript对象的构造函数和new操作符（实例详解）May 10, 2022 pm 06:16 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于对象的构造函数和new操作符，构造函数是所有对象的成员方法中，最早被调用的那个，下面一起来看一下吧，希望对大家有帮助。
javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM方法：1、利用“点击元素对象.unbind("click");”方法，该方法可以移除被选元素的事件处理程序；2、利用“点击元素对象.off("click");”方法，该方法可以移除通过on()方法添加的事件处理程序。
JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于面向对象的相关问题，包括了属性描述符、数据描述符、存取描述符等等内容，下面一起来看一下，希望对大家有帮助。
foreach是es6里的吗May 05, 2022 pm 05:59 PMforeach不是es6的方法。foreach是es3中一个遍历数组的方法，可以调用数组的每个元素，并将元素传给回调函数进行处理，语法“array.forEach(function(当前元素,索引,数组){...})”；该方法不处理空数组。
整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM本篇文章给大家带来了关于JavaScript的相关知识，其中主要介绍了关于BOM操作的相关问题，包括了window对象的常见事件、JavaScript执行机制等等相关内容，下面一起来看一下，希望对大家有帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
R.E.P.O.能量晶体解释及其做什么（黄色晶体）
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影：贝壳谜语解决方案
1 周前ByDDD
R.E.P.O.如果您听不到任何人，如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
在哪里可以找到原子中的起重机控制钥匙卡
1 周前ByDDD
热工具
禅工作室 13.0.1
功能强大的PHP集成开发环境
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
Dreamweaver CS6
视觉化网页开发工具
安全考试浏览器
Safe Exam Browser是一个安全的浏览器环境，用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问，并防止学生使用未经授权的资源。
PhpStorm Mac 版本
最新（2018.2.1 ）专业的PHP集成开发工具
