MP3播放器Js插件

作者: Wpixel | 来源:发表于2018-08-29 13:03 被阅读0次

常用工具
MP3播放器Js插件
hz-h5视频问题解决方案
小型音乐播放器插件APlayer.js的简单使用例子
Wavesurfer.js的使用教程
超级炫酷界面C++编写音乐播放器，免费开源代码！
Python处理MP3的歌词和图片！
应用swift中的.self与.Type
JS 插件文档库邀你一起协同创作
Vue插件（四）全局资源（过滤器）

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

项目结构
-- 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. 如果您喜欢这篇文章并且希望学习编程技术的话，请关注一下

常用工具
下载音乐播放器yum install rhythmbox 下载mp3插件yum install gstreamer...
MP3播放器Js插件
曾子曰：“吾日三省吾身——为人谋而不忠乎？于朋友交而不信乎？传不习乎？” 项目结构-- css------- fo...
hz-h5视频问题解决方案
参考资料 1.插件播放器 video.js /chimee.js /xgplayer.js 2.自定义参考资料 ...
小型音乐播放器插件APlayer.js的简单使用例子
本篇博客将会给出一个小型音乐播放器插件APlayer.js的使用例子。关于APlayer.js的具体介绍和Gi...
Wavesurfer.js的使用教程
前言： Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件，本文主要...
超级炫酷界面C++编写音乐播放器，免费开源代码！
VB编写的一套MP3音乐播放机程序，界面模仿了鼎鼎大名的Winamp播放器，使用了增强型的皮肤插件，资源文件完整。...
Python处理MP3的歌词和图片！
一些MP3播放器（包括iphone、ipod、itouch、blackberry等）可以在播放mp3的时候显示专辑...
应用swift中的.self与.Type
在开发插件化播放器时遇到了一个插件批量初始化的需求：不同的播放器需要配置不同的插件列表，而每一个插件的构造函数是不...
JS 插件文档库邀你一起协同创作
项目概览 JS 插件文档库地址：JS 插件文档库 · 语雀在线演示代码仓库：JS 插件文档库示例代码 · Git...
Vue插件（四）全局资源（过滤器）
一、创建插件创建插件文件DateFormatter.js 二、引入插件在main.js文件中引入插件使用Vu...