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次了...实在不高兴这么个玩意还装安全狗之类的

时间: 2024-10-19 04:55:21

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

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

前言:之前做了一个音乐播放器(纯前端),意外的受欢迎,然后有人建议我把后台一起做了,正好也想学习后台,所以学了两天php(不要吐槽我的速度,慢工出细活嘛~)然后在之前的基础上也又完善了一些功能,所以这个Demo比之前的可以算是进阶呢~v2.0哈哈哈~感觉截图体验很不好呢,所以在美图秀秀上面做了简易的动图,大家感受感受 正文: 老规矩,先上图~感觉有点卡,愿意等的就等等嘛,不愿意等的,往下看,有图片讲解 功能实现: 1.点击音乐列表播放音乐 2.拖动或点击进度条,调节音乐播放进度 3.浮动到音量控

Qt5 简单音乐播放器(进击版1)

今天又抽空改进了下音乐播放器的功能 主要改进代码: 播放列表:QListWidget 类 标准文件对话框:QFileDialog QString getfilename(QString filepath) {     QString filename;     QStringList list = filepath.split("/");     filename = list.at(list.size()-1);     return filename; } QString Main

jQuery音乐播放器jPlayer

在线演示 本地下载 原文地址:https://www.cnblogs.com/qixidi/p/10058097.html

Android音乐播放器源码(歌词.均衡器.收藏.qq5.0菜单.通知)

Android音乐播放器(歌词.均衡器.收藏.qq5.0菜单.通知) 一款Android音乐播放器源码,基本功能都实现了 qq5.0菜单(歌词.均衡器.收藏.qq5.0菜单.通知) 只有向右滑动出现,菜单键和指定按钮都还没有添加. 下载地址:http://www.devstore.cn/code/info/1144.html 运行截图:     热门源码下载: 高仿京东商城 Android快速开发不可或缺的11个工具类 Android快速开发框架LoonAndroid Android应用源码比较

Xamarin.Android开发音乐播放器

最近.Net开源着实让C#火了一把,好久就听说Mono for Android一直没静下心来看,上周末找来看看,确实不错,前台界面axml编写跟Java安卓开发毫无区别,后台用C#其实很多windows下的方法都可以用,做一个安卓音乐播放器,主要实现音乐播放,上一曲下一曲,音乐播放列表,随机播放,扫描SD卡内所有音乐. 先show一组界面啊,话说有图有真相啊: 项目结构如图: Lrc是歌词处理方法 MusicService是安卓服务播放音乐,服务Broadcast,以及界面接收Receiver

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

基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m_player" id="divplayer" role="application" onselectstart="return false" style="left: 0px;"> <div class=&

android版音乐播放器----卡拉OK歌词实现(二)

相信大家都看过酷狗的音乐播放器,特别是酷狗的滚动歌词实现起来,效果特别好.我自己也尝试看了一下酷狗的歌词文件,发现是加密的,根本就看不了,所以只能是从目前开源的歌词文件出发了.我自己选择的是ksc歌词文件. 要实现歌词的功能,那首先就是要先认识一下ksc歌词的文件与普通的lrc歌词有那方面的区别? 当然,这里我从网上找了一个文档,看了文档里面的介绍,大家大概就会明白两都的区别. http://wenku.baidu.com/link?url=Ga4ESBrytlx3qUoxX5ApHbFIZro

iOS音乐播放器(歌词自动滚动)

简单实现基于IOS的音乐播放器,并且带有歌词,随播放自动滚动,实现效果如下: 首先,需要建立一个解析歌词的类ZMPlrc,解析歌词主要就是把时间和对应的歌词分离出来,然后存储到数组中. ZMPlrc.h #import <Foundation/Foundation.h> @interface ZMPlrc : NSObject /** 时间 */ @property (nonatomic,strong)NSMutableArray *timeArray; /** 歌词 */ @property

Qt版音乐播放器

    Qt版音乐播放器 转载请标明出处:牟尼的专栏 http://blog.csdn.net/u012027907 一.关于Qt 1.1 什么是Qt Qt是一个跨平台应用程序和UI开发框架.使用Qt只需一次性开发应用程序,无需重新编写源代码,便可跨不同桌面和嵌入式操作系统部署这些应用程序. Qt Creator是全新的跨平台Qt IDE,可单独使用,也可与Qt库和开发工具组成一套完整的SDK,其中包括:高级C++代码编辑器,项目和集成管理工具,集成的上下文相关的帮助系统,图形化调试器,代码管理