JS写一个漂亮的音乐播放器

先放上效果图：

JS写一个漂亮的音乐播放器

正如图中所展示的播放器那样，我们用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中一清二楚，所以按着功能一步一步来还是很容易上手的。

JS写一个漂亮的音乐播放器的更多相关文章

用H5和js写一个移动端自定义播放器
前言由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条 ...
Hide-Music-Player 一个完整的音乐播放器《IT蓝豹》
Hide-Music-Player 一个完整的音乐播放器 Hide-Music-Player 一个完整的音乐播放器,本例子主要包括几个点 (1)摇一摇进入播放器 (2)下拉展开新视图(扫描音乐) (3 ...
Swift - 制作一个在线流媒体音乐播放器（使用StreamingKit库）
在之前的文章中,我介绍了如何使用 AVPlayer 制作一个简单的音乐播放器(点击查看1.点击查看2).虽然这个播放器也可以播放网络音频,但其实际上是将音频文件下载到本地后再播放的. 本文演示如何使用 ...
vue——一个页面实现音乐播放器
请忽略下面这段文字年关将至,时间好歹又多出了些许.却不敢过度消遣.岁月未曾饶过我,我亦不想饶过岁月.且将它塞得膨胀,让这一年看似加更充实.不曾料想我一个爱些风花雪月.研墨行歌之人,却做起了碼农这一行当 ...
用pyqt5做一个简易的音乐播放器
需求要求可以读取音频文档,有播放和暂停的功能附上代码(1)UI界面 # -*- coding: utf-8 -*- # Form implementation generated from rea ...
Ubuntu 下一个可用的音乐播放器
参考:http://www.pairsdoll.com/install-audacious-music-palyer-in-ubuntu.html/ 方法:打开terminal,sudo apt-ge ...
HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
使用Audio API设计绚丽的HTML5音乐播放器
HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...
vue音乐播放器
利用vue写一个简单的音乐播放器,包括功能有歌曲搜索.歌曲播放.歌曲封面.歌曲评论.播放动画.mv播放六个功能. <template> <div class="wrap&q ...

随机推荐

Ubuntu 14&period;04 配置静态IP
命令行手工配置静态IP比较麻烦,记录于此备查. 1,ubuntu的网络配置文件在: # /etc/network/interfaces //这个文件里 2,默认安装时,网络配置是使用DHCP自动分配I ...
信号处理基础概念比较----频谱vs功率谱vs能谱
频谱: 对动态信号在频率域内进行分析,分析的结果是以频率为坐标的各种物理量的谱线和曲线,可得到各种幅值以频率为变量的频谱函数F(ω).频谱是个很不严格的东西,常常指信号的Fourier变换.频谱分析中 ...
docker 连接容器
1.通过端口映射 sudo docker run -d -P training/webapp python app.py 容器有一个内部网络和IP地址(在使用Docker部分我们使用docker in ...
Spring mvc编码配置
Spring3 MVC也带有自己的编码: jar包:org.springframework.web-3.0.0.RELEASE.jar 只需要在web.xml配置即可: <!-- spring ...
&commat;JsonFormat 日期格式自动格式化
通常日期格式都是以时间戳的形式存放在数据库里,当前端页面通过接口查询时,我们会将一个对象的某些属性查出来返回给页面. 例如,某个类里面有个属性 Timestamp create_time 给这个对象实 ...
FutureTask分析(1&period;8）
FutureTask简介 FutureTask用于异步计算,也就是支持异步执行并返回结果.FutureTask本身是一个Runable,所以可以交给Thread来运行,在提交给Thread运行后,可以 ...
akoj-1162-计算表达式
计算表达式 Time Limit:1000MS Memory Limit:65536K Total Submit:14 Accepted:7 Description 对于一个不存在括号的表达式进行计 ...
css样式之input输入框默认样式
帮朋友写个简单的课程设计,后面会贴出来,项目刚开始就遇到一个坑(给input输入框设定样式,但是,点击后会出现蓝色边框),之前写其他的项目时也遇到过,百度一下资料解决了,现在又碰到了,写一下,留着备用 ...
通过css改变svg img的颜色
需求如下图,hover的时候改变图标颜色,图标为引入的svg img 一般的解决办法有:1.字体图标改变css的color属性:2.js在hover事件中切换图片:3.老一点的方案是hover切换背景 ...
setDefaultKeyMode设置Activity的五种按键模式
setDefaultKeyMode (int mode) 用来设置一个Activity的默认的按键模式, mode一共有五种 DEFAULT_KEYS_DISABLE DEFAULT_KEYS_DIA ...