我做了个随机播放,然后要做循坏遍历异步返回的歌曲数据时候,本来是要做的效果是点击左右按钮可以播放上一首和下一首,但是结果是点击左边按钮直接播放第一首,而点击右按钮的时候直接就播放了最后一首,谁帮忙给个解决思路,代码如下

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代码点击下一首按钮的时候怎么播放下一首...相关推荐

  1. ithoughts怎么自定义样式_博客园自定义样式

    显示结果为: 类似的可以修改博客标题, 字体大小, 导航栏, 侧边栏等等. 公告栏 公告栏也可以添加很多自己喜欢的样式,而且可以添加时钟, 访问人数, 访问地区, 个人介绍等等 我这边引用了 hone ...

  2. audio 上一首 下一首 自定义样式_总有一首网易云,藏着你忘不掉的人。

    回忆像附骨之蛆,每到深夜钻出来啃食伤口.网易云就是当代人深夜的归宿.未必多好听,而是总有几句歌词,里面藏着我们不能说的秘密,和不想忘的人.当所有词不达意.欲言又止时,又是谁存在于你的歌声里?小二这人总 ...

  3. audio 上一首 下一首 自定义样式_被 iPhone 吹爆的最香功能,安卓也终于安排上了...

    大家好,我是今天找到又一快乐根源的酷玩君. 其实,想获取快乐的方式很简单,就是克服困难取得新的成就 新的技巧 . iOS 14中,这个双击后盖有惊喜的场面,大家都见过了吧? 通过敲击两下或三下手机背部 ...

  4. audio 上一首 下一首 自定义样式_我们的歌:盛典即将来临,勤深深还有一首歌,这场表演值得期待...

    在最新一期<我们的歌>节目里面,勤深深回归,并且唱了一首歌曲<爱情转移>粤语版<富士山下>. 虽然回归让人惊喜,但是很显然,对于喜欢勤深深的歌迷来说,一首歌曲,是不 ...

  5. 小程序下拉框自定义样式picker修改样式picker-view修改样式

    小程序里面如果想要自定义一个弹框如上图所示的样式,首先picker是可以放弃的了,因为它根本没有办法修改样式,也一直被吐槽直到picker-view的出现,picker-view修改样式起来可以说是为 ...

  6. ithoughts怎么自定义样式_微信小程序自定义导航栏组件封装

    相信很多小伙伴在开发微信小程序的时候都会有自定义顶部导航栏的需求,不够要说明的是小程序右上角的胶囊是不能自定义的哦,除了胶囊其他地方都是可以根据自己的项目而定了,在一次小程序开发中就需要对顶部进行自定 ...

  7. ios 自定义字体_如何仅用几行代码在iOS应用中创建一致的自定义字体

    ios 自定义字体 by Yuichi Fujiki 藤木雄一 In this article, you'll learn how to create a unified custom look th ...

  8. ithoughts怎么自定义样式_如何装备一个学术型的 iPad?

    谢邀,关注了好久,正好有时间抽空分享一下. 我大概拆分为7个方向,每个方向会列举几款,不同的优缺点可以根据自己的使用习惯来选择. 1.笔记类APP Notability (付费下载/¥60) 适合手写 ...

  9. vant 下拉框样式_使用 Vue 的 Vant.js List 列表组件实现无限下拉

    拉取历史记录,并在前端做无限下拉展示,是一个非常常见的使用场景. 最近在使用的 Vant (轻量.可靠的移动端 Vue 组件库),实现起来就非常方便. 模板实现代码 v-model="loa ...

最新文章

  1. C++ transform for_each
  2. Git添加文件改动时出错
  3. Silverlight MMORPG网页游戏开发课程(Game Lesson):目录
  4. python decimal用法_Python decimal模块使用方法详解
  5. python if try except_python try except
  6. python中的基本数据结构
  7. C#解leetcode 53.Maximum Subarray
  8. RocketMQ事务消费和顺序消费详解
  9. 数据库基础知识——参考数据库基本概念6版
  10. [转].net cookie版购物车
  11. iOS----------APP怎样做更安全
  12. 带你进入 jBPM 工作流的世界
  13. krohne流量计接线图_科隆电磁流量计转换器操作说明
  14. assignment to ‘float *’ from ‘int’ makes pointer from integer without a cast [-Wint-conversion]指针类型错
  15. 恒生电子2019校园招聘笔试题
  16. android网络编程案例,深入理解Android网络编程pdf 完整版
  17. mac 上 csv导入Excel 出现 “此文本文件包含的数据无法放置在一个工作表” 错误
  18. Font Awesome 的使用
  19. mysql 替换 斜杠_Mysql like查询语句中,结果包含反斜杠 \ 字符的,需要替换成四个反斜杠 \\\\...
  20. 申请一个免费美国手机号码

热门文章

  1. 程序员什么时候该考虑辞职?
  2. 企业该如何自主构建信息化管理系统?
  3. 独立站卖家如何把握关键词优化
  4. C++值传递和引用传递的区别
  5. 机器学习编程作业ex8(matlab/octave实现)-吴恩达coursera 异常检测与推荐系统/协同过滤
  6. 什么是性能测试?为什么要进行性能测试?什么时候开展性能测试?性能测试流程是什么?性能测试有关术语是什么意思?
  7. [保姆教程] [Python] 3分钟搭建Python远程开发环境
  8. 【问题解决】检索com类工厂中clsid为 10020200-E260-11CF-AE68-00AA004A34D5 的组件时失败...
  9. jsp中include的两种用法
  10. 换帅!收购?爱立信能否卷土重来