当前位置：首页 > JavaScript

用js写实现音乐播放器

2026-04-05 03:36:01JavaScript

音乐播放器基础结构

使用HTML5的<audio>元素作为播放器核心，通过JavaScript控制播放逻辑。基础HTML结构需包含播放/暂停按钮、进度条、音量控制等组件。

<div id="music-player">
  <audio id="audio-element" src="music.mp3"></audio>
  <button id="play-btn">播放</button>
  <input type="range" id="progress-bar" value="0">
  <span id="current-time">00:00</span>
  <input type="range" id="volume-control" min="0" max="1" step="0.1" value="1">
</div>

播放控制实现

通过监听play和pause事件同步按钮状态，使用currentTime属性控制播放进度。

用js写实现音乐播放器

const audio = document.getElementById('audio-element');
const playBtn = document.getElementById('play-btn');

playBtn.addEventListener('click', () => {
  audio.paused ? audio.play() : audio.pause();
});

audio.addEventListener('play', () => {
  playBtn.textContent = '暂停';
});

audio.addEventListener('pause', () => {
  playBtn.textContent = '播放';
});

进度条同步

利用timeupdate事件实时更新进度条位置，通过计算百分比映射到进度条值。

const progressBar = document.getElementById('progress-bar');
const currentTimeDisplay = document.getElementById('current-time');

audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.value = progress;

  const mins = Math.floor(audio.currentTime / 60);
  const secs = Math.floor(audio.currentTime % 60);
  currentTimeDisplay.textContent = `${mins}:${secs < 10 ? '0' : ''}${secs}`;
});

progressBar.addEventListener('input', () => {
  const seekTime = (progressBar.value / 100) * audio.duration;
  audio.currentTime = seekTime;
});

音量控制

直接绑定音量控制滑块到音频元素的volume属性。

用js写实现音乐播放器

const volumeControl = document.getElementById('volume-control');
volumeControl.addEventListener('input', () => {
  audio.volume = volumeControl.value;
});

播放列表功能

通过数组存储曲目信息，实现切换歌曲功能。

const playlist = [
  { title: 'Song 1', src: 'song1.mp3' },
  { title: 'Song 2', src: 'song2.mp3' }
];
let currentTrack = 0;

function loadTrack(index) {
  audio.src = playlist[index].src;
  audio.play();
}

document.getElementById('next-btn').addEventListener('click', () => {
  currentTrack = (currentTrack + 1) % playlist.length;
  loadTrack(currentTrack);
});

响应式设计建议

添加CSS媒体查询确保播放器在不同设备上正常显示，建议使用Flexbox布局。

#music-player {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 600px) {
  #music-player {
    flex-direction: column;
  }
}