好久没出来水了!!!忙忙碌碌的找工作~然后中秋节也算过了,祝各位coding们,直接觉醒第七感小宇宙,直接用心就能找到bug-_-//

最后如题这是一篇很正规的coding的文章

大概么比以前的加了个歌词,之前的炸了,然后最近又修好了,一直东西在搬家,这次估计不搬家了,大不了美橙在买几个空间hoho

效果么大概一下,花了1个钟头快速写出来的~都说每个程序猿都有一颗设计狮的心,但是我记得我以前开始码代码之前做设计的时候,有一句话你设计不出来不会抄啊,然后我就无耻的盗图了。23333

头部很多人说丑,火车和天空,然后么还是有点含义的吧!可以听下《爱情转移》有一句歌词

  1. $.ajax({
  2. url: "/music/music.txt",
  3. type: "get",
  4. success: function(data) {
  5. data = jQuery.parseJSON(data);
  6. var length = data.length;
  7. var now=0;
  8. for (i = 0; i < length; i++) {
  9. $("#musicText li").eq(i).after("<li>" + data[i].text + "</li>")
  10. }
  11. var player = {
  12. playButton: $(".play"),
  13. songText: $(".musicText"),
  14. state: 0,
  15. //0播放,1暂停
  16. audio: $("#audio").get(0),
  17. bind: function() {
  18. //绑定按钮
  19. //播放或暂停
  20. console.log($.type(this))
  21. console.log($.type(this))
  22. var obj = this;
  23. this.playButton.click(function() {
  24. obj.changeState(obj.state ? 0 : 1);
  25. });
  26. //设置声音
  27. $("#voice").click(function(ex) {
  28. var percent = (ex.clientX - $(this).offset().left) / $(this).width();
  29. obj.setVoice(percent);
  30. });
  31. //默认声音 0.8
  32. obj.setVoice(1.0);
  33.  
  34. //静音
  35. $("#voiceOP").click(function() {
  36. if (obj.muted) {
  37. $(this).removeClass("muted");
  38. obj.audio.muted = false;
  39. obj.muted = false;
  40. } else {
  41. $(this).addClass("muted");
  42. obj.audio.muted = true;
  43. obj.muted = true;
  44. }
  45. });
  46.  
  47. //设置进度
  48. $("#MusicProgress").click(function(ex) {
  49. var percent = (ex.clientX - $(this).offset().left) / $(this).width();
  50. obj.setProgress(percent, false);
  51. });
  52.  
  53. //上一首
  54. $("#prev").click(function() {
  55. obj.nowIndex--;
  56. if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
  57. obj.playSing(obj.nowIndex);
  58.  
  59. });
  60.  
  61. //下一首
  62. $("#next").click(function() {
  63. obj.nowIndex++;
  64. if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
  65. obj.playSing(obj.nowIndex);
  66. player.audio.play();
  67. });
  68.  
  69. //绑定事件 - 播放时间改变
  70. this.audio.ontimeupdate = function() {
  71. obj.timeChange();
  72. }
  73. //播放结束
  74. this.audio.onended = function() {
  75. obj.singEnd();
  76. }
  77.  
  78. },
  79. //切换播放状态
  80. changeState: function(_state) {
  81. this.state = _state;
  82. if (!this.state) {
  83. this.playButton.removeClass("pause").addClass("play");
  84. this.pause();
  85. } else {
  86. this.playButton.removeClass("play").addClass("pause");
  87. this.play();
  88. }
  89. },
  90. //播放
  91. play: function() {
  92. this.audio.play();
  93. },
  94. //暂停
  95. pause: function() {
  96. this.audio.pause();
  97. },
  98. timeChange: function() {
  99. var nowSec = Math.floor(this.audio.currentTime);
  100. console.log(nowSec)
  101. console.log(data[now].time)
  102. if(nowSec>data[now].time){
  103. now = now + 1;
  104. console.log(now)
  105. $("#musicText li").eq(now).addClass("active").siblings("li").removeClass("active");
  106. $("#musicText").css("top",-(24*now)+138)
  107.  
  108. }
  109. var totalSec = Math.floor(this.audio.duration);
  110. //当前进度显示
  111. var secTip = secFormat(nowSec) + "/" + secFormat(totalSec);
  112. if (secTip.length == 11) $("#secTip").html(secTip);
  113. this.setProgress(nowSec / totalSec, true);
  114.  
  115. },
  116. setVoice: function(percent) {
  117. $("#voice").children(".bar").css("width", percent * 100 + "%");
  118. $("#voice").children("a").css("left", percent * 100 + "%");
  119. this.audio.volume = percent;
  120. },
  121. setProgress: function(percent, justCss) {
  122. $("#MusicProgress").children(".bar").css("width", percent * 100 + "%");
  123. $("#MusicProgress").children("a").css("left", percent * 100 + "%");
  124.  
  125. if (!justCss) this.audio.currentTime = this.audio.duration * percent;
  126.  
  127. },
  128. singEnd: function() {
  129. if (this.style == 0) {
  130. this.nowIndex++;
  131. if (this.nowIndex >= this.list.length) this.nowIndex = 0;
  132. this.playSing(this.nowIndex);
  133. } else {
  134. var index = Math.floor(Math.random() * (this.list.length + 1)) - 1;
  135. index = index < 0 ? 0 : index;
  136. index = index >= this.list.length ? (this.list.length - 1) : index;
  137. this.playSing(index);
  138. this.nowIndex = index;
  139. }
  140. },
  141. };
  142.  
  143. player.bind();
  144. function secFormat(num) {
  145. var m = Math.floor(num / 60);
  146. var s = Math.floor(num % 60);
  147. return makeFormat(m) + ":" + makeFormat(s);
  148. function makeFormat(n) {
  149. if (n >= 10) return n;
  150. else {
  151. return "0" + n;
  152. }
  153. }
  154. }
  155. }
  156. })

然后这里的代码是alpha0.0.1版的,一直在升级ing

继续改bug了,直接网站源代码就可以查看~

最后大神看到别打脸,别攻击我T_T,别留hacker~email了。。这个月我还原了N次了...实在不高兴这么个玩意还装安全狗之类的

jquery音乐播放器(歌词滚动版)的更多相关文章

  1. 用PHP+H5+Boostrap做简单的音乐播放器(进阶版)

    前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...

  2. html5 jquery音乐播放器,play()和pause()不起作用

    今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...

  3. jQuery音乐播放器jPlayer

    在线演示 本地下载

  4. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

  5. Swift版音乐播放器(简化版),swift音乐播放器

    这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音 ...

  6. Swift版音乐播放器(简化版)

    这几天闲着也是闲着,学习一下Swift的.于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神. 希望对大家有帮助! 这个DEMO里.使用到了 AudioPlayer(对音 ...

  7. html5版 音乐播放器

    html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...

  8. iOS开发手记-仿QQ音乐播放器动态歌词的实现

    最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...

  9. (1)H5实现音乐播放器【正在播放-歌词篇】

    近期闲来无事,就想着复习一下前端的东西,然后正好跟朋友搞了一个公共开放的音乐api接口,就想着写一个音乐播放器玩玩! 话不多说,直接上图,然后上代码 [播放器显示正在播放] 实现功能: 1:歌词随着歌 ...

随机推荐

  1. ubuntu中maven建的web项目不能将project facet设置为 dynamic web module 3.0

    核心参考:maven 不能设置为web3.0人解决方法 error:Description    Resource    Path    Location    Type Cannot change ...

  2. 【poj1017】 Packets

    http://poj.org/problem?id=1017 (题目链接) 题意 一个工厂制造的产品形状都是长方体盒子,它们的高度都是 h,长和宽都相等,一共有六个型号,分别为1*1, 2*2, 3* ...

  3. 环信Restfull API dotnetSDK

    Easemob.Restfull4Net 环信Restfull API dotnet的封装 支持的.Net Framework版本:4.0 API地址:http://docs.easemob.com/ ...

  4. 修改ftp端口为50021

    1. 配置 2. 增加防火墙规则 netsh firewall set portopening tcp 50021 ftp-50021 enable 3. 重启服务 net stop FileZill ...

  5. HC-05初探

    catalogue . 蓝牙嗅探抓包 . HC05蓝牙模块AT模式设置 . USB转串口芯片CH340 . 蓝牙小车 1. 蓝牙嗅探抓包 针对蓝牙通信包的嗅探抓包不能直接使用wincap+wiresh ...

  6. dedecms /member/pm.php SQL Injection Vul

    catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 Relevant Link http:/ ...

  7. Linux inode && Fast Directory Travel Method(undone)

    目录 . Linux inode简介 . Fast Directory Travel Method 1. Linux inode简介 0x1: 磁盘分割原理 字节 -> 扇区(sector)(每 ...

  8. shell命令xargs

    今天准备找出nginx非空的日志并压缩成一个文件 find . -name "meta.access.log.*" -type f -size +0k | tar -cjv -f ...

  9. 64位CentOS源码编译方式安装wine

    说明:本文仅作本人笔记的之用,仅供参考.可能因不同环境而不同. 1. 从官网下载最新版的wine-1.6.2.tar.gz 2. 安装相关的包(这里是我安装的,可能由于不同系统已经安装的包不同而不一样 ...

  10. Linux rsync网站目录同步功能的实现

    实现目标: 172.16.1.64服务器上的/var/www/sw_service目录,与172.16.1.60服务器上的/var/www/sw_service目录实现同步, 即1.60主动向1.64 ...