MP3播放器Js插件

曾子曰：“吾日三省吾身——为人谋而不忠乎？于朋友交而不信乎？传不习乎？”

项目结构
-- css
------- font-awesome.css
------- font-awesome.min.css
------- wpixel-music.css
-- fonts
------- FontAwesome.otf
------- fontawesome-webfont.eot
------- fontawesome-webfont.svg
------- fontawesome-webfont.ttf
------- fontawesome-webfont.woff
------- fontawesome-webfont.woff2
-- images
------- c.jpg
------- hldwm.jpg
------- p.jpg
------- img.jpg
-- js
------- wpixel-music.js
-- mp3
------- 《後來的我們》- 粵語版.mp3
------- ラムジ PLANET.mp3
------- 沈以诚椿.mp3
index.html

index.html代码

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>MusicPlay Js 插件</title>
  <link href="css/font-awesome.css" rel="stylesheet">
  <link href="css/font-awesome.min.css" rel="stylesheet">
  <link href="css/wpixel-music.css" rel="stylesheet">
  <style>
    @font-face{
        font-family:"FontAwesome";
        src:url('fonts/fontawesome-webfont.eot') format('eot'),
            url('fonts/fontawesome-webfont.ttf') format('truetype'),
            url('fonts/fontawesome-webfont.woff') format('woff'),
            url('fonts/fontawesome-webfont.woff') format('woff'),
            url('fonts/fontawesome-webfont.svg') format('svg');
        font-weight:normal;
        font-style:normal;
    }
    *{padding:0;margin:0;}
    body{font-size:12px;font-family:"Times New Roman";color:#000;height:100%;}
    li{list-style:none;}
    a{text-decoration:none;color:#666;}
    i{color:#fff;}
    input{outline:none;}    

    .section{width:50%;margin:0 auto;}
    .section ul li{width:100%;border:1px solid #eee;background:#fff;margin-top:20px;}
    .section ul li .c_title{font-size:25px;text-align:center;margin:30px 0;display:block;}
    .section ul li .c_banner{margin:0 auto;display:block;}
    .section ul li .music-play{width:90%;margin:20px auto;}
    .section ul li .pp{margin:20px;height:20px;}
  </style>
 </head>
 <body style="background:#F4F4F4;">
    <section class="section">
        <ul>
            <li>
                <a class="c_title" href="javascript:void(0);">
                    <h2>MusicPlay Js 插件</h2>
                </a>
                <img class="c_banner" src="images/img.jpg" width="90%"/>
                <div id="music" class="music-play"></div>
                <p class="pp"></p>
            </li>
        </ul>
    </section>
 <script type="text/javascript" src="js/wpixel-music.js"></script>
 <script type="text/javascript">
        
        window.onload = function(){
            var playlist = [{
                    title:"《後來的我們》- 粵語版",
                    author:"全星",
                    mp3:"mp3/《後來的我們》- 粵語版.mp3",
                    poster: "images/hldwm.jpg"
                },{
                    title:"椿",
                    author:"沈以诚",
                    mp3:"mp3/沈以诚 椿.mp3",
                    poster: "images/c.jpg"
                },{
                    title:"PLANET",
                    author:"ラムジ",
                    mp3: "mp3/ラムジ PLANET.mp3",
                    poster: "images/p.jpg"
            }];
            new MusicDom({
                id : "music",
                playlist : playlist
            }).init();
        }

 </script>
 </body>
</html>

css样式代码

.music-player{
    width:100%;
    border:1px solid #eee;
    border-bottom:none;
    margin:0 auto;
}
.music-player .info{
    width:100%;
    height:80px;
    border-bottom:1px solid #eee;
}
.music-player .info .icon-repeat{
    width:11%;
    padding: 8px;
    float:left;
    position:relative;
}
.music-player .info .icon-repeat .play{
    border:2px solid #fff;
    height:30px;
    width:30px;
    border-radius:30px;
    position:absolute;
    top:19px;
    left:21px;
    text-align:center;
}
.music-player .info .icon-repeat .play i{
    color:#fff;
    line-height:30px;
}
.music-player .info .info-right{
    width:86%;
    float:left;
}
.music-player .info .info-right .ri-top .music-desc{
    float:left;
}
.music-player .info .info-right .ri-top .music-desc .song-name{
    font-size:16px;
    margin-top:10px;
}
.music-player .info .info-right .ri-top .music-desc .singer{
    margin-top:4px;
}
.music-player .info .info-right .ri-top .music-time{
    float:right;
    margin:33px 3% 0 0;
}
.music-player .info .info-right .ri-top .music-time p{
    float:left;
    font-size:14px;
}
.music-player .info .info-right .ri-top .music-time p i{
    width:16px;
    color:#666;
    cursor:pointer;
}
.music-player .info .info-right .ti-bom{
    width:97%;
    margin-top:15px;
    position:relative;
}
.music-player .info .info-right .ti-bom .total-time{
    cursor:pointer;
    width:100%;
    height:3px;
    background:#ddd;
    
}
.music-player .info .info-right .ti-bom .progress{
    cursor:pointer;
    width:0%;
    height:3px;
    background:#5895be;
    position:absolute;
    top:0;
    left:0;
}
.music-player .info .info-right .ti-bom .pro-click{
    width:10px;
    height:10px;
    background:#fff;
    border:1px solid green;
    border-radius:10px;
    position:absolute;
    top:-5px;
    left:0%;
    cursor:pointer;
}
.music-player .controls li{
    width:100%;
    border-bottom:1px solid #eee;
    line-height:40px;
    cursor:pointer;
    margin-top:0;
}
.music-player .controls li:hover{
    background:#eaeaea;
}
.music-player .controls li p{
    float:left;
    font-size:16px;
    margin-left:12px;
}

.clear{clear:both;}

js插件代码

//圆环对象
function MusicDom(objs){
    this.id = objs.id; //对象id
    this.playlist = objs.playlist; //播放列表
};

MusicDom.prototype = {
    constructor:MusicDom,
    init:function(){
        var html = "<div class='music-player' onselectstart='return false;'>" + 
            "<div class='info'>" + 
            "<div class='icon-repeat'>" + 
            "<img id='poster_"+this.id+"' src='"+this.playlist[0].poster+"' width='60'/>" + 
            "<div id='play_"+this.id+"' class='play'>" + 
            "<i class='fa fa-play fa-lg'></i>" + 
            "</div>" + 
            "</div>" + 
            "<div class='info-right'>" + 
            "<div class='ri-top'>" + 
            "<div class='music-desc'>" + 
            "<p id='title_"+this.id+"' class='song-name'>"+this.playlist[0].title+"</p>" + 
            "<p id='author_"+this.id+"' class='singer'>"+this.playlist[0].author+"</p>" + 
            "</div>" + 
            "<div class='music-time'>" + 
            "<p id='ctime_"+this.id+"'></p>" + 
            "<p id='ttime_"+this.id+"'></p>" + 
            "<p id='stopv_"+this.id+"'>&nbsp;&nbsp;<i class='fa fa-volume-up fa-lg'></i></p>" + 
            "<p id='vshow_"+this.id+"'>&nbsp;&nbsp;<i class='fa fa-reorder fa-lg'></i></p>" + 
            "</div>" + 
            "<div class='clear'></div>" + 
            "</div>" + 
            "<div class='ti-bom'>" + 
            "<div id='totalTime' class='total-time'></div>" + 
            "<div id='progress_"+this.id+"' class='progress'></div>" + 
            "<div id='proPoint_"+this.id+"' class='pro-click'></div>" + 
            "</div>" + 
            "</div>" + 
            "<div class='clear'></div>" + 
            "</div>" + 
            "<audio id='music_"+this.id+"' src='"+this.playlist[0].mp3+"'></audio>" + 
            "<div class='controls'>" + 
            "<ul id='lists_"+this.id+"'>";
        for(var i = 0; i < this.playlist.length ; i++){
            var num1 = i;
            var num2 = num1+1;
            html += "<li id='playlist_"+num2+"'>" + 
                "<p>"+num2+"&nbsp;&nbsp;</p>" + 
                "<p>"+this.playlist[i].title+"</p>" + 
                "<p> - </p>" + 
                "<p>"+this.playlist[i].author+"</p>" + 
                "<div class='clear'></div>" + 
                "</li>"; 
        }
            html += "</ul>" + 
                "</div>" + 
                "</div>";
        document.getElementById(this.id).innerHTML = html;
        //初始化事件和参数
        this.setOptions(this.playlist);
    },
    setOptions:function(playlist){
        //歌曲图片
        var poster_Dom = document.getElementById("poster_"+this.id);
        //歌曲名
        var title_Dom = document.getElementById("title_"+this.id);
        //歌曲作者
        var author_Dom = document.getElementById("author_"+this.id);
        //歌曲对象
        var aio_Dom = document.getElementById("music_"+this.id);
        //进度条
        var gress_Dom = document.getElementById("progress_"+this.id);
        //进度条点
        var pro_Dom = document.getElementById("proPoint_"+this.id);
        //播放按钮
        var play_Dom = document.getElementById("play_"+this.id);
        //总时间对象
        var ttime_Dom = document.getElementById("ttime_"+this.id);
        //播放时长
        var ctime_Dom = document.getElementById("ctime_"+this.id);
        //静音对象
        var stopv_Dom = document.getElementById("stopv_"+this.id);
        //列表显示隐藏按钮
        var vshow_Dom = document.getElementById("vshow_"+this.id);
        //播放列表对象
        var playlist_Dom = document.getElementById("lists_"+this.id);
        var arr = playlist_Dom.getElementsByTagName("li");
        var flag = false;
        //获取音乐的总时间并格式化
        var ttime;
        aio_Dom.oncanplaythrough = function(){
            ttime = getTime(aio_Dom.duration);
        };
        //播放和暂停
        play_Dom.onclick = function(){
            if(flag == false){
                aio_Dom.play();
                play_Dom.innerHTML = "<i class='fa fa-pause fa-lg'></i>";
                ttime_Dom.innerHTML = ttime;
                flag = true;
            }else{
                aio_Dom.pause();
                play_Dom.innerHTML = "<i class='fa fa-play fa-lg'></i>";
                flag = false;
            };
        };
        //播放时长
        aio_Dom.ontimeupdate = function(){
            var ctime = this.currentTime; //播放时间
            var ttime = this.duration; //总时间
            ctime_Dom.innerHTML = getTime(ctime) + "/";
            var percent = (ctime / ttime) * 100;
            if(percent == 100){
                play_Dom.innerHTML = "<i class='fa fa-play fa-lg'></i>";
                flag = false;
            };
            gress_Dom.style.width = percent+"%";
            pro_Dom.style.left = percent+"%";
        };
        //静音
        var voice = true;
        stopv_Dom.onclick = function(){
            if(voice){
                aio_Dom.muted = true;
                var off = "&nbsp;&nbsp;<i class='fa fa-volume-off fa-lg'></i>";
                stopv_Dom.innerHTML = off;
                voice = false;
            }else{
                aio_Dom.muted = false;
                var up = "&nbsp;&nbsp;<i class='fa fa-volume-up fa-lg'></i>";
                stopv_Dom.innerHTML = up;
                voice = true;
            };
        };
        //列表显示隐藏
        var playlist_Dom_flag = true;
        vshow_Dom.onclick = function(){
            if(playlist_Dom_flag){
                playlist_Dom.style.display = "none";
                playlist_Dom_flag = false;
            }else{
                playlist_Dom.style.display = "block";
                playlist_Dom_flag = true;
            }
        }
        //播放列表
        function foo(){
            var len = arr.length;
            for(var i = 0; i < len; i++){
                arr[i].onclick = (function(k){
                    return function(){
                        listplay(k);
                    }
                })(i);
            }
        }
        foo();
        //点击列表播放
        function listplay(k){
            poster_Dom.src = playlist[k].poster;
            title_Dom.innerHTML = playlist[k].title;
            author_Dom.innerHTML = playlist[k].author;
            aio_Dom.src = playlist[k].mp3;
            aio_Dom.play();
            play_Dom.innerHTML = "<i class='fa fa-pause fa-lg'></i>";
            ttime_Dom.innerHTML = ttime;
            flag = true;
        };
        drag(pro_Dom, function(nl, ml){
            var per = nl / ml;
            gress_Dom.style.width = per * 100 + "%";
            var ctime = aio_Dom.duration * per;
            aio_Dom.currentTime = ctime;
        });
        
        function drag(dom,callback){
            dom.onmousedown = function(e){
                var ev = e || window.event;
                //鼠标的位置
                var x = ev.clientX;
                //left坐标
                var l = dom.offsetLeft;
                //最大距离
                var mw = dom.parentElement.offsetWidth - dom.offsetWidth;
                var nl;
                document.onmousemove = function(e){
                    var ev = e || window.event;
                    nl = ev.clientX - x + l;
                    if(nl <= 0)nl = 0;
                    if(nl >= mw)nl = mw;
                    dom.style.left = nl + "px";
                };
                document.onmouseup = function(){
                    document.onmousemove = null; 
                    document.onmouseup = null;
                    //把还要操作的内容返回出去，，就可以回调了
                    if(callback)callback.call(dom,nl,mw);
                };
            };
        };

        //格式化时间
        function getTime(timer){
            var m = parseInt(timer / 60);
            var s = parseInt(timer % 60);
            m = m < 10 ? "0" + m : m;
            s = s < 10 ? "0" + s : s;
            return m + ":" + s;
        };
    }
};

作者是一名自由程序员，住在上海，喜欢音乐、小说、旅行、以及编程。

P.S. 如果您喜欢这篇文章并且希望学习编程技术的话，请关注一下

最后编辑于：2018.08.29 13:26:51

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 202,406评论 5赞 475
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 84,976评论 2赞 379
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 149,302评论 0赞 335
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,366评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,372评论 5赞 363
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,457评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,872评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,521评论 0赞 256
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,717评论 1赞 295
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,523评论 2赞 319
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,590评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,299评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,859评论 3赞 306
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,883评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,127评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,760评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,290评论 2赞 342

MP3播放器Js插件

index.html代码

css样式代码

js插件代码

推荐阅读更多精彩内容