原生JS实现小小的音乐播放器
概述
小小的音乐播放器是一个使用原生JS实现的简单的Web音乐播放器,由于功能简单,易于理解和操作,因此适合JS初学者学习。本攻略将分为以下几个部分:
- 开始
- HTML结构
- CSS样式
- JS功能
- 示例说明
- 结束
开始
首先,我们需要一个开发环境,可以使用如下几种:
- Notepad++
- Visual Studio Code
- Atom
- Sublime Text
在这里,我们以Visual Studio Code为例,进行说明。
HTML结构
接着,我们将使用HTML来定义播放器的界面结构。实现的音乐播放器有如下几个组成部分:
- 播放/暂停按钮
- 进度条
- 声音控制条
- 歌曲时间/总时间显示框
- 音量/音量静音按钮
- 音乐标题
HTML代码如下:
<div class="audio-player">
<div class="controls">
<button id="play-pause-button" class="play"></button>
<div class="progress-bar">
<div id="progress"></div>
</div>
<div class="time-indicator">
<span id="time">0:00</span> / <span id="duration">0:00</span>
</div>
<div class="volume">
<button id="volume-button" class="unmute"></button>
<input type="range" id="volume-slider" min="0" max="1" step="0.01" value="1">
</div>
</div>
<div class="song-info">
<span id="song-title">Song title</span>
</div>
<audio id="audio-player">
<source src="music.mp3" type="audio/mpeg">
</audio>
</div>
CSS样式
在HTML部分完成后,我们需要为其内部元素定义CSS样式。CSS代码如下:
.audio-player {
width: 360px;
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
padding: 20px;
border-radius: 10px;
}
.controls {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.progress-bar {
flex-grow: 1;
margin: 0 10px;
height: 5px;
background-color: #666;
}
.progress-bar #progress {
height: 100%;
background-color: #fff;
width: 0%;
transition: width 0.1s linear;
}
.time-indicator {
font-size: 12px;
}
.volume {
display: flex;
align-items: center;
margin-left: 10px;
}
.volume input[type="range"] {
-webkit-appearance: none;
width: 50px;
height: 5px;
background-color: #666;
margin-left: 10px;
}
.volume input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #fff;
height: 16px;
width: 16px;
border-radius: 50%;
cursor: pointer;
}
.song-info {
text-align: center;
font-size: 18px;
margin-top: 10px;
}
#song-title {
font-weight: bold;
}
button {
background-color: transparent;
border: none;
cursor: pointer;
margin-right: 10px;
width: 20px;
height: 20px;
padding: 0;
}
.play::before {
content: "►";
font-size: 18px;
}
.pause::before {
content: "❚❚";
font-size: 18px;
}
.unmute::before {
content: "?";
font-size: 12px;
}
.mute::before {
content: "?";
font-size: 12px;
}
JS功能
HTML和CSS部分完成后,我们需要使用JS实现播放器的主要功能。具体来说,我们至少需要实现如下几个功能:
- 播放/暂停歌曲
- 显示歌曲时间/总时间
- 改变播放进度
- 改变音量
- 静音/取消静音
完整的JS代码如下:
const audio = document.getElementById("audio-player");
const playPauseButton = document.getElementById("play-pause-button");
const progress = document.getElementById("progress");
const timeDisplay = document.getElementById("time");
const durationDisplay = document.getElementById("duration");
const volumeButton = document.getElementById("volume-button");
const volumeSlider = document.getElementById("volume-slider");
const songTitle = document.getElementById("song-title");
function playPause() {
if (audio.paused) {
audio.play();
playPauseButton.classList.remove("play");
playPauseButton.classList.add("pause");
} else {
audio.pause();
playPauseButton.classList.remove("pause");
playPauseButton.classList.add("play");
}
}
function updateTime() {
timeDisplay.innerHTML = formatTime(audio.currentTime);
progress.style.width = (audio.currentTime / audio.duration) * 100 + "%";
}
function updateDuration() {
durationDisplay.innerHTML = formatTime(audio.duration);
}
function changeTime(e) {
const newTime = e.offsetX / progress.clientWidth * audio.duration;
audio.currentTime = newTime;
}
function changeVolume() {
audio.volume = volumeSlider.value;
if (audio.volume === 0) {
volumeButton.classList.remove("unmute");
volumeButton.classList.add("mute");
} else {
volumeButton.classList.remove("mute");
volumeButton.classList.add("unmute");
}
}
function mute() {
if (audio.volume !== 0) {
audio.volume = 0;
volumeButton.classList.remove("unmute");
volumeButton.classList.add("mute");
} else {
audio.volume = volumeSlider.value;
volumeButton.classList.remove("mute");
volumeButton.classList.add("unmute");
}
}
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.round(time % 60);
return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
}
audio.addEventListener("timeupdate", updateTime);
audio.addEventListener("loadedmetadata", updateDuration);
progress.parentElement.addEventListener("click", changeTime);
volumeSlider.addEventListener("input", changeVolume);
volumeButton.addEventListener("click", mute);
playPauseButton.addEventListener("click", playPause);
示例说明
以上代码实现了一个简单的音乐播放器,您可以在自己的网站或浏览器中使用它播放MP3格式的音乐文件。在使用过程中,您可以试着进行以下两种修改,来感受代码的实际效果:
- 将"music.mp3"替换为您自己的音乐文件路径,在index.html中更新。
- 修改CSS样式,将音乐播放器的UI界面进行自定义。
结束
至此,我们已经完成了“原生JS实现小小的音乐播放器”的攻略。希望这篇文章对您有所帮助并且对您的JS学习有所帮助。如果您有任何问题或者建议,请在下方评论区留言。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:原生JS实现小小的音乐播放器 - Python技术站