一.开发环境：

开发工具：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);}
}

四.项目地址：

Git地址：MusicPlayer
Csdn资源地址：MusicPlayer

不论你的生活如何卑微，你要面对它生活，不要躲避它，更别用恶言咒骂它。

基于H5+js开发一款音乐播放器相关推荐

好程序员前端分享使用JS开发简单的音乐播放器
好程序员前端分享使用JS开发简单的音乐播放器,最近,我们在教学生使用JavaScript,今天就带大家开发一款简单的音乐播放器.首先,最终效果如图所示: 首先,我们来编写html界面index.htm ...
基于Arduino Uno开发板制作音乐播放器
基于Arduino Uno开发板制作音乐播放器本文将基于Arduino开发板实现一个音乐播放器. 利用Arduino Uno读取sd卡模块中内存卡的音乐,传输信号到扬声器进行播放. 一.项目软硬件简 ...
基于MSP430G2553官方开发板的音乐播放器
基于MSP430G2553官方开发板的音乐播放器实现目标硬件资源芯片资源使用情况外接硬件程序实现开发环境配置各部分硬件驱动主循环功能实现实现目标实现以蜂鸣器为播放设备,能够对简谱乐 ...
基于Android系统开发的简易音乐播放器
大概做了一周左右,一个简易版本的音乐播放器.主要有三个界面,先上图: 一个主界面:主要负责1加载外部存储的音乐文件信息到应用内置数据库中2转到音乐文件列表界面一个音乐文件列表界面:主要1负责展示音乐 ...
Electron + Vue开发一款音乐播放器
一.桌面版音乐播放器劳动节放假了,给大家分享一个轻松的开源项目,一个基于 Electron + Vue 开发的音乐软件.项目的一大特色就是多平台搜索歌曲,并支持下载功能(有些平台的vip歌曲也可以哦 ...
基于vue,js的简单pc 音乐播放器
一.简介项目github地址根据github上的http://www.daiwei.org/components/d-audio/来制作的他的是使用纯ES6来写的,我是通过改写他的,使用VUE来 ...
【开源推荐】进阶实战，从一款音乐播放器开始
0.前言前面有同学问我,想要做一个Android 实战项目,问我有没有好的开源项目可以参考和练习? 想想自己以前也是,当项目没有什么新任务的时候,想着自己写一个实战项目来来练练手,那拿什么项目来练手 ...
搬砖之路----MusicPlayer 一个基于Vlc（2.0+）开发的android音乐播放器--浅析在android开发过程中播放器选择之路！
前言 MusicPlayer 是一款基于vlc播放器开发的一个音乐播放器,你也可以理解为在此核心上的搬砖之路,核心的内容并不是我写的,因此在正式写blog之前,感谢那些vlc核心的开发人员让我用到这么 ...
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署
基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署基于JAVAvue开发一个简单音乐播放器计算机毕业设计源码+数据库+lw文档+系统+部署本源码技术栈: 项目 ...

基于H5+js开发一款音乐播放器

文章目录：

一.开发环境：

二.页面视图：

1.主文件入口（首页）：

2.音乐播放界面：

三.功能实现

（1）、index.html：

（2）、播放音乐（music.html）：

（3）、样式文件（index.css）：

四.项目地址：

基于H5+js开发一款音乐播放器相关推荐

最新文章

热门文章