前言：如今有无数的音乐播放器。创建您自己的音乐播放器以更好地掌握一些东西。

文章目录：

1.开发环境： 2.页面浏览量： 1.主文件入口（首页）： 2. 音乐播放界面： 3. 功能实现（1）、index.html：（2）、音乐播放（music.html）：（3）、样式文件（index.css）： 4. 项目地址：

1. 开发环境：

开发工具：HbuliderX；

框架：Vant 、 Mui，Vue

后端：节点

2. 页面浏览量：

正常开发需要概念图、模块规划等流程。首先我们看一下整体的页面结构。

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

2.音乐播放界面：

3. 实现功能

项目文件布局：

(1 ), index.html：

首先我们新建一个文件作为h5+app项目，然后看一下index页面：

<!DOCTYPE html >< html><head> <元数据 字符集="utf-8" > < 元  名称 = "视口" 内容="宽度=设备-宽度，初始-比例=1，最小-比例=1，最大-比例=1，用户-可扩展=否" />  <标题></标题> <脚本 src="./js/mui. min.js"></脚本>  <链接 href="./css/mui.min.css" rel ="样式表"/><脚本 src="./ js/vue.min.js"></脚本><链接 rel="样式表" href="./css/vant.mim.css" rel="外部 nofollow" 目标="_blank" ><脚本 src="./js/vant.min .js" rel="外部 nofollow" ></脚本><链接 rel="样式表" 类型="text/css " href="css/index.css"/><脚本 类型="text/javascript" src="./js/jquery.min.js"></脚本> </head> <正文><div id="app"><div 类="head"><标题 类="mui-bar mui-bar-nav"><h1类="mui-title" >音乐播放器</h1></标头></div><div><van-notice-bar 文本=“所有歌曲都来了如有违规，请联系网易云，邮箱：1848514604@qq.com " 左-图标="体积-o" /> </div>  <div 类= "内容"><span 样式="显示： inline-block;宽度： 100%;高度： 5%;行-高度：1.875rem;text-align: center;"当前存在：<strong> {{musicData.length}}</强> 歌曲（每天实时更新的歌曲） </span><div 类="contents_bottom"><ul><li @click="seeMsg(index,item)" v-for="(item,index) in musicData" :key="索引"><span 样式<span class="token punctuation attr- ="内边距-left : 0.625rem;字体-大小 >: 0.875rem;" >{{index+1}} </span> <span class="mui-icon mui[ k4]icon-arrowthinright"</span><a href ="javascript:;" :title="项目" 样式="颜色: #000000;字体-大小: 1.125rem;"<span 样式="边距-左: 3.125rem; ">{{item.substring(0,item.length-4)}}</span></a></li></ul></div></div ></div ><脚本 类型 ="text/javascript" 字符集=" utf-8"> mui。init();var app = 新 Vue ({ el: "#app", 数据:  { //存储所有音乐 musicData:[] }, 已创建() { 这个。get() }, 方法:{  // 初始化获取文件列表 get(){ var 那个=这个 $。获取("http://www.jcsy.work:3333/see_music " )。然后(res=> {if(res.代码===200 ) { vant。Toast("初始化数据获取成功！"); //用vue渲染即.musicData =res.数据} })。catch(e=>e=> span>{ vant.吐司.失败("服务异常，请稍后重试。" ); })  }, //点击时参数传递事件跳转到 seeMsg(索引，项目){ 控制台。日志(item) mui。openWindow( span>{ url:"music.html", 额外: { //额外参数 name:{ item:item,索引：索引 } }，  }) } }})</脚本> </</</body></html>

导入的文件是在应用程序运行时进行本地下载以减少数据加载请求

(2)，通过播放音乐 (music.html)：

<!doctype html> <html><他广告> <元 字符集="utf-8"><标题></标题><元数据 名称="视口" 内容=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no " /><链接 href="css/mui.css " rel="样式表" /><链接 href= "css/mui.min.css" rel= "样式表"/><脚本 src="js/mui.js "></脚本><脚本 src="./js/vue.min.js"></脚本><链接 rel="样式表" href="./css/vant.mim.css"  rel = "外部 nofollow" 目标="_blank" ><脚本 src="./js/vant.min.js" rel="外部 nofollow" ></脚本><链接 rel="样式表" 类型="text/css" href=" css/index.css"/><脚本 类型="text/javascript" src="./js/jquery.min.js"></脚本 ></头部><正文><div id="音乐"><div 类="head"><标题 类="mui-bar mui-bar-nav"<a 类 ="mui[k4 ]操作 - 返回 mui - 图标 mui - 图标 - 向左 - 导航 mui - 拉 - 向左 " ></</ a><h1 类="mui-title">{{names.substring(0,names.length-4)}}</h1></标头></div><div 样式=" 高度： 93%;" 类 span>="内容 "><div 类="img_photo"<img id ="imgshow” src="./img/zxc.jpg"  >< /div> <div 类="music_words"><div> <van-进度 :百分比="计数" pivot-text="" 笔画-宽度="15" /></span div><span>歌曲全名：{{names}}</span><br>  <p><span> {{musicNow}} / {{musicLength}}</span> </ p><span>尚无歌词，正在更新...</span></div><div class="music_manager"><img src="img/up.png" @点击="upMusic"><img id="开始" src="./img/pause.png" @click="loadMusic"><img src="img/down.png" @click="downMusic"></div ><div 样式="宽度： 100%;高度 : 5%;背景-颜色： #dfdfdf;文本-align: center;行-高度:2.1875rem;"><span>版权所有©2021 <强>就是叫做增长</强 > </span ></ div><音频 id="音频" :src="音乐名称" 预加载></div> </div><脚本 类型="text/javascript"> mui.init()mui。plusReady(函数(){ var self = plus.webview.currentWebview( ); var name =自我。name;//获取参数var app = 新建 Vue({ el: " #music ",数据() { 返回{ //标题栏歌曲名称names:"",//音乐播放链接musicname：""，/ /保存歌曲标题musicData:[] ,//歌曲总长度musicLength:"",//当前歌曲进度 span>musicNow:"00:00",//进度条百分比计数:""} }, 已创建 () { var =this  的名称。 =名称.itemthat.音乐名称="http://www.jcsy.work:3333/music/"+(名称.项目)即。获取( )//初始化获取歌曲长度setTimeout (函数(){var 音乐 = 文档 .getElementById("音频");那个。musicLength=那个。secondToTimeStr(数学。圆形(音乐。持续时间))},500) }, 方法 :{ //更新所有数据 获取(){ var  那个=这个 $.获取("http://www.jcsy.work:3333/see_music" )。然后(res=>{ if(res.代码===200 ){ 即。musicData= res.数据 } } )。catchspan>(e=>{ vant。Toast。失败 ("服务异常，请稍后重试。") ; }) }, //上一首歌曲  upMusic(){ var 表示=此 var 音乐= 文档。getElementById("音频"); if(名称.索引<0){ 名称。索引=那个。音乐数据。length+1 } .musicNow="00:00" $("#start").attr("src","./img/pause.png") 名称。索引 [ k4]- 将其命名为。 = 它musicData[名称。index. punctuation">] .音乐名称="http: //www.jcsy.work:3333 /music/"+that。名称// $ ("#start").attr("src","./img/start.png") 即。musicLength=即。secondToTimeStr(数学。圆(音乐。持续时间))<span class= “令牌标点”。getMusic() span>音乐。播放() }, //下一首歌曲 downMusic (){ var that=这个 var  音乐 = 文档 . getElementById ("音频") ;  如果(名称。索引>=that . musicData。长度){名称 .index=-1 }

♥我们将开发一个基于H5+js的音乐播放器

文章目录：

1. 开发环境：

2. 页面浏览量：

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

2.音乐播放界面：

3. 实现功能

(1 ), index.html：

(2)，通过播放音乐 (music.html)：

相关推荐

评论抢沙发

评论前必须登录！

交流互动

热门推荐

文章目录：

1. 开发环境：

2. 页面浏览量：

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

2.音乐播放界面：

3. 实现功能

(1 ), index.html：

(2)，通过播放音乐 (music.html)：

相关推荐

评论 抢沙发

评论前必须登录！

交流互动

热门推荐

评论抢沙发