html5+JS制作音乐播放器

今天我们要实现的这个播放页面主要是通过audio标来实现，然后上一首、暂停等按钮时通过字体图标来实现的。
先看一下最终的效果：

HTML部分：

这里最外层用来两个盒子photo和words，分别用来存放图片和歌词。然后左边盒子里面放了两个div标记，分别用来存放图片和图标。这里图标是用的子图图标来实现的。然后歌词部分是直接放在div里面的。

<body><!-- 图片 --><div id="photo"><center><div id="photo2"><i class="fa fa-angle-double-right" aria-hidden="true" id='point' οnclick="move()"></i></div><div id="logo1"><audio src="music/1.mp3" autoplay="autoplay" id="music">当前浏览器不支持audio</audio><!-- 4个按钮 --><button type="button"><i class="fa fa-heart" aria-hidden="true"></i>喜欢</button><button type="button"><i class="fa fa-bookmark-o" aria-hidden="true"></i>收藏</button><button type="button"><i class="fa fa-download" aria-hidden="true"></i>下载</button><button type="button"><i class="fa fa-share-square-o" aria-hidden="true"></i>分享</button><br><br><!-- 进度条 --><input type="range" value="10"/><br><!-- 播放按钮图标 --><i class="fa fa-random" id="volume" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-step-forward" id="forward" aria-hidden="true" οnclick="last()"></i>&nbsp;&nbsp;&nbsp;&nbsp;<!-- fa fa-play-circle --><i class="fa fa-play-circle" id="playing" aria-hidden="true" οnclick="playing()"></i>&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-step-backward" id="backward" aria-hidden="true" οnclick="next()"></i>&nbsp;&nbsp;&nbsp;&nbsp;<i class="fa fa-volume-up" id="random" aria-hidden="true"></i>&nbsp;&nbsp;&nbsp;&nbsp;</div></center></div><!-- 歌词 --><div id="words">歌词……div><!-- 引入Js --><script type="text/javascript" src="player.js"></script></body>

CSS部分：

这一部分主要是设置了盒子的宽高、位置及字体。背景等。

#photo{width: 550px;height: 600px;background-color: #191970;
}
#words{width: 450px;height: 600px;background-color: #191970;text-align: center;color: white;line-height: 25px;
}
#photo,#words{float: left;}
#photo2{width: 350px;height: 350px;margin-top: 50px;background-image: url(img/1.jpg);background-size: contain;border: black 10px solid;border-radius: 50%;}
button{width: 80px;height: 30px;margin-top: 30px;margin-left: 20px;border: darkgray 1px solid;border-radius: 5px;color: dimgray;
}
button:hover{color: black;}
#backward,#forward,#random,#volume{font-size: 30px;color: white;
}
#playing{font-size: 45px;color: white;
}
#point{font-size:50px;margin-top:140px;margin-left:380px;
}

JS部分：

这里主要是实现了播放、暂停、下一首、上一首和歌词的显示隐藏等效果。

播放/暂停：

//先获取播放按钮
var Play=window.document.getElementById('music');function playing(){var Pause=document.getElementById('playing');//判断是否在播放，如果在播放则点击时暂停，并且该图标的类名变为暂停样式。反之亦然。if(Play.paused){Play.play();Pause.className='fa fa-pause-circle';}else{Play.pause();Pause.className='fa fa-play-circle';}}

上一首/下一首：
这里是通过数组以及索引 i来实现他的路径的赋值，实现切换的效果。

   let root="music/";let songs=['1.mp3','2.mp3','3.mp3'];let i=0;var Pic=document.getElementById('photo2');//上一首function last(){let song;i>0?--i:i=songs.length-1;Play.src = root+songs[i];Play.play();}//下一首function next(){if (++i>songs.length-1) {i=0}let song=songs[i];Play.src=root+song;Play.play();}

歌词显示/隐藏：
这里的效果是通过点击图标是盒子隐藏，再点击时盒子你隐藏，主要是通过display属性来实现的。

//歌词显示隐藏function move(){var Odiv=document.getElementById('words');var Point=document.getElementById('point');//通过类名来判断隐藏还是显示的效果if(Point.className=='fa fa-angle-double-right'){Odiv.style.display='none';Point.className='fa fa-angle-double-left';}else if(Point.className=='fa fa-angle-double-left'){Odiv.style.display='block';Point.className='fa fa-angle-double-right';}}

html5+JS制作音乐播放器相关推荐

HTML+纯JS制作音乐播放器
该篇文章会教你通过JavaScript制作一个简单的音乐播放器.包括播放.暂停.上一曲和下一曲. 阅读本文章你需要对HTML.CSS和Javascript有基本的了解. 话不多说,先上图. emmm. ...
JS制作音乐播放器并高亮歌词滚动以及按钮暂停播放切歌
简介:高亮歌词这里需要说一个文件,也就是.lrc文件,这个功能制作是将文件中时间与音乐文件中播放的进度作比较,实现文件何时滚动换行以及高亮的,好了看代码(我的歌曲文件是周总的<等你下课>) ...
html5在线音乐列表播放器,简洁的html5 mp3列表音乐播放器代码
特效描述:简洁的html5 mp3列表音乐播放器代码.html5网页音乐播放器,mp3播放器,简洁音乐播放器代码结构 1. 引入CSS 2. 引入JS 3. HTML代码标题歌手 00:00/0 ...
html实现音乐界面设计,基于HTML5技术的音乐播放器的设计与实现.doc
基于HTML5技术的音乐播放器的设计与实现基于HTML5技术的音乐播放器的设计与实现常志强刘正余杨劲楠皖西学院电子与信息工程学院 X 关注成功! 加关注后您将方便地在我的关注中得到本文献的 ...
web html5音乐播放器设计与实现,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11Nov.2017 赤峰学院学报(自然科学版) Journal of Chifeng University (Natural Science Edition )第33卷第11期(下 ...
树莓派3B qt+mplayer制作音乐播放器(10)
内容树莓派3B qt+mplayer制作音乐播放器:播放.暂停.上一曲.下一曲,音量调节. 平台:树莓派+qt+mplayer 1.配置 qt安装见此: https://blog.csdn.net/ ...
winform制作音乐播放器
winform制作音乐播放器本文利用C# 调用Windows自带的Windows Media Player 打造一款属于自己的音乐播放器,以供学习分享使用,如有不足之处,还请指正. 概述 Windo ...
html+css+js本地音乐播放器，实现可视化音频频谱
效果 html+css+js本地音乐播放器,实现可视化音频频谱前言之前用swing写了个本地音乐播放器(如下图),但是效果一言难尽,界面丑,功能bug也多,唉所以后面又重新用html写了个,界面 ...
基于html的音乐播放设计,基于HTML5技术的音乐播放器的设计与实现
Vol.33No.11 Nov.2017 赤峰学院学报(自然科学版) JournalofChifengUniversity(NaturalScienceEdition) 第 33 卷第11 期(下) ...

html5+JS制作音乐播放器

HTML部分：

CSS部分：

JS部分：

html5+JS制作音乐播放器相关推荐

最新文章

热门文章