今天分享一个音乐播放器界面，纯JS歌词滚动效果，可以拖动进度条，下面我们一起来看看如何制作吧。
1、music.html：背景图片(bg.jpg)、播放头像、播放按钮、播放进度条、横幅（放置播放头像）
2、music.js：点击播放按钮更换（背景图片、歌曲名、头像滚动、歌曲播放、按钮样式、歌词播放）
话不多说，下面放代码
步骤一：music.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.0/mediaelementplayer.min.css" />
</head>
<style>
*{
margin: 0;
padding: 0;
}
body {
background: url(./img/bg.png) no-repeat;
/* background-size: cover; */
background-size: 150%;
background-position: 0px -90px;
width: 100vw;
height: 88vh;
}
/* 横幅 */
.banner {
background: url(./img/m_bg.png) no-repeat;
background-size: cover;
background-position: 0px -80px;
width: 960px;
height: 250px;
margin: 80px;
opacity: 0.8;
box-shadow: 10px 15px 15px 1px black;
position: relative;
}
/* 横幅的li样式 */
.banner ul li {
list-style: none;
display: inline-block;
position: absolute;
}
/* 操作图片 */
.banner ul li img {
border-radius: 50%;
cursor: pointer;
/*鼠标变手势*/
}
.m1 {
top: 30px;
left: 100px;
transition: 0.6s;
}
.m1:hover{
transform: scale(1.5);
}
@keyframes img_rotate{
from{
transform: rotate(0deg);
}to{
transform: rotate(360deg);
}
}
.banner .img_rotate{
animation: img_rotate 3s infinite linear;
}
.musicplay {
width: 550px;
height: 105px;
background: black;
position: fixed;
left: 0px;
bottom: 50px;
opacity: 0.8;
/*阴影*/
box-shadow: 10px 15px 15px 1px black;
}
.musicplay .m_img {
margin-top: 15px;
margin-left: 10px;
float: left;
}
.musicplay .m_text {
float: left;
color: white;
font-size: 20px;
font-weight: bold;
margin-top: 18px;
margin-left: 20px;
}
.musicplay .m_btn {
float: left;
position: absolute;
left: 300px;
}
.musicplay .m_btn a {
float: left;
width: 35px;
height: 35px;
background: url(./img/button.png);
margin-top: 18px;
margin-left: 20px;
}
.musicplay .m_btn .m_play {
background-position: -126px 197px;
}
.musicplay .m_btn .m_play:hover {
background-position: -126px 152px;
}
.lrc .m_mp3{
position: absolute;
top: 310px;
left: 45px;
}
/* 播放按钮更换 */
.musicplay .m_btn .m_pause {
background-position: -325px 103px;
}
.musicplay .m_btn .m_pause:hover {
background-position: -369px 103px;
}
/* 歌词css */
.lrc {
width: 500px;
height: 235px;
/* border: 1px solid blanchedalmond; */
position: absolute;
left: 50px;
top: 320px;
/* background: url(../img/3_bg.png) no-repeat 0 54px; */
background-size: 300px 200px;
/* color: white; */
}
.lrc_section {
overflow: hidden;
position: relative;
width: 100%;
height: 200px;
margin-top: 25px;
font-size: 100%;
}
.lrc_ul {
width: 100%;
position: absolute;
top: 500px;
left: 100px;
transition: top .2s linear;
color: white;
}
.lrc li {
list-style: none;
height: 20px;
line-height: 20px;
/* text-align: center; */
}
.active {
color: burlywood;
}
</style>
<body>
<div class="banner">
<ul>
<li class="m1" datasrc="./mp3/瞬-郑润泽.mp3" title="瞬-郑润泽">
<img src="./img/瞬-郑润泽.png" width="85">
</li>
</ul>
</div>
<div class="musicplay">
<div class="m_img">
<img src="./img/m_play.png" width="75">
</div>
<div class="m_text">点击收听</div>
<div class="m_btn">
<a href="#" class="m_play" title="播放">
</a>
</div>
</div>
<div class="lrc">
<audio class="m_mp3" src="./mp3/瞬-郑润泽.mp3" controls loop></audio>
<section class="lrc_section">
<ul class="lrc_ul"></ul>
</section>
</div>
<script type="text/javascript" src="./js/musicAll.js"></script>
<script type="text/javascript" src="./js/jquery-3.4.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/7.0.0/mediaelement-and-player.min.js"></script>
<script type="text/javascript" src="./js/music.js"></script>
<script type="text/javascript">
var str = `
[00:00.00]瞬 - 郑润泽
[00:00.96]词：郑润泽
[00:01.49]曲：郑润泽
[00:02.16]编曲：朴桑松Sunny@壹橙Music
[00:03.57]制作人：苗柏杨@壹橙Music/郑润泽
[00:05.56]吉他：陈麒元@NoMarryStudio
[00:06.49]弦乐：国际首席爱乐乐团
[00:08.1]鼓：伊佳文
[00:08.72]鼓录音：万曦
[00:09.51]和声：彭浩楷
[00:10.27]混音/母带：钟焕楷@壹橙Music/谭玉堂
[00:12.66]封面设计：ELANUS
[00:13.43]艺人经纪：青小桔@青桔娱乐
[00:15.27]艺人宣传：肖肖@Matrix/毛俊@青桔音乐
[00:17.38]企划营销：花境艺@银河方舟/赵国庆@银河方舟
[00:18.07]艺人合作统筹：姚慧佳@银河方舟
[00:18.52]项目总监：宫尹琳@银河方舟
[00:18.93]出品人：陆㻛@银河方舟/张洛铭@Matrix/李淘@青桔音乐
[00:19.63]OP：青桔音乐
[00:19.79]SP：银河方舟
[00:20.62]我想 说不清哪天
[00:24.41]你就会回来
[00:26.72]可太多的思念
[00:29.06]却压着时钟转
[00:34.0]喜欢 在夜深人静
[00:37.99]零碎的不堪
[00:40.88]能孤单的 大胆
[00:46.4]太多挂念
[00:49.84]光好刺眼
[00:53.22]殆尽之前
[00:55.72]你出现在我眼前
[00:58.99]就当是我的幻觉 慢一点
[01:04.89]如果倒转思念
[01:08.07]在这之前
[01:10.1]能够将我换为你来选
[01:13.7]你要让时间怎么转
[01:20.45]刚错过的怎么换
[01:27.25]不想到醒来缺一块
[01:33.82]我想过忘记
[01:35.81]是最后最坏的打算
[01:40.95]一尘不染
[01:44.38]如此简单
[02:16.22]你羞涩的拍下的相片纸
[02:18.68]第一次的画面
[02:19.89]你让我触动了这按键
[02:21.95]是放松的那面
[02:23.11]再到后来慢慢的瓦解
[02:24.98]在暂时分别那天
[02:26.67]谁能够想到那是我们
[02:28.45]两人之间最后的一面
[02:30.91]明明在这之前
[02:32.6]相拥的如此坚定
[02:34.18]说着一直在身边
[02:36.8]说过要一起看的海
[02:38.95]现在我独自等待
[02:42.24]你要让时间怎么转
[02:49.01]刚错过的怎么换
[02:55.74]不想到醒来缺一块
[03:02.45]我想过忘记
[03:04.34]是最后最坏的打算
[03:09.23]我的无力成为了我的败笔
[03:12.47]我是无法做到真的毫不在意
[03:16.01]我只能做的只是每天
[03:18.02]默念 默念
[03:19.58]忘记是最后最后的最坏打算
[03:23.11]一尘不染
[03:26.41]如此简单
[03:33.2]不断的失重
[03:34.93]直到我失控
[03:36.65]没有任何理由
[03:39.78]你已经看见
[03:40.92]怎会相信我说的我不痛
[03:43.97]你要让时间怎么转
[03:50.22]刚错过的怎么换
[03:57.01]不想到醒来缺一块
[04:03.71]我想过忘记
[04:05.52]是最后最坏的打算
[04:10.64]一尘不染
[04:14.08]如此简单
`;
var lrc = []
var timer = []
var reg = /\[(\d{2}:\d{2})\.\d{2,3}\](.+)/
// 歌词滚动
// 获取当前音乐index
$('.banner ul li').add('.m_play').click(function(){
var arr = str.split('\n');
arr.forEach(function(a) {
if (reg.exec(a) != null) {
timer.push(reg.exec(a)[1])
lrc.push(reg.exec(a)[2])
}
})
var lrc_ul = document.querySelector('.lrc_ul')
var frg = document.createDocumentFragment()
lrc.forEach(function(a) {
var lrc_li = document.createElement('li')
lrc_li.innerText = a
frg.appendChild(lrc_li);
})
lrc_ul.appendChild(frg)
var musicplay = document.querySelector('audio')
musicplay.ontimeupdate = function() {
var currtime = parseInt(this.currentTime)
var mins = parseInt(currtime / 60)
var secs = currtime % 60
if (mins < 10) mins = '0' + mins
if (secs < 10) secs = '0' + secs
var timstr = mins + ':' + secs
timer.forEach(function(a, i) {
if (a == timstr) {
lrc_ul.style.top = 40 - i * 20 + 'px'
for (var j = 0; j < lrc_ul.children.length; j++) {
lrc_ul.children[j].className = ''
}
lrc_ul.children[i].className = 'active'
}
})
}
})
</script>
</body>
</html>
步骤二：music.js
var index = 0;
var li = $(".banner ul li");
var img = $(".musicplay .m_img img");
var text = $(".musicplay .m_text");
var prev = $(".musicplay .m_btn .m_prev");
var play = $(".musicplay .m_btn .m_play");
var next = $(".musicplay .m_btn .m_next");
var mp3 = $(".lrc .m_mp3");
var title = document.querySelector(".m1").getAttribute("title");
var flag = false; //歌曲是否播放的标记 true播放 false暂停
li.click(function() {
// 获取当前点击的索引
index = $(this).index();
// 播放歌曲
show();
});
// 封装一个函数 为播放上一首 下一首调用
function show() {
// 更换背景图片 +1因为索引从0开始 图片名称从1开始
change_bg();
change_img_text();
change_btn_title();
img_rotate();
play_mp3();
}
// 更换背景
function change_bg() {
$("body").css({
"background": "url(./img/" + title + "_bg.png) no-repeat",
"background-size": "cover"
});
}
function change_img_text() {
img.attr("src", "./img/" + title + ".png");
text.html(li.eq(index).attr("title"))
}
function change_btn_title() {
play.remove("m_play");
play.addClass("m_pause");
play.attr("title", "暂停");
}
function img_rotate() {
li.children().removeClass("img_rotate");
li.eq(index).children().addClass("img_rotate");
}
function play_mp3() {
mp3.attr("src", li.eq(index).attr("datasrc"));
mp3.get(0).play();
flag = true;
}
play.click(function() {
if (flag) {
mp3.get(0).pause();
li.eq(index).children().removeClass("img_rotate");
play.removeClass("m_pause").addClass("m_play").attr("title", "播放");
flag = false;
} else {
mp3.get(0).play();
li.eq(index).children().addClass("img_rotate");
play.removeClass("m_play").addClass("m_pause").attr("title", "暂停");
flag = true;
change_bg(index + 1);
}
});
// audio_js
$(document).ready(function() {
$('.m_mp3').mediaelementplayer({
features: ['current', 'progress', 'duration'],
startVolume: 0.6,
});
});
以上就是全部内容啦，都放在资源包里啦，如遇到困难请评论。
音乐：瞬-郑润泽.mp3
今日文案：不开心的时候，一个人静下来听听歌吧。
扫一扫
1883
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
