前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。
文章目录：
- 一.开发环境：
- 二.页面视图：
- 1.主文件入口（首页）：
- 2.音乐播放界面：
- 三.功能实现
- （1）、index.html：
- （2）、播放音乐（music.html）：
- （3）、样式文件（index.css）：
- 四.项目地址：
一.开发环境：
开发工具：HbuliderX；
框架：Vant，Mui，Vue
后端：Node
二.页面视图：
正常情况下我们的开发都会有构思图以及模块规划等过程，我们先来看看大致的页面构图：
1.主文件入口（首页）：
2.音乐播放界面：
三.功能实现
项目文件布局：
（1）、index.html：
首先新建文件为h5+app项目，那么我们来看看其中index的页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="./js/mui.min.js"></script>
<link href="./css/mui.min.css" rel="stylesheet"/>
<!-- 引入vue -->
<script src="./js/vue.min.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./css/vant.mim.css" rel="external nofollow" target="_blank" >
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="./js/vant.min.js" rel="external nofollow" ></script>
<!-- 自定义css文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- jquery文件 -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div id="app">
<div class="head">
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">音乐播放器</h1>
</header>
</div>
<div>
<van-notice-bar text="所有歌曲来自网易云，若有侵权联系邮箱（[email protected]）" left-icon="volume-o" />
</div>
<div class="contents">
<span style="display: inline-block;width: 100%;height: 5%;line-height:1.875rem;text-align: center;">当前存在：<strong>{{musicData.length}}</strong>首歌曲(歌曲每天会进行实时更新)</span>
<div class="contents_bottom">
<ul>
<li @click="seeMsg(index,item)" v-for="(item,index) in musicData" :key="index"><span style="padding-left: 0.625rem;font-size: 0.875rem;">{{index+1}}</span>
<span class="mui-icon mui-icon-arrowthinright"></span>
<a href="javascript:;" :title="item" style="color: #000000;font-size: 1.125rem;">
<span style="margin-left: 3.125rem; ">{{item.substring(0,item.length-4)}}</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
var app = new Vue({
el: '#app',
data: {
// 存储所有音乐
musicData:[]
},
created() {
this.get()
},
methods:{
//初始化获取文件列表
get(){
var that=this
$.get('http://www.jcsy.work:3333/see_music').then(res=>{
if(res.code===200){
vant.Toast('初始化数据获取成功！');
//vue中的渲染
that.musicData=res.data
}
}).catch(e=>{
vant.Toast.fail('服务异常，请稍候重试！');
})
},
// 点击跳转传参事件
seeMsg(index,item){
console.log(item)
mui.openWindow({
url:'music.html',
extras: { //extras里面的就是参数了
name:{
item:item,
index:index
}
},
})
}
}
})
</script>
</body>
</html>
引入的文件都是通过下载本地的，为了减少app运行时数据加载的请求
（2）、播放音乐（music.html）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.css" rel="stylesheet" />
<link href="css/mui.min.css" rel="stylesheet"/>
<script src="js/mui.js"></script>
<!-- 引入vue -->
<script src="./js/vue.min.js"></script>
<!-- 引入样式文件 -->
<link rel="stylesheet" href="./css/vant.mim.css" rel="external nofollow" target="_blank" >
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
<script src="./js/vant.min.js" rel="external nofollow" ></script>
<!-- 自定义css文件 -->
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<!-- jquery文件 -->
<script type="text/javascript" src="./js/jquery.min.js"></script>
</head>
<body>
<div id="music">
<div class="head">
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">{{names.substring(0,names.length-4)}}</h1>
</header>
</div>
<div style="height: 93%;" class="contents">
<!-- 图片区域 -->
<div class="img_photo">
<img id="imgshow" src="./img/zxc.jpg" >
</div>
<!-- 歌词区域 -->
<div class="music_words">
<!-- 进度条 -->
<div>
<van-progress :percentage="count" pivot-text='' stroke-width="15"/>
</div>
<span>歌曲全名：{{names}}</span><br>
<p>
<span>
{{musicNow}} / {{musicLength}}
</span>
</p>
<span>暂无歌词，持续更新中...</span>
</div>
<!-- 操作区域 -->
<div class="music_manager">
<!-- 上一首按钮-->
<img src="img/up.png" @click="upMusic">
<!-- 播放与暂停按钮 -->
<img id="start" src="./img/pause.png" @click="loadMusic">
<!-- 下一首按钮 -->
<img src="img/down.png" @click="downMusic">
</div>
<div style="width: 100%;height: 5%;background-color: #dfdfdf;text-align: center;line-height:2.1875rem;">
<span>
Copyright©2021 <strong>叫做长大</strong>
</span>
</div>
<!-- 音乐的播放-->
<audio id="audio" :src="musicname" preload>
</div>
</div>
<script type="text/javascript">
mui.init()
mui.plusReady(function(){
var self = plus.webview.currentWebview();
var name = self.name;//获得参数
var app = new Vue({
el: '#music',
data() {
return{
//标题栏的歌曲名
names:'',
//播放音乐的链接
musicname:'',
//存储歌曲名的
musicData:[],
//歌曲的总长度
musicLength:'',
//当前歌曲的进度
musicNow:'00:00',
//进度条的百分比
count:''
}
},
created() {
var that=this
that.names=name.item
that.musicname='http://www.jcsy.work:3333/music/'+(name.item)
that.get()
// 初始化获取歌曲时长
setTimeout(function(){
var music = document.getElementById("audio");
that.musicLength=that.secondToTimeStr(Math.round(music.duration))
},500)
},
methods:{
// 刷新所有的数据
get(){
var that=this
$.get('http://www.jcsy.work:3333/see_music').then(res=>{
if(res.code===200){
that.musicData=res.data
}
}).catch(e=>{
vant.Toast.fail('服务异常，请稍候重试！');
})
},
// 上一首
upMusic(){
var that=this
var music = document.getElementById("audio");
if(name.index<0){
name.index=that.musicData.length+1
}
that.musicNow='00:00'
$('#start').attr('src','./img/pause.png')
name.index--
that.names=that.musicData[name.index]
that.musicname='http://www.jcsy.work:3333/music/'+that.names
// $('#start').attr('src','./img/start.png')
that.musicLength=that.secondToTimeStr(Math.round(music.duration))
that.getMusic()
music.play()
},
// 下一首
downMusic(){
var that=this
var music = document.getElementById("audio");
if(name.index>=that.musicData.length){
name.index=-1
}
that.musicNow='00:00'
$('#start').attr('src','./img/pause.png')
name.index++
that.names=that.musicData[name.index]
that.musicname='http://www.jcsy.work:3333/music/'+that.names
// $('#start').attr('src','./img/start.png')
that.musicLength=that.secondToTimeStr(Math.round(music.duration))
that.getMusic()
music.play()
},
// 开始暂停按钮
loadMusic(){
var that=this
var music = document.getElementById("audio");
if( $('#start').attr('src')==='./img/pause.png'){
$('#start').attr('src','./img/start.png')
music.play()//播放音乐
that.getMusic()
}else{
$('#start').attr('src','./img/pause.png')
music.pause();//暂停音乐
}
},
//获取列表
getMusic(){
var that=this
var current=0
setInterval(function(){
var music = document.getElementById("audio");
that.count=Math.floor((music.currentTime/music.duration)*100)
that.musicNow=that.secondToTimeStr(Math.round(music.currentTime))
if(that.count===100){
music.pause()
alert('歌曲播放结束')
}
},1000)
},
// 秒数转化
secondToTimeStr(t) {
if (!t) return;
if (t < 60) return "00:" + ((i = t) < 10 ? "0" + i : i);
if (t < 3600) return "" + ((a = parseInt(t / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
if (3600 <= t) {
var a, i, e = parseInt(t / 3600);
return (e < 10 ? "0" + e : e) + ":" + ((a = parseInt(t % 3600 / 60)) < 10 ? "0" + a : a) + ":" + ((i = t % 60) < 10 ? "0" + i : i);
}
}
}
})
});
</script>
</body>
</html>
（3）、样式文件（index.css）：
*{
margin: 0;
padding: 0;
}
body,html{
width: 100%;
height: 100%;
}
#app{
width: 100%;
height: 100%;
/* background-color: pink; */
}
#music{
width: 100%;
height: 100%;
/* background-color: skyblue; */
}
.head{
width: 100%;
height: 7%;
/* background-color: skyblue; */
}
.contents{
width: 100%;
height: 87%;
/* background-color: #07C160; */
}
.contents_bottom{
width: 100%;
height:95%;
/* background-color: #007AFF; */
overflow: auto;
}
.contents_bottom ul li{
width: 100%;
height: 3.75rem;
background-color: #dfdfdf;
margin-top: 0.625rem;
margin-right: 0.625rem;
line-height: 3.75rem;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* 图片 */
.img_photo{
width: 70%;
height: 40%;
/* background-color: #07C160; */
margin: 0 auto;
text-align: center;
/* border-radius: 50%; */
/* animation: music 15s linear infinite; */
}
.img_photo img{
width: 90%;
height: 90%;
margin-top: 0.625rem;
border-radius: 50%;
}
/* 歌词 */
.music_words{
width: 100%;
height: 35%;
/* background-color: skyblue; */
line-height: 3.125rem;
margin-top: 0.3125rem;
text-align: center;
}
/* 操作 */
.music_manager{
width: 100%;
height: 17%;
/* background-color: orangered; */
margin-top: 0.625rem;
display: flex;
}
.music_manager img{
width: 1;
height: 5rem;
margin-top: 1.25rem;
margin-left:1.875rem;
margin-right: 1.25rem;
}
#imgshow{
/* transform: rotate(90deg); */
animation: music 15s linear infinite;
}
@keyframes music{
0%{
transform: rotate(0deg);
}
25%{
transform: rotate(90deg);
}
50%{
transform: rotate(180deg);
}
75%{
transform: rotate(270deg);
}
100%{
transform: rotate(360deg);
}
}四.项目地址：
- Git地址：MusicPlayer
- 资源地址：MusicPlayer
不论你的生活如何卑微，你要面对它生活，不要躲避它，更别用恶言咒骂它。