jquery音樂播放器(歌詞滾動版)

来源:http://www.cnblogs.com/LoveOrHate/archive/2016/09/16/5877585.html
-Advertisement-
Play Games

好久沒出來水了!!!忙忙碌碌的找工作~然後中秋節也算過了,祝各位coding們,直接覺醒第七感小宇宙,直接用心就能找到bug-_-// 最後如題這是一篇很正規的coding的文章 大概麽比以前的加了個歌詞,之前的炸了,然後最近又修好了,一直東西在搬家,這次估計不搬家了,大不了美橙在買幾個空間hoho ...


好久沒出來水了!!!忙忙碌碌的找工作~然後中秋節也算過了,祝各位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次了...實在不高興這麼個玩意還裝安全狗之類的

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在進行列表排序時,有個“上移”和“下移”操作,這個一般在記憶體里完成,然後統一提交到資料庫中,對於上移與下移的設計,大叔在LIND.DDD.DOMAIN里有一個ISortBehavor介面,主要是說,如果實體對象支持排序功能,可以實現這個介面,而在擴展庫中,將有為本地結果集動態排序(上移和下移)的方法 ...
  • 架構目標 業務系統 架構設計原則 應用架構 基礎架構 資料庫架構 分散式資料庫特性 • 支持MySQL,MariaDB,MongoDB等資料庫 • 服務高可用,主庫故障,從庫自動切換 • 數據高可靠,定期快照備份,增量備份 • 數據自動拆分,一鍵無縫遷移擴容 • 針對特殊業務需求,定製優化特殊的數據... ...
  • 職責鏈模式(Chain of responsibility),就是使多個對象都有機會處理請求,從而避免請求的發送者和接受者之間的耦合關係。通過職責鏈模式,簡單地使用JavaScript模擬了冒泡事件。 ...
  • leonaScroll-1.1最新版-豎向 leonaScroll-1.1.js歡迎使用leonaScroll-1.1.js,此滾動條僅支持豎向滾動,如您在使用過程中發現更多問題,歡迎指正! 更新:1.1版本1、修複了前面初始版本中的一些bug,比如不能自適應用戶的文本內容,css文件繁雜2、用戶只 ...
  • 在上一篇CSS3選擇器的研究中列出了幾乎所有的CSS3選擇器,和偽類選擇器,當是並沒有做案例的研究,本想在那篇文章裡面寫,但想想如果把案例都寫在那篇文章裡面,對於查找來說就不是很方便,所有另開一篇來講實例。 屬性選擇器 [title]:選擇帶有title屬性的元素 [title='hello']:選 ...
  • Jquery屬性遍歷、HTML操作。 Jquery擁有可操作HTML元素和屬性的強大方法。 下麵是我整理的一些jquery遍歷函數: .add() 將元素添加到匹配元素的集合中。 .andSelf() 把堆棧中之前的元素集添加到當前集合中。 .children() 獲得匹配元素集合中每個元素的所有子 ...
  • 概述 要求:兩邊頂寬,中間自適應的三欄佈局,中間欄要在放在文檔流前面以優先渲染。 異同點:聖杯是採用left和right相對定位的方式;而雙飛翼是在center裡面又創建了一個子div,在該子div里用margin left和margin right為左右兩欄div留出位置。 聖杯佈局 雙飛翼佈局 ...
  • × 目錄 [1]演示 [2]規劃 [3]結構生成[4]演算法處理 前面的話 關於select控制項,可能年月日三級聯動的日期選擇效果是最常見的應用了。本文是選擇框腳本的實踐,下麵將對日期選擇效果進行詳細介紹 演示 規劃 預設情況下,年、月、日分別由3個select控制項組成,id分別為sel1,sel2, ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...