当前位置：首页 > JavaScript

js实现音乐播放

2026-01-16 13:49:29JavaScript

使用HTML5 Audio API实现音乐播放

在JavaScript中，可以通过HTML5的Audio API轻松实现音乐播放功能。以下是基本实现方法：

// 创建Audio对象
const audio = new Audio('music.mp3');

// 播放音乐
audio.play();

// 暂停音乐
audio.pause();

// 设置音量（0-1）
audio.volume = 0.5;

// 跳转到特定时间（秒）
audio.currentTime = 30;

添加播放控制功能

为音乐播放器添加基本的UI控制：

const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const volumeSlider = document.getElementById('volume');

playBtn.addEventListener('click', () => audio.play());
pauseBtn.addEventListener('click', () => audio.pause());
volumeSlider.addEventListener('input', () => {
  audio.volume = volumeSlider.value;
});

实现播放进度条

显示并控制播放进度：

js实现音乐播放

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

audio.addEventListener('timeupdate', () => {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = `${progress}%`;
});

progressBar.parentElement.addEventListener('click', (e) => {
  const percent = e.offsetX / e.target.clientWidth;
  audio.currentTime = percent * audio.duration;
});

处理播放列表

管理多个曲目的播放列表：

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

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

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

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

添加事件监听

处理音频相关事件：

js实现音乐播放

audio.addEventListener('ended', () => {
  console.log('播放结束');
  // 自动播放下一首
  currentTrack = (currentTrack + 1) % playlist.length;
  playTrack(currentTrack);
});

audio.addEventListener('canplay', () => {
  console.log('可以开始播放');
});

audio.addEventListener('error', (e) => {
  console.error('播放错误:', e);
});

响应式音量控制

实现平滑的音量渐变效果：

function fadeVolume(target, duration) {
  const initialVolume = audio.volume;
  const delta = target - initialVolume;
  const startTime = performance.now();

  function updateVolume() {
    const elapsed = performance.now() - startTime;
    const progress = Math.min(elapsed / duration, 1);
    audio.volume = initialVolume + delta * progress;

    if (progress < 1) {
      requestAnimationFrame(updateVolume);
    }
  }

  updateVolume();
}

// 淡入效果
fadeVolume(1, 2000);

可视化音频频谱

使用Web Audio API实现频谱可视化：

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

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

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

function visualize() {
  analyser.getByteFrequencyData(dataArray);

  // 使用dataArray绘制频谱
  // 这里可以结合Canvas API绘制可视化效果

  requestAnimationFrame(visualize);
}

visualize();