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

全栈程序员站长

发布于 2022-09-07 10:42:03

4K0

发布于 2022-09-07 10:42:03

文章被收录于专栏：全栈程序员必看

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

前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。

文章目录：

一.开发环境：

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