一.开发环境：

开发工具：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="所有歌曲来自网易云，若有侵权联系邮箱（1848514604@qq.com）" 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=thisthat.names=name.itemthat.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=thisvar 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=thisvar 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=thisvar 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=thisvar current=0setInterval(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);}
}