js实现播放器

实现基础HTML5音频播放器

使用HTML5的<audio>标签配合JavaScript可以快速实现基础播放器功能。以下代码示例展示如何创建播放/暂停、进度条和音量控制：

<audio id="audioPlayer" src="music.mp3"></audio>
<button id="playButton">播放</button>
<input type="range" id="progressBar" value="0">
<input type="range" id="volumeControl" min="0" max="1" step="0.1" value="1">

const audio = document.getElementById('audioPlayer');
const playButton = document.getElementById('playButton');
const progressBar = document.getElementById('progressBar');
const volumeControl = document.getElementById('volumeControl');

playButton.addEventListener('click', () => {
  if(audio.paused) {
    audio.play();
    playButton.textContent = '暂停';
  } else {
    audio.pause();
    playButton.textContent = '播放';
  }
});

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

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

volumeControl.addEventListener('input', () => {
  audio.volume = volumeControl.value;
});

使用Web Audio API实现高级功能

Web Audio API提供更精细的音频控制，适合需要音频处理的应用：

const audioContext = new (window.AudioContext || window.webkitAudioContext)();
let sourceNode;

function playAudio(buffer) {
  sourceNode = audioContext.createBufferSource();
  sourceNode.buffer = buffer;
  sourceNode.connect(audioContext.destination);
  sourceNode.start(0);
}

// 加载音频文件
fetch('music.mp3')
  .then(response => response.arrayBuffer())
  .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
  .then(audioBuffer => {
    playButton.onclick = () => playAudio(audioBuffer);
  });

添加可视化效果

利用Canvas和Web Audio API可以实现音频频谱可视化：

const canvas = document.getElementById('visualizer');
const canvasCtx = canvas.getContext('2d');
const analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
sourceNode.connect(analyser);

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

  canvasCtx.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;
    canvasCtx.fillStyle = `rgb(${barHeight + 100}, 50, 50)`;
    canvasCtx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
    x += barWidth + 1;
  }

  requestAnimationFrame(draw);
}

draw();

实现播放列表功能

扩展基础播放器支持多曲目切换：

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

function loadTrack(index) {
  audio.src = playlist[index];
  audio.play();
  playButton.textContent = '暂停';
}

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

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

添加键盘快捷键控制

增强用户体验的键盘控制：

document.addEventListener('keydown', (e) => {
  switch(e.code) {
    case 'Space':
      e.preventDefault();
      playButton.click();
      break;
    case 'ArrowRight':
      audio.currentTime += 5;
      break;
    case 'ArrowLeft':
      audio.currentTime -= 5;
      break;
    case 'ArrowUp':
      volumeControl.value = Math.min(1, parseFloat(volumeControl.value) + 0.1);
      audio.volume = volumeControl.value;
      break;
    case 'ArrowDown':
      volumeControl.value = Math.max(0, parseFloat(volumeControl.value) - 0.1);
      audio.volume = volumeControl.value;
      break;
  }
});

这些实现方法可以根据具体需求进行组合和扩展，构建功能丰富的网页音频播放器。