当前位置：首页 > JavaScript

js实现音乐播放器

2026-03-01 07:39:12JavaScript

基础音乐播放器实现

使用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>
  <input type="range" onchange="document.getElementById('player').volume = this.value/100">
</div>

增强型播放器功能

创建具有完整功能的播放器对象：

class MusicPlayer {
  constructor() {
    this.audio = new Audio();
    this.playlist = [];
    this.currentIndex = 0;
    this.isPlaying = false;
  }

  addTrack(url) {
    this.playlist.push(url);
  }

  play(index) {
    if (index !== undefined) this.currentIndex = index;
    this.audio.src = this.playlist[this.currentIndex];
    this.audio.play();
    this.isPlaying = true;
  }

  pause() {
    this.audio.pause();
    this.isPlaying = false;
  }

  next() {
    this.currentIndex = (this.currentIndex + 1) % this.playlist.length;
    this.play();
  }

  prev() {
    this.currentIndex = (this.currentIndex - 1 + this.playlist.length) % this.playlist.length;
    this.play();
  }

  setVolume(level) {
    this.audio.volume = level;
  }
}

播放器UI集成

结合DOM操作创建可视化界面：

const player = new MusicPlayer();
player.addTrack('track1.mp3');
player.addTrack('track2.mp3');

document.getElementById('playBtn').addEventListener('click', () => {
  player.isPlaying ? player.pause() : player.play();
});

document.getElementById('nextBtn').addEventListener('click', () => {
  player.next();
});

document.getElementById('volume').addEventListener('input', (e) => {
  player.setVolume(e.target.value / 100);
});

进度条与时间显示

添加播放进度监控功能：

const progressBar = document.getElementById('progress');
const timeDisplay = document.getElementById('time');

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

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

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

播放列表渲染

动态生成播放列表DOM：

function renderPlaylist() {
  const listContainer = document.getElementById('playlist');
  listContainer.innerHTML = '';

  player.playlist.forEach((track, index) => {
    const item = document.createElement('div');
    item.className = 'playlist-item';
    item.textContent = `Track ${index + 1}`;
    item.addEventListener('click', () => player.play(index));
    listContainer.appendChild(item);
  });
}

音频可视化效果

使用Web Audio API创建频谱分析：

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

function visualize() {
  const canvas = document.getElementById('visualizer');
  const ctx = canvas.getContext('2d');
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  function draw() {
    requestAnimationFrame(draw);
    analyser.getByteFrequencyData(dataArray);
    ctx.clearRect(0, 0, canvas.width, canvas.height);

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

  draw();
}

js实现音乐播放器