html+CSS+JS MP3音乐播放器进度条带播放按钮
这个整合在一个页面的音画同步 MP3 音乐播放器，运用了 HTML、CSS 和 JavaScript 三种前端技术，为用户打造了一个简单易用且美观的音乐播放界面。以下是对代码各部分的详细介绍
HTML 部分
<!DOCTYPE html> <html> <!-- 文档头部 --> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>音画同步 MP3 音乐播放器</title> <!-- 内联 CSS 样式 --> <style> /* ... 样式代码 ... */ </style> </head> <!-- 文档主体 --> <body> <!-- 音乐播放器容器 --> <div> <!-- 音乐封面 --> <img id="album-cover" src="default-cover.jpg" alt="专辑封面"> <!-- 音频元素 --> <audio id="audio" controls> <!-- 替换为你自己的音乐文件路径 --> <source src="your-music.mp3" type="audio/mpeg"> 你的浏览器不支持音频播放。 </audio> <!-- 音乐标题 --> <h2 id="music-title">音乐标题</h2> <!-- 音乐进度条 --> <input type="range" id="progress-bar" min="0" max="100" value="0"> <!-- 播放/暂停按钮 --> <button id="play-pause-btn">播放</button> </div> <!-- 内联 JavaScript 代码 --> <script> // ... JavaScript 代码 ... </script> </body> </html>
元信息设置：
<!DOCTYPE html> 声明文档类型为 HTML5。
<meta charset="UTF-8"> 设置字符编码为 UTF - 8，确保页面能正确显示各种字符。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 使页面在不同设备上能自适应显示。
<title> 标签定义了页面的标题，会显示在浏览器的标签页上。
音乐播放器结构：
<div class="music-player"> 作为整个音乐播放器的容器，将各个组件包裹起来。
<img> 标签用于显示音乐的封面图片，可通过 src 属性替换为实际的封面图片路径。
<audio> 标签是 HTML5 提供的音频播放元素，controls 属性为其添加了默认的播放控制界面，src 属性需要替换为实际的 MP3 音乐文件路径。
<h2> 标签用于显示音乐的标题。
<input type="range"> 作为音乐播放的进度条，初始值为 0，范围从 0 到 100。
<button> 用于实现播放和暂停音乐的切换功能。
CSS 部分
/* 全局样式 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
/* 音乐播放器容器样式 */
.music-player {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
width: 80%;
max-width: 400px;
/* 自适应大小 */
}
/* 专辑封面样式 */
#album-cover {
width: 100%;
border-radius: 10px;
margin-bottom: 20px;
}
/* 音频控件样式 */
#audio {
width: 100%;
margin-bottom: 20px;
}
/* 音乐标题样式 */
#music-title {
margin-bottom: 20px;
}
/* 进度条样式 */
#progress-bar {
width: 100%;
margin-bottom: 20px;
}
/* 播放/暂停按钮样式 */
#play-pause-btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#play-pause-btn:hover {
background-color: #0056b3;
}全局样式：
使用 display: flex、justify-content: center 和 align-items: center 让音乐播放器在页面中水平和垂直居中显示。
height: 100vh 使页面高度占满整个视口高度。
background-color 设置页面背景颜色。
font-family 指定页面文字的字体。
播放器各组件样式：
.music-player 为播放器容器设置了背景颜色、圆角、阴影、内边距等样式，并且通过 width 和 max-width 实现自适应大小。
#album-cover 为封面图片设置了宽度、圆角和底部外边距。
#audio、#music-title、#progress-bar 分别为音频控件、音乐标题和进度条设置了宽度和底部外边距。
#play-pause-btn 为播放 / 暂停按钮设置了内边距、背景颜色、文字颜色、边框和圆角等样式，hover 伪类实现了鼠标悬停时按钮背景颜色的变化。
JavaScript 部分
// 获取音频元素
const audio = document.getElementById('audio');
// 获取播放/暂停按钮
const playPauseBtn = document.getElementById('play-pause-btn');
// 获取进度条
const progressBar = document.getElementById('progress-bar');
// 播放/暂停功能
playPauseBtn.addEventListener('click', function () {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '暂停';
} else {
audio.pause();
playPauseBtn.textContent = '播放';
}
});
// 更新进度条
audio.addEventListener('timeupdate', function () {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
});
// 点击进度条跳转
progressBar.addEventListener('input', function () {
const time = (progressBar.value / 100) * audio.duration;
audio.currentTime = time;
});、
元素获取：通过 document.getElementById 方法分别获取音频元素、播放 / 暂停按钮和进度条元素，方便后续操作。
播放 / 暂停功能：为播放 / 暂停按钮添加 click 事件监听器，当点击按钮时，判断音频是否处于暂停状态，如果是则调用 audio.play() 方法开始播放音乐，并将按钮文字改为 “暂停”；反之则调用 audio.pause() 方法暂停音乐，同时将按钮文字改为 “播放”。
进度条更新：为音频元素添加 timeupdate 事件监听器，该事件会在音频播放时不断触发。通过计算当前播放时间占总时长的百分比，更新进度条的值。
进度条跳转：为进度条添加 input 事件监听器，当用户拖动进度条时，根据进度条的值计算对应的播放时间，并将音频的当前播放时间设置为该值，实现音乐播放位置的跳转。
综上所述，这个音乐播放器通过 HTML 构建结构，CSS 美化界面，JavaScript 实现交互功能，为用户提供了一个简单且实用的音乐播放体验。
完整HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>音画同步 MP3 音乐播放器</title>
<style>
/* 全局样式 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
/* 音乐播放器容器样式 */
.music-player {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
width: 80%;
max-width: 400px;
/* 自适应大小 */
}
/* 专辑封面样式 */
#album-cover {
width: 100%;
border-radius: 10px;
margin-bottom: 20px;
padding-top: 30px;
}
/* 音频控件样式 */
#audio {
width: 100%;
margin-bottom: 20px;
}
/* 音乐标题样式 */
#music-title {
margin-bottom: 20px;
}
/* 进度条样式 */
#progress-bar {
width: 100%;
margin-bottom: 20px;
}
/* 播放/暂停按钮样式 */
#play-pause-btn {
padding: 10px 20px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#play-pause-btn:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<!-- 音乐播放器容器 -->
<div>
<!-- 音乐封面 -->
<img id="album-cover" src="http://imge.kugou.com/stdmusic/400/20220926/20220926132051213547.jpg" alt="专辑封面">
<!-- 音频元素 -->
<audio id="audio" >
<!-- 替换为你自己的音乐文件路径 -->
<source src="https://bbs.cnzv.cc/mp3/MTk5NjQ4NjYxNyZ3eW1wMw==.mp3" type="audio/mpeg">
你的浏览器不支持音频播放。
</audio>
<!-- 音乐标题 -->
<h2 id="music-title">音乐标题</h2>
<!-- 音乐进度条 -->
<input type="range" id="progress-bar" min="0" max="100" value="0">
<!-- 播放/暂停按钮 -->
<button id="play-pause-btn">播放</button>
</div>
<script>
// 获取音频元素
const audio = document.getElementById('audio');
// 获取播放/暂停按钮
const playPauseBtn = document.getElementById('play-pause-btn');
// 获取进度条
const progressBar = document.getElementById('progress-bar');
// 播放/暂停功能
playPauseBtn.addEventListener('click', function () {
if (audio.paused) {
audio.play();
playPauseBtn.textContent = '暂停';
} else {
audio.pause();
playPauseBtn.textContent = '播放';
}
});
// 更新进度条
audio.addEventListener('timeupdate', function () {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.value = progress;
});
// 点击进度条跳转
progressBar.addEventListener('input', function () {
const time = (progressBar.value / 100) * audio.duration;
audio.currentTime = time;
});
</script>
</body>
</html>
发表评论