当前位置：首页 > JavaScript

js实现音乐播放器

2026-04-04 08:15:27JavaScript

基础音乐播放器实现

使用HTML5的<audio>元素结合JavaScript可以快速构建音乐播放器。以下是一个基础实现示例：

<audio id="player" src="music.mp3"></audio>
<div>
  <button onclick="document.getElementById('player').play()">播放</button>
  <button onclick="document.getElementById('player').pause()">暂停</button>
  <button onclick="document.getElementById('player').volume += 0.1">音量+</button>
  <button onclick="document.getElementById('player').volume -= 0.1">音量-</button>
</div>

增强功能实现

创建更完整的播放器需要监听音频事件并添加更多控制功能：

const player = document.getElementById('player');
const progress = document.getElementById('progress');

player.addEventListener('timeupdate', () => {
  progress.value = (player.currentTime / player.duration) * 100;
});

progress.addEventListener('input', () => {
  player.currentTime = (progress.value / 100) * player.duration;
});

播放列表管理

实现多曲目播放列表功能：

const playlist = ['song1.mp3', 'song2.mp3', 'song3.mp3'];
let currentTrack = 0;

function playTrack(index) {
  player.src = playlist[index];
  player.play();
}

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

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

可视化效果

使用Web Audio API创建音频可视化：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
const analyser = audioContext.createAnalyser();
const source = audioContext.createMediaElementSource(player);

source.connect(analyser);
analyser.connect(audioContext.destination);
analyser.fftSize = 256;

function visualize() {
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  analyser.getByteFrequencyData(dataArray);

  // 使用canvas绘制频谱
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const barWidth = (canvas.width / bufferLength) * 2.5;
  let x = 0;

  for(let i = 0; i < bufferLength; i++) {
    const barHeight = dataArray[i] / 2;
    ctx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }

  requestAnimationFrame(visualize);
}

player.addEventListener('play', () => {
  audioContext.resume().then(() => {
    visualize();
  });
});

响应式布局

使用CSS增强播放器外观：

#player-container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 10px;
}

button {
  padding: 8px 15px;
  margin: 5px;
  background: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

progress {
  width: 100%;
  height: 5px;
  margin: 10px 0;
}

#visualizer {
  width: 100%;
  height: 100px;
  background: #222;
  margin-top: 20px;
}

本地存储记忆

使用localStorage保存用户偏好：

js实现音乐播放器

// 保存音量设置
player.addEventListener('volumechange', () => {
  localStorage.setItem('volume', player.volume);
});

// 加载时恢复设置
window.addEventListener('load', () => {
  const savedVolume = localStorage.getItem('volume');
  if(savedVolume) player.volume = savedVolume;
});