用JS写一个简单的音乐播放器

原创

于 2018-09-21 15:16:52 发布 · 3.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#audio

这篇博客介绍了如何利用HTML5的audio元素和JavaScript编写一个基础的音乐播放器。首先布局和样式设置，然后实现播放、暂停及上一首、下一首切换的功能，重点强调了正确设置音频文件路径的重要性。

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

音乐播放主要用到HTML5元素中的audio属性

接下来我们开始写：

先布好局

<div class="music">
			<div class="musicL">
				<i class="iconfont icon-shangyishou"></i>
				<span class="play" id="play">
					<i class="iconfont icon-bofang"></i>
				</span>
				<i class="iconfont icon-xiayishou"></i>
			</div>

			<div class="progress">
				<span class="start_time" id="start_time">00:00</span>
				<div class="load" id="load">
					<div class="circle" id="circle">
						<div class="round" id="round">

						</div>

					</div>
				</div>
				<span class="total_time" id="total_time">00:00</span>
			</div>

		</div>
		<audio id="audio" autoplay="autoplay"></audio>

		<div class="music_list">
			<ul>
				<li class="title"><span><b>歌曲列表</b></span></li>
			</ul>
		</div>

加上样式

* {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
			}
			
			.music {
				width: 500px;
				height: 40px;
				background: #242424;
				margin: 20px auto;
				line-height: 40px;
			}
			
			.musicL {