devbox
天景科技苑
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

HTML5实现我的音乐网站源码_带音乐播放的个人页html源码

作者：天景科技苑 | 2024-07-26 01:27:39

赞

踩

带音乐播放的个人页html源码

文章目录

作者：xcLeigh

HTML5实现我的音乐网站源码，音乐网站源码，实现音乐播放，视频播放，轮播图，歌词显示，列表排列，表格表单等功能，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。

1.设计来源

1.1 界面效果

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2 轮播图界面

在这里插入图片描述

1.3 音乐播放界面

在这里插入图片描述

1.4 视频播放界面

在这里插入图片描述

2.效果和源码

2.1 动态效果

    这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的音乐网站。

HTML5实现我的音乐网站源码

2.2 源代码

    这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>我的音乐网站</title>
		<link rel="icon" href="img/NetEasy.png" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="layui-v2.5.7/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="css/APlayer.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>
	<body>
		<ul class="layui-nav" lay-filter="">
			<li class="layui-nav-item"><img src="img/NetEasy.png" /></li>
			<li class="layui-nav-item layui-this"><a href="#">发现音乐</a></li>
			<li class="layui-nav-item"><a href="#">我的音乐</a></li>
			<li class="layui-nav-item"><a href="#">朋友</a></li>
			<li class="layui-nav-item"><a href="#">商城</a></li>
			<li class="layui-nav-item"><a href="#">音乐人</a></li>
			<li class="layui-nav-item"><a target="_blank" href="https://music.163.com/stat/?web=pc&from=download&t=1610548843346&redirect=https%3A%2F%2Fmusic.163.com%2Fapi%2Fpc%2Fpackage%2Fdownload%2Flatest">下载客户端<span
					 class="layui-badge">HOT</span></a></li>
		</ul>
		<div class="layui-container">
			<div class="layui-row">
				<div class="layui-col-md9">
					<div class="layui-carousel" id="banner">
						<div carousel-item>
							<div><img src="img/banner/1.jpg" /></div>
							<div><img src="img/banner/2.jpg" /></div>
							<div><img src="img/banner/3.jpg" /></div>
							<div><img src="img/banner/4.jpg" /></div>
							<div><img src="img/banner/5.jpg" /></div>
							<div><img src="img/banner/6.jpg" /></div>
							<div><img src="img/banner/7.jpg" /></div>
							<div><img src="img/banner/8.jpg" /></div>
							<div><img src="img/banner/9.jpg" /></div>
						</div>
					</div>
				</div>
				<div class="layui-col-md3">
					<div class="layui-card-body">
						<div class="layui-col-md9">
							<div class="layui-input-inline">
								<input type="text" id="searchTxt" placeholder="搜索音乐" autocomplete="off" class="layui-input">

							</div>

						</div>
						<div class="layui-col-md3">
							<button type="button" id="searchBtn" class="layui-btn"> <i class="layui-icon">&#xe615;</i></button>
						</div>
						<div style="height:90px;width:60px;float:left;text-align: center;margin-top: 10px;">
							<img src="img/head.jpg" style="height:60px;width:60px;">
							<span class="layui-badge">Lv10</span>
						</div>
						<div style="float:left;margin-left: 5px;margin-top: 10px;">
							<a id="author2_A" href="#">
								<h2>xcLeigh</h2>
							</a>
							<p class="gray"><i class="layui-icon layui-icon-location"></i> 北京 朝阳</p>
							<button id="qiandao" class="layui-btn layui-btn-normal layui-btn-sm" style="float:left;margin-left: 5px;border-radius: 5px;">签&nbsp;到</button>
						</div>

						<hr>
						<div class="right_td">
							<span style="font-size: 18px;font-weight: 700;">50</span>
							<p class="gray">动态</p>
						</div>
						<div class="right_td">
							<span style="font-size: 18px;font-weight: 700;">25</span>
							<p class="gray">评论</p>
						</div>
						<div class="right_td">
							<span style="font-size: 18px;font-weight: 700;">18</span>
							<p class="gray">关注</p>
						</div>
						<div class="right_td">
							<span style="font-size: 18px;font-weight: 700;">12</span>
							<p class="gray">粉丝</p>
						</div>
						<!--个人简介  -->
						<div style="margin-top:3px;">
							<p class="gray">你看到的光，自以为是希望。以为能摆脱厄运。可到了最后发现，那竟是没有山谷的回声。</p>
						</div>
					</div>
				</div>
			</div>

			<div class="layui-row">
				<div id="recommend" class="layui-col-xs6 layui-col-sm6 layui-col-md9">
					<fieldset class="layui-elem-field layui-field-title">
						<legend>热门推荐<span class="layui-breadcrumb" lay-separator="|" style="margin-left: 25px;">
								<a href="">华语</a>
								<a href="">流行</a>
								<a href="">摇滚</a>
								<a href="">民谣</a>
								<a href="">电子</a>
							</span></legend>
						<div class="layui-field-box">
							<div class="layui-row" style="margin-top: 5px;">
								<div class="layui-col-md3">
									<img src="img/recommend/1.jpg" />
									<p><a href="#">流行风暴 | 2020年的时候我们都在听什么</a></p>
								</div>

								<div class="layui-col-md3">
									<img src="img/recommend/2.jpg" />
									<p><a href="#">[一周原创发现] 谭松韵&谢春花跨界合作共同送上2021最美好的祝福</a></p>
								</div>
								<div class="layui-col-md3">
									<img src="img/recommend/3.jpg" />
									<p><a href="#">私人雷达 | 根据听歌记录为你打造</a></p>
								</div>

								<div class="layui-col-md3">
									<img src="img/recommend/4.jpg" />
									<p><a href="#"><span class="layui-badge">电台节目</span>&nbsp;Vol.480 #我的流金岁月#置之死地而后生</a></p>
								</div>
							</div>
							<div class="layui-row" style="margin-top: 15px;">
								<div class="layui-col-md3">
									<img src="img/recommend/5.jpg" />
									<p><a href="#">薛之谦-谦友专属</a></p>
								</div>
								<div class="layui-col-md3">
									<img src="img/recommend/6.jpg" />
									<p><a href="#">天津都市怪谈之灵异大搜罗-壹</a></p>
								</div>
								<div class="layui-col-md3">
									<img src="img/recommend/7.jpg" />
									<p><a href="#">值得单曲循环的华语良曲（一人一首）</a></p>
								</div>
								<div class="layui-col-md3">
									<img src="img/recommend/8.jpg" />
									<p><a href="#"> 云泥</a></p>
								</div>
							</div>
						</div>
					</fieldset>

				</div>
				<div class="layui-col-md3">
					<div class="layui-card">
						<div class="layui-card-header">入驻歌手</div>
						<div class="layui-card-body">
							<div class="layui-row">
								<div class="layui-col-md4">
									<img src="img/musican/zhanghuimei.jpg" />
								</div>
								<div class="layui-col-md8">
									<p>张惠妹aMEI</p>
									<p style="font-size: smaller;" class="gray">台湾歌手张惠妹</p>
								</div>
							</div>
							<hr />
							<div class="layui-row">
								<div class="layui-col-md4">
									<img src="img/musican/fine.jpg" />
								</div>
								<div class="layui-col-md8">
									<p>Fine乐团</p>
									<p style="font-size: smaller;" class="gray">独立音乐人</p>
								</div>
							</div>
							<hr />
							<div class="layui-row">
								<div class="layui-col-md4">
									<img src="img/musican/wanxiaoli.jpg" />
								</div>
								<div class="layui-col-md8">
									<p>萬曉利</p>
									<p style="font-size: smaller;" class="gray">民谣歌手</p>
								</div>
							</div>
							<hr />
							<div class="layui-row">
								<div class="layui-col-md4">
									<img src="img/musican/zhaolei.jpg" />
								</div>
								<div class="layui-col-md8">
									<p>音乐人赵雷</p>
									<p style="font-size: smaller;" class="gray">民谣歌手</p>
								</div>
							</div>
							<hr />
							<div class="layui-row">
								<div class="layui-col-md4">
									<img src="img/musican/wangsanbo.jpg" />
								</div>
								<div class="layui-col-md8">
									<p>王三溥</p>
									<p style="font-size: smaller;" class="gray">音乐人</p>
								</div>
							</div>
							<hr>
							<button type="button" id="apply" class="layui-btn layui-btn-primary layui-btn-sm layui-btn-fluid">申请成为网易音乐人</button>
						</div>
					</div>
				</div>

			</div>


			<div class="layui-row">
				<div class="layui-col-xs12 layui-col-md12 layui-col-bg12">
					<footer class="footer gcs-footer">
						<div class="footer-top">
							<a href="#" class="gray">服务条款</a> |
							<a href="#" class="gray">隐私政策</a> |
							<a href="#" class="gray">儿童隐私政策</a> |
							<a href="#" class="gray">版权投诉指引</a> |
							<a href="#" class="gray">意见反馈</a> |
						</div>
						<p>
							2024.07.15 @ CopyRight 版权所有
						</p>

					</footer>
				</div>
			</div>
		</div>
		<script src="layui-v2.5.7/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/APlayer.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Meting.min.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226

源码下载

HTML5实现我的音乐网站源码（源码） 点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

--------------- 业精于勤，荒于嬉 ---------------
 

请添加图片描述

--------------- 行成于思，毁于随 ---------------

    

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/天景科技苑/article/detail/882905?site
推荐阅读
  • article【HTML——3d粒子特效（效果+代码）】_html 3d粒子...
    分享一套阿里大牛整理的前端资料给大家，点击前端校招面试题精编解析大全即可获取件比较大，这里只是将部分目录截图出来，每个节...

    赞

    踩

  • articleHTML+CSS+JavaScript网页特效源代码（复制代码保存即可使用）_网页特效源码...
    文章描述了一个使用JavaScript和Three.js库创建的3D场景，涉及动态渲染、动画效果（如滑动、颜色变化和脉冲...

    赞

    踩

  • article情人节程序员用HTML网页表白【嫦娥奔月(满屏泡泡)】 HTML5七夕情人节表白网页源码 HTML+...
    本文介绍了一套100款基于HTML、CSS和JavaScript的个性化表白网页模板，帮助用户轻松制作情人节表白、求婚等...

    赞

    踩

  • article基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控_运维监控的画面h5页面...
    智慧楼宇和人们的生活息息相关，楼宇智能化程度的提高，会极大程度的改善人们的生活品质，在当前工业互联网大背景下受到很大关注...

    赞

    踩

  • article于 HTML5 的 WebGL 3D 智能楼宇监控系统_html5楼宇自控...
    　　智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。...

    赞

    踩

  • article基于 HTML5 WebGL 构建智能城市 3D 场景_html数字场地模型...
    前言随着城市规模的扩大，传统的方式很难彻底地展示城市的全貌，但随着 3D 技术的应用，出现了 3D 城市群的方式以动态，...

    赞

    踩

  • article基于 HTML5 的 WebGL 3D 智能楼宇监控系统...
    前言智能监控的领域已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。...

    赞

    踩

  • articleJQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询...
    JQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询
    本文详细讲解了如何使用 `JQuery+HTML+JavaScript` 实现移动端页面中的地图位置选取功能。本文逐步展...

    赞

    踩

  • articleJS特效第149弹：html5 svg太空人404动画模板_404动画js...
    本文介绍了如何使用HTML5和SVG创建一个404页面的太空人动画模板，包括关键代码示例和浏览器兼容性。404动画js ...

    赞

    踩

  • articleJS特效第148弹：html5 css3圆形进度条倒计时页面跳转代码_css倒计时圆环代码...
    本文介绍了一段HTML5和CSS3结合的代码，用于创建一个带有倒计时功能的圆形进度条，当倒计时结束时页面会自动跳转到指定...

    赞

    踩

  • article【原创作品】html5+css3+js+bootstrap实现响应式Web前端科技商城网站(包含多个...
    前言曾经，我也是一个设计并写页面的纯前端媛，学着学着渐入偏锋，专业的缘故，入坑了后端，已经很久没有这样纯写前端静态网页了...

    赞

    踩

  • article谷粒商城--搜索服务--高级篇笔记六_gulinall 检索服务 页面代码list.html...
    谷粒商城–搜索服务–高级篇笔记六1 搜索页面搭建1.1 添加依赖 --devtools--> [详细] -->

    赞

    踩

  • article【性能优化】在大批量数据下使用 HTML+CSS实现走马灯，防止页面卡顿(一)...
    大批量数据下实现走马灯，防止页面卡顿【性能优化】在大批量数据下使用 HTML+CSS实现走马灯，防止页面卡顿(一) ...

    赞

    踩

  • articleRAG 高级应用：基于 Nougat、HTML 转换与 GPT-4o 解析复杂 PDF 内嵌表格_r...
    RAG（检索增强生成）应用最具挑战性的方面之一是如何处理复杂文档的内容，例如 PDF 文档中的图像和表格，因为这些内容不...

    赞

    踩

  • articleJQuery+HTML+JavaScript：实现地图位置选取和地址模糊查询_百度地图...
    本文详细讲解了如何使用 `JQuery+HTML+JavaScript` 实现移动端页面中的地图位置选取功能。本文逐步展...

    赞

    踩

  • article你的生日是星期几？HTML+JavaScript帮你列出来...
    上周末，大宝发现今年自己的生日不是周末，这样就不好约同学和好友一起开生日Party了，很是郁闷。一直嘀咕自己哪年的生日才...

    赞

    踩

  • articleHTML5 音频 Audio 标签详解_h5 audio标签...
    HTML5 引入了标签，允许开发者在网页中直接嵌入音频文件，而不需要依赖第三方插件。_h5 audio标签h5 audi...

    赞

    踩

    • 相关标签

    Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

      

    闽ICP备14008679号