当前位置：首页 > JavaScript

js实现音乐播放

2026-02-28 23:44:21JavaScript

使用HTML5 Audio API实现音乐播放

HTML5提供了Audio API，可以方便地在网页中嵌入音乐播放功能。以下是一个基础实现示例：

<audio id="myAudio" src="your-music-file.mp3"></audio>
<button onclick="playAudio()">播放</button>
<button onclick="pauseAudio()">暂停</button>

<script>
const audio = document.getElementById("myAudio");

function playAudio() {
  audio.play();
}

function pauseAudio() {
  audio.pause();
}
</script>

添加播放控制功能

完整的音乐播放器通常需要更多控制功能：

// 获取DOM元素
const audio = document.getElementById("myAudio");
const playBtn = document.getElementById("playBtn");
const progressBar = document.getElementById("progressBar");

// 播放/暂停切换
playBtn.addEventListener("click", function() {
  if (audio.paused) {
    audio.play();
    playBtn.textContent = "暂停";
  } else {
    audio.pause();
    playBtn.textContent = "播放";
  }
});

// 更新进度条
audio.addEventListener("timeupdate", function() {
  const progress = (audio.currentTime / audio.duration) * 100;
  progressBar.style.width = progress + "%";
});

使用Web Audio API实现高级功能

Web Audio API提供更专业的音频处理能力：

js实现音乐播放

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

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

// 加载音频文件
function loadAudio(url) {
  fetch(url)
    .then(response => response.arrayBuffer())
    .then(arrayBuffer => audioContext.decodeAudioData(arrayBuffer))
    .then(audioBuffer => {
      playAudio(audioBuffer);
    });
}

实现播放列表功能

创建音乐播放列表需要管理多个曲目：

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

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

function nextTrack() {
  currentTrack = (currentTrack + 1) % playlist.length;
  loadTrack(currentTrack);
}

audio.addEventListener("ended", nextTrack);

添加可视化效果

结合Canvas API可以创建音频可视化：

js实现音乐播放

const canvas = document.getElementById("visualizer");
const ctx = canvas.getContext("2d");
const analyser = audioContext.createAnalyser();

source.connect(analyser);
analyser.connect(audioContext.destination);

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

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

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

  requestAnimationFrame(drawVisualizer);
}

响应式设计考虑

确保播放器在不同设备上正常工作：

.audio-player {
  max-width: 100%;
  display: flex;
  flex-direction: column;
}

.controls {
  display: flex;
  gap: 10px;
  align-items: center;
}

@media (max-width: 600px) {
  .controls {
    flex-direction: column;
  }
}

处理浏览器兼容性

不同浏览器对音频API的支持可能不同：

// 检测浏览器支持
if (!window.AudioContext) {
  if (!window.webkitAudioContext) {
    alert("您的浏览器不支持Web Audio API");
  }
  window.AudioContext = window.webkitAudioContext;
}

// 解决iOS自动播放限制
document.addEventListener("click", function() {
  audioContext.resume().then(() => {
    console.log("AudioContext已激活");
  });
}, { once: true });