音乐播放器（网页手机版）使用Jquery插件

最新推荐文章于 2024-02-04 10:25:09 发布

阿锦。

最新推荐文章于 2024-02-04 10:25:09 发布

阅读量929

点赞数

分类专栏：前端小试题文章标签： html jquery html5 javascript

本文链接：https://blog.csdn.net/weixin_44476882/article/details/112147861

版权

这篇博客介绍了如何使用HTML5、Jquery和Javascript创建一个音乐播放器，具备切换歌曲、播放/暂停和循环播放等功能。文章特别提到了在Jquery中对象转换的重要性，以确保能使用所有必要的播放器功能，尽管存在一些细节问题，整体作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

音乐播放器

样式内容为以下图：
在这里插入图片描述

可以进行下一曲，上一曲，暂停播放以及单曲循环列表循环随机播放等功能

HTML的主要代码，如下：

<body>
		<div id="app" class="column">
			<img class="music-img" src="img/06.jpg" alt="专辑封面">
			<div class="head center">不谓侠</div>
			<!-- 歌曲列表的结构区域 -->
			<div class="list">
				
				<div class="item row">
					<div class="item-icon center">
						<span class="fa fa-music"></span>
					</div>
					<div class="item-name">不谓侠</div>
					<div class="item-size">4.5MB</div>
				</div>	
				
			</div>
			<!-- 底部歌曲播放状态显示以及控制区域 -->
			<div class="foot column">
				<!-- 进度条可触发区域 -->
				<div class="progress-box center">
					<!-- 进度条轨道 -->
					<div class="progress-bg">
						<!-- 当前进度 -->
						<div class="progress"> 
							<div class="dot"></div>
						</div>
					</div>
				</div>
				<!-- 歌曲播放时间显示:当前时间，总时长-->
				<div class="time-box row">
					<div class="time-now">01:12</div>
					<div class="time-total">04:05</div>
				</div>
				<!-- 歌曲播放控制按钮 -->
				<div class="btn-box row">
					<button class="btn-play-type"><span class="fa fa-list"></span></button

最低0.47元/天解锁文章