大家好，又见面了，我是你们的朋友全栈君。

前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。
在这里插入图片描述

文章目录：

一.开发环境：
二.页面视图：
- 1.主文件入口（首页）：
- 2.音乐播放界面：
三.功能实现
四.项目地址：

一.开发环境：

开发工具：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=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
Csdn资源地址：MusicPlayer

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

发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/147677.html原文链接：https://javaforall.cn

【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛

【官方授权正版激活】： 官方授权正版激活支持Jetbrains家族下所有IDE 使用个人JB账号...

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

文章目录：

一.开发环境：

二.页面视图：

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

2.音乐播放界面：

三.功能实现

（1）、index.html：

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

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

四.项目地址：

发表回复

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

文章目录：

一.开发环境：

二.页面视图：

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

2.音乐播放界面：

三.功能实现

（1）、index.html：

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

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

四.项目地址：

相关推荐

python 微信自动回复机器人

【转载】秒杀系统架构优化思路

首个可用于深度学习的ToF相关数据集！基于置信度的立体相机以及ToF相机深度图融合框架…

html5 canvas雨点打到窗玻璃动画

均值归一化详解_matlab数据归一化

SpringBoot之SpringApplication初始化

发表回复