先放上效果图：



正如图中所展示的播放器那样，我们用HTML+CSS+JS将这个效果实现出来。

HTML页面布局

<div class="music">

		<div class="photo">

			<div class="photo_pic" id="photo_pic"><img src="" width="100%"><div class="cd"></div></div>

		</div>

		<div class="progress">

			<h3 style="text-align: center;">大咖解读青春期包皮手术</h3>

			<time>00:00</time><time style="float:right" id="time2">00:00</time>

			<div class="progress_obj clear">

				<div class="progress_bar" id="progress_bar"><div class="progress_cube" id="progress_cube"></div></div>

			</div>

			<div class="progress_obj clear">

				<div class="ctrl_btn">

					<div id="prev_btn" class="prev_btn btn"></div>

					<div id="play_btn" class="play_btn btn"></div>

					<div id="next_btn" class="next_btn btn"></div>

				</div>

				<div class="ctrl_info">

					<div class="vol btn"><div class="vol_bar" id="vol_bar"><div class="vol_cube" id="vol_cube"></div></div></div>

					<div class="list btn" id="list" style=""><img src="/2017mobile/images/share.png" style="width:50%;padding-top:2%;"><div id="list_con"></div></div>

				</div>

				<audio id="audio_src">

					<source src="" type="audio/mpeg">

					</audio>

				</div>

			</div>

		</div>

		<div class="clear"></div>

		<div class="choose" style="display: none">

			<div class="choose_obj choose_like">

				<div class="icon" id="icon1">


				</div>

				<span>喜欢</span>

			</div>

			<div class="choose_obj choose_share">

				<div class="icon" id="icon2">


				</div>

				<span>收藏</span>

			</div>

		</div>

		<div class="lyric">

			<div class="lyric_tit" id="lyric_tit"></div>

			<div id="lyric_txt"></div>

		</div>

	</div>

将自己想要的样式和按钮统统展示到前端页面上来，然后就是添加样式：

.music{  width: 100%;  border-right: 1px solid rgba(255,255,255,0.5);  box-sizing: border-box; }

.photo{  width: 30%;float:left;}

.photo_pic{ border-radius: 50%;  /* box-shadow:0 0 2px #666, 0 0 10px #666;position: relative;*/ }

.photo_pic img{/*border-radius: 100%*/}

.choose{  height:150px;  }

.choose_obj{  width: 50%;  float: left;  text-align: center;  color: #fff  }

.icon{  margin-top: 40px;  height: 50px;  font-size:50px;  line-height: 50px;  font-family: "iconfont";  cursor: pointer;  text-shadow: 2px 2px 0px #666;  }

.icon.yellow+span{  color: yellow;  }

.icon.pink+span{  color: #f7759f;  }

.choose_obj span{  display: block;  height: 30px;  line-height: 30px;  font-family: "微软雅黑";  font-size: 14px;  }

.cd{display: none;  width: 10px;  height: 10px;  position: absolute;  top:50%;  left: 50%;  margin-top: -15px;  margin-left: -15px;  background: #666;  border: 10px solid #fff;  box-shadow: 0 0 1px #000;  border-radius: 50%;  }

.progress{width: 67%; float:right;  font-family: "iconfont";margin-right: 1%; }

.progress h3{font-size:2rem;}

.lyric{  width: 100%;  }

time{  font-size: 12px;  width: 49px;  text-align: center;  color: #000000;  height: 25px;  line-height: 25px;  float: left;  }

.progress_bar{  position: relative;  width:99%;height: 2px;  margin-top: 5px;  background-color: #000000;cursor: pointer;  }

.progress_cube{  position: absolute;  left: 0;  top: -5px;  width: 4px;  height: 4px;  background-color: #fff;  border:5px solid #064895;  border-radius: 50%;  cursor: pointer;  }

.progress_obj{  line-height: 30px;  color: #000000;font-weight: bold; margin-top:5px;}

.ctrl_btn{  width: 40%;  float: left;  }

.ctrl_btn .btn{  color:black;width: 33.3%;float: left;  text-align: center;  cursor: pointer;  }

.play_btn{  font-size:18px;}

.prev_btn{font-size:12px;}

.next_btn{font-size:12px;}

.ctrl_info{  width:55%;  float: left;  }

.vol{  width:76%;height: 100%;  float: left;margin-left: 4%; color:black;}

.vol_bar{  position: relative;  width:68%;  float: right;  height: 2px;  background-color:#000000;  margin-top: 13px;margin-right:10%; }

.vol_cube{  position: absolute;  left: 0;  top: -4px;  width: 3px;  height: 3px;  background-color: #fff;  border:4px solid #064895;  border-radius: 50%;  cursor: pointer;  }

.list{ width: 20%; height: 100%;  float: left;  text-align: center;  }

.lyric_tit{  color: #f00;  text-align: center;  font-weight: 700;  margin-top: 3px;  }

.lyric_con{  position: relative;  line-height: 26px;  color: #555;  font-size: 14px;  padding: 0px 50px ;  text-align: center;  height: 150px;  overflow: hidden;  margin-top: 15px;  }

#lyric_txt{   left: 0;  top:0;  width: 100%;  }

.lyric_con p.played{  color: #999;  }

.lyric_con p.active{  color: #064895;  font-size: 20px;  font-weight: 700;  }

.audio{  display: none;  }

#list{  position: relative;  cursor: pointer;  }

#list_con{  position: absolute;  bottom: 30px;  right: 0px;  width: 150px;  height: 100px;  color: #666;  padding: 10px 0;  border-radius: 5px;  background: rgba(255,255,255,.8);  font-family: "微软雅黑";  font-size: 14px;  cursor: pointer;  display: none;  }

.anniu{margin: 0rem auto;}

.audio_rmtj{margin: 1.3rem auto;}

.audio_tag{width: 93%; margin: 1.3rem auto;}

.audio_tag li{float:left;width: 22.4%; margin: 1%; background: #f5f5f5; border-radius: 0.3rem;border:1px solid #e8e7e7;text-align: center;font-size: 1.8rem;color:#333; line-height: 210%;display: inline }

.audio_tag li a{display: block}

样式不是死的，所以可以灵活改变。

接下来是JS内容，JS要实现的是播放功能，以及拖动播放条功能，还有快进后退功能，再加上分享功能，歌词跟随播放功能

<script type="text/javascript">

    function getTime() {

        setTimeout(function () {

            var duration = $("#audio_src")[0].duration;

            if(isNaN(duration)){

                getTime();

            }

            else{

                var music_time0 =Math.floor( $("#audio_src")[0].duration);

                var music_time = formatSeconds(music_time0);

                $("#time2").html(music_time);

            }

        }, 10);

    }

    getTime();

    var lrc_content=$("#lrc_content").val();

    //data

    var lyric=[{

        'name':"",

        'img':'/2017mobile/images/photo1.jpg',

        'audio_src':'/2017mobile/music/zennenggufuchunguang.mp3',

        'content':lrc_content

    }];

    window.onload=function(){

        var play_btn=document.getElementById("play_btn");

        var prev_btn=document.getElementById("prev_btn");

        var next_btn=document.getElementById("next_btn");

        var audio=document.getElementsByTagName("audio")[0];

        var initTime=document.getElementsByTagName("time")[0];

        var time=document.getElementsByTagName("time")[1];

        var progress_bar=document.getElementById("progress_bar");

        var progress_cube=document.getElementById("progress_cube");

        var vol_bar=document.getElementById("vol_bar");

        var vol_cube=document.getElementById("vol_cube");

        var lyric_txt=document.getElementById("lyric_txt");

        var icon1=document.getElementById("icon1");

        var icon2=document.getElementById("icon2");

        var lyric_tit=document.getElementById("lyric_tit");

        var list_con=document.getElementById("list_con");

        var list_item=list_con.getElementsByTagName("p");

        var songIndex=0;

        var container=document.getElementById("container");

        var obj;

        function config(){

            this.play_mark=true;

            this.duration=audio.duration;

            this.play_btn="";

            this.vol=audio.volume;

            this.timer=null;

            this.rotateSum=0;

            this.icon1=icon1.innerHTML;

            this.icon2=icon2.innerHTML;

            this.icon1_co=icon1.style.color;

            this.endplay_btn="";

            this.endicon1=icon1.innerHTML;

            this.endicon2="";

        }

        obj= new config();

        //列表控制

        var allSong="";

        for(var song=0;song<lyric.length;song++)

        {

            allSong+="<p>"+lyric[song].name+"</p>"

        }

        list_con.innerHTML=allSong;

        list_con.style.height=lyric.length*30+"px";

        for(var listIndex=0;listIndex<list_item.length;listIndex++)

        {

            list_item[listIndex].index=listIndex;

            list_item[listIndex].onclick=function(ev)

            {

                var ev=ev||window.event;

                ev.stopPropagation();

                songIndex=this.index;

                change_music();

            }

        }

        list_con.style.display="none";

        list.onclick=function()

        {

            if(list_con.style.display=="none")

            {

                list_con.style.display="block";

            }

            else{

                list_con.style.display="none";

            }

        }

        //下一首

        next_btn.onclick=function(){

            songIndex++;

            change_music();

        }

        prev_btn.onclick=function(){

            songIndex--;

            change_music();

        }

        function change_music()

        {

            clearInterval(obj.timer);

            if(songIndex>=lyric.length)

            {songIndex=0}

            else if(songIndex<0)

            {songIndex=lyric.length}

            obj= new config();

            iconinit();

            audioInit();

            playedTime();

            lyric_ctrl();

        }

        //初始化总时长、音量等

        function audioInit()

        {

            time.innerHTML=format(audio.duration);

            audio.volume=0.5;

            play_btn.innerHTML=obj.play_btn;

            vol_cube.style.left=audio.volume*vol_bar.offsetWidth+"px";

            lyric_tit.innerText=lyric[songIndex].name;

            if(lyric[songIndex].img==''){

                $("#photo_pic img").attr("src","/2017mobile/images/img_no.jpg");

            }else{

                $("#photo_pic img").attr("src",lyric[songIndex].img);

            }

            audio.src=lyric[songIndex].audio_src;

            progress_cube.style.left=0;

        }

        audioInit();

        //播放时间

        audio.addEventListener("timeupdate",function()

        {

            playedTime();

        })

        function playedTime(){

            if(audio.currentTime==audio.duration)

            {

                next_btn.onclick();

                play_btn.onclick();

            }

            var n=audio.currentTime/audio.duration;

            progress_cube.style.left=n*progress_bar.offsetWidth+"px";

            initTime.innerHTML=format(audio.currentTime);

            var id_num=parseInt(audio.currentTime);

            var lyric_p=document.getElementsByTagName("p");

            for(var i=0;i<lyric_p.length;i++)

            {

                lyric_p[i].index=i;

            }

            if(document.getElementById("lyric"+id_num))

            {

                var obj=document.getElementById("lyric"+id_num);

                for(var i=0;i<obj.index;i++)

                {

                    lyric_p[i].className="played";

                }

                for(var j=obj.index;j<lyric_p.length;j++)

                {

                    lyric_p[j].className="";

                }

                obj.className="yellow active";

            }

        }

        function format(time)

        {

            var time=parseInt(time);

            var m=parseInt(time/60);

            var s=parseInt(time%60);

            m=zero(m);

            s=zero(s);

            function zero(num)

            {

                if(num<10)

                {

                    num="0"+num;

                }

                return num;

            }

            return m+":"+s;

        }

        //拖拽进度条

        progress_cube.onmousedown=function(ev)

        {

            var ev=ev||window.event;

            var initX=ev.clientX-this.offsetLeft;

            this.onmousemove=function(ev)

            {

                var ev=ev||window.event;

                var x=ev.clientX-initX;

                if(x<0){x=0}

                if(x>progress_bar.offsetWidth-14){x=progress_bar.offsetWidth-14}

                play_ctrl(x);

            }

            document.onmouseup=function()

            {

                document.onmousemove=null;

                progress_cube.onmousemove=null;

            }

        }

        function play_ctrl(x){

            var timego=x/progress_bar.offsetWidth*audio.duration;

            progress_cube.style.left=x+"px";

            audio.currentTime=timego;

            playedTime();

        }

        //点击进度条位置

        progress_bar.onclick=function(ev)

        {

            var ev=ev||window.event;

            var dis=ev.clientX-(container.offsetLeft+progress_bar.offsetLeft)-7;

            progress_cube.style.left=dis+"px";

            play_ctrl(dis);

        }/**/

        //拖动音量键

        vol_cube.onmousedown=function(ev)

        {

            var ev=ev||window.event;

            var initX=ev.clientX-vol_cube.offsetLeft;

            this.onmousemove=function(ev)

            {

                var ev=ev||window.event;

                var x=ev.clientX-initX;

                if(x<0){x=0}

                if(x>vol_bar.offsetWidth-11){x=vol_bar.offsetWidth-11}

                var volresult=x/vol_bar.offsetWidth;

                this.style.left=x+"px";

                audio.volume=volresult;

            }

            document.onmouseup=function()

            {

                document.onmousemove=null;

                vol_cube.onmousemove=null;

            }

        }

        //点击播放

        play_btn.onclick=function()

        {

            clearInterval(obj.timer);

            if(obj.play_mark)

            {

                this.innerHTML=obj.endplay_btn;

                audio.play();

                obj.timer=setInterval(function()

                { obj.rotateSum=obj.rotateSum+0;

                    photo_pic.style.transform="rotate("+obj.rotateSum+"deg)";

                },30)

            }

            else{

                this.innerHTML=obj.play_btn;

                audio.pause();

            }

            obj.play_mark=!obj.play_mark;

        }

        //歌词处理

        //喜欢 收藏

        icon2.onclick=function()

        {

            if(this.innerHTML==obj.icon2)

            {

                this.innerHTML=obj.endicon2;

                this.style.color="yellow";

                this.className="icon yellow";

            }

            else{

                this.innerHTML=obj.icon2;

                this.style.color="#fff";

                this.className="icon";

            }

        }

        icon1.onclick=function()

        {

            if(this.style.color==obj.icon1_co)

            {

                this.innerHTML=obj.endicon1;

                this.style.color="#f7759f";

                this.className="icon pink";

            }

            else{

                this.innerHTML=obj.icon1;

                this.style.color=obj.icon1_co;

                this.className="icon";

            }

        }

    };

    //秒转分

    function formatSeconds(value) {

        var theTime = parseInt(value);// 秒

        var theTime1 = 0;// 分

        var theTime2 = 0;// 小时

        if(theTime > 60) {

            theTime1 = parseInt(theTime/60);

            theTime = parseInt(theTime%60);

            if(theTime1 > 60) {

                theTime2 = parseInt(theTime1/60);

                theTime1 = parseInt(theTime1%60);

            }

        }

        var result = ""+parseInt(theTime);

        if(theTime1 > 0) {

            result = ""+parseInt(theTime1)+":"+result;

        }

        if(theTime2 > 0) {

            result = ""+parseInt(theTime2)+":时"+result;

        }

        return ( result);

    };

</script>

在这个示例中，JS库基于jq就行。功能设置在JS中一清二楚，所以按着功能一步一步来还是很容易上手的。

最新文章

  1. BZOJ1500[NOI2005]维修数列
  2. js中页面跳转几种方法
  3. 绘制n边形：用两个以上的控件来控制矩形的颜色、大小、位置及空实心(程序代写)
  4. CSS入门教程——定位(positon)
  5. 匿名方法，Lambda表达式，高阶函数
  6. IBM Minus One
  7. CentOS 7安装配置FTP服务器
  8. 处理json数据的空数据为任意字符
  9. react中对于key值的理解
  10. linux 安装中文支持
  11. Think twice before starting the adventure
  12. pycharm pip 源修改以及包管理（转载）
  13. Ubuntu18.04下Python Web环境搭建
  14. GROUP BY 聚合函数(max min sum avg count) 和HAVING的 使用
  15. FINAL视频预发布
  16. Atitti cto的日常流程与职责attilax总结
  17. jenkins 定时构建 位置
  18. 在centos docker中安装nvidia驱动
  19. HDU 3746 Cyclic Nacklace(求补齐循环节最小长度 KMP中next数组的使用 好题！！！）
  20. ＨCNA管理设置文件系统FTP服务上传下载文件

热门文章

  1. idea代码神器：根据表生成代码
  2. ubuntu13.10安装tomcat
  3. C#操作Word的超详细总结 ---转载
  4. task20160125
  5. C++11常用特性介绍——auto类型修饰符
  6. web前端面试第一次[javascript函数和方法的区别]
  7. Centos7 配置subversion
  8. 【快学springboot】8.JPA乐观锁OptimisticLocking
  9. No module named &#39;widgets&#39;
  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 按钮：表示需要谨慎操作的按钮