jquery音乐播放器(歌词滚动版)
好久没出来水了!!!忙忙碌碌的找工作~然后中秋节也算过了,祝各位coding们,直接觉醒第七感小宇宙,直接用心就能找到bug-_-//
最后如题这是一篇很正规的coding的文章
大概么比以前的加了个歌词,之前的炸了,然后最近又修好了,一直东西在搬家,这次估计不搬家了,大不了美橙在买几个空间hoho
效果么大概一下,花了1个钟头快速写出来的~都说每个程序猿都有一颗设计狮的心,但是我记得我以前开始码代码之前做设计的时候,有一句话你设计不出来不会抄啊,然后我就无耻的盗图了。23333
头部很多人说丑,火车和天空,然后么还是有点含义的吧!可以听下《爱情转移》有一句歌词
- $.ajax({
- url: "/music/music.txt",
- type: "get",
- success: function(data) {
- data = jQuery.parseJSON(data);
- var length = data.length;
- var now=0;
- for (i = 0; i < length; i++) {
- $("#musicText li").eq(i).after("<li>" + data[i].text + "</li>")
- }
- var player = {
- playButton: $(".play"),
- songText: $(".musicText"),
- state: 0,
- //0播放,1暂停
- audio: $("#audio").get(0),
- bind: function() {
- //绑定按钮
- //播放或暂停
- console.log($.type(this))
- console.log($.type(this))
- var obj = this;
- this.playButton.click(function() {
- obj.changeState(obj.state ? 0 : 1);
- });
- //设置声音
- $("#voice").click(function(ex) {
- var percent = (ex.clientX - $(this).offset().left) / $(this).width();
- obj.setVoice(percent);
- });
- //默认声音 0.8
- obj.setVoice(1.0);
- //静音
- $("#voiceOP").click(function() {
- if (obj.muted) {
- $(this).removeClass("muted");
- obj.audio.muted = false;
- obj.muted = false;
- } else {
- $(this).addClass("muted");
- obj.audio.muted = true;
- obj.muted = true;
- }
- });
- //设置进度
- $("#MusicProgress").click(function(ex) {
- var percent = (ex.clientX - $(this).offset().left) / $(this).width();
- obj.setProgress(percent, false);
- });
- //上一首
- $("#prev").click(function() {
- obj.nowIndex--;
- if (obj.nowIndex < 0) obj.nowIndex = obj.list.length - 1;
- obj.playSing(obj.nowIndex);
- });
- //下一首
- $("#next").click(function() {
- obj.nowIndex++;
- if (obj.nowIndex >= obj.list.length) obj.nowIndex = 0;
- obj.playSing(obj.nowIndex);
- player.audio.play();
- });
- //绑定事件 - 播放时间改变
- this.audio.ontimeupdate = function() {
- obj.timeChange();
- }
- //播放结束
- this.audio.onended = function() {
- obj.singEnd();
- }
- },
- //切换播放状态
- changeState: function(_state) {
- this.state = _state;
- if (!this.state) {
- this.playButton.removeClass("pause").addClass("play");
- this.pause();
- } else {
- this.playButton.removeClass("play").addClass("pause");
- this.play();
- }
- },
- //播放
- play: function() {
- this.audio.play();
- },
- //暂停
- pause: function() {
- this.audio.pause();
- },
- timeChange: function() {
- var nowSec = Math.floor(this.audio.currentTime);
- console.log(nowSec)
- console.log(data[now].time)
- if(nowSec>data[now].time){
- now = now + 1;
- console.log(now)
- $("#musicText li").eq(now).addClass("active").siblings("li").removeClass("active");
- $("#musicText").css("top",-(24*now)+138)
- }
- var totalSec = Math.floor(this.audio.duration);
- //当前进度显示
- var secTip = secFormat(nowSec) + "/" + secFormat(totalSec);
- if (secTip.length == 11) $("#secTip").html(secTip);
- this.setProgress(nowSec / totalSec, true);
- },
- setVoice: function(percent) {
- $("#voice").children(".bar").css("width", percent * 100 + "%");
- $("#voice").children("a").css("left", percent * 100 + "%");
- this.audio.volume = percent;
- },
- setProgress: function(percent, justCss) {
- $("#MusicProgress").children(".bar").css("width", percent * 100 + "%");
- $("#MusicProgress").children("a").css("left", percent * 100 + "%");
- if (!justCss) this.audio.currentTime = this.audio.duration * percent;
- },
- singEnd: function() {
- if (this.style == 0) {
- this.nowIndex++;
- if (this.nowIndex >= this.list.length) this.nowIndex = 0;
- this.playSing(this.nowIndex);
- } else {
- var index = Math.floor(Math.random() * (this.list.length + 1)) - 1;
- index = index < 0 ? 0 : index;
- index = index >= this.list.length ? (this.list.length - 1) : index;
- this.playSing(index);
- this.nowIndex = index;
- }
- },
- };
- player.bind();
- function secFormat(num) {
- var m = Math.floor(num / 60);
- var s = Math.floor(num % 60);
- return makeFormat(m) + ":" + makeFormat(s);
- function makeFormat(n) {
- if (n >= 10) return n;
- else {
- return "0" + n;
- }
- }
- }
- }
- })
然后这里的代码是alpha0.0.1版的,一直在升级ing
继续改bug了,直接网站源代码就可以查看~
最后大神看到别打脸,别攻击我T_T,别留hacker~email了。。这个月我还原了N次了...实在不高兴这么个玩意还装安全狗之类的
jquery音乐播放器(歌词滚动版)的更多相关文章
- 用PHP+H5+Boostrap做简单的音乐播放器(进阶版)
前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这 ...
- html5 jquery音乐播放器,play()和pause()不起作用
今天在自己写的页面上加上背景音乐,当我点击图片时可以切换 播放/暂停 用jquery写的,方法总是提示没有pause这个方法! 检查了半天最后发现 你使用的是jquery选择器所以返回的是jquery ...
- jQuery音乐播放器jPlayer
在线演示 本地下载
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
- Swift版音乐播放器(简化版),swift音乐播放器
这几天闲着也是闲着,学习一下Swift的,于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神, 希望对大家有帮助! 这个DEMO里,使用到了 AudioPlayer(对音 ...
- Swift版音乐播放器(简化版)
这几天闲着也是闲着,学习一下Swift的.于是到开源社区Download了个OC版的音乐播放器,练练手,在这里发扬开源精神. 希望对大家有帮助! 这个DEMO里.使用到了 AudioPlayer(对音 ...
- html5版 音乐播放器
html5版本音乐播放器,支持iOS设备,案例地址:http://www.xttblog.com/?p=1277 功能说明 支持iOS设备,但是iOS不支持自动下一曲,这是iOS本身限制,支持touc ...
- iOS开发手记-仿QQ音乐播放器动态歌词的实现
最近朋友想做个音乐App,让我帮忙参考下.其中歌词动态滚动的效果,正好我之前也没做过,顺便学习一下,先来个预览效果. 实现思路 歌词常见的就是lrc歌词了,我们这里也是通过解析lrc歌词文件来获取其播 ...
- (1)H5实现音乐播放器【正在播放-歌词篇】
近期闲来无事,就想着复习一下前端的东西,然后正好跟朋友搞了一个公共开放的音乐api接口,就想着写一个音乐播放器玩玩! 话不多说,直接上图,然后上代码 [播放器显示正在播放] 实现功能: 1:歌词随着歌 ...
随机推荐
- ubuntu中maven建的web项目不能将project facet设置为 dynamic web module 3.0
核心参考:maven 不能设置为web3.0人解决方法 error:Description Resource Path Location Type Cannot change ...
- 【poj1017】 Packets
http://poj.org/problem?id=1017 (题目链接) 题意 一个工厂制造的产品形状都是长方体盒子,它们的高度都是 h,长和宽都相等,一共有六个型号,分别为1*1, 2*2, 3* ...
- 环信Restfull API dotnetSDK
Easemob.Restfull4Net 环信Restfull API dotnet的封装 支持的.Net Framework版本:4.0 API地址:http://docs.easemob.com/ ...
- 修改ftp端口为50021
1. 配置 2. 增加防火墙规则 netsh firewall set portopening tcp 50021 ftp-50021 enable 3. 重启服务 net stop FileZill ...
- HC-05初探
catalogue . 蓝牙嗅探抓包 . HC05蓝牙模块AT模式设置 . USB转串口芯片CH340 . 蓝牙小车 1. 蓝牙嗅探抓包 针对蓝牙通信包的嗅探抓包不能直接使用wincap+wiresh ...
- dedecms /member/pm.php SQL Injection Vul
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 Dedecms会员中心注入漏洞 Relevant Link http:/ ...
- Linux inode && Fast Directory Travel Method(undone)
目录 . Linux inode简介 . Fast Directory Travel Method 1. Linux inode简介 0x1: 磁盘分割原理 字节 -> 扇区(sector)(每 ...
- shell命令xargs
今天准备找出nginx非空的日志并压缩成一个文件 find . -name "meta.access.log.*" -type f -size +0k | tar -cjv -f ...
- 64位CentOS源码编译方式安装wine
说明:本文仅作本人笔记的之用,仅供参考.可能因不同环境而不同. 1. 从官网下载最新版的wine-1.6.2.tar.gz 2. 安装相关的包(这里是我安装的,可能由于不同系统已经安装的包不同而不一样 ...
- Linux rsync网站目录同步功能的实现
实现目标: 172.16.1.64服务器上的/var/www/sw_service目录,与172.16.1.60服务器上的/var/www/sw_service目录实现同步, 即1.60主动向1.64 ...