带播放列表的js音乐播放器

带播放列表的JS音乐播放器基础概念

带播放列表的JS音乐播放器是一种使用JavaScript编写的网页应用，它允许用户创建、管理和播放一系列音频文件。这种播放器通常包括以下功能：

播放、暂停、停止音频。
跳转到音频的特定部分。
调整音量。
显示和控制播放列表。
支持循环播放和随机播放。

类型

基于HTML5：使用<audio>或<video>元素。
基于第三方库：如Howler.js, Wavesurfer.js等。

应用场景

在线电台：为用户提供个性化的音乐体验。
教育平台：用于播放教学音频。
游戏背景音乐：在游戏中动态切换背景音乐。
个人网站：展示个人音乐品味。

示例代码

以下是一个简单的基于HTML5和JavaScript的音乐播放器示例，包含播放列表功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Music Player</title>
<style>
  /* 简单样式 */
  #playlist { list-style-type: none; padding: 0; }
  #playlist li { cursor: pointer; margin: 5px; }
</style>
</head>
<body>

<audio id="audioPlayer" controls>
  Your browser does not support the audio element.
</audio>

<ul id="playlist">
  <li data-src="song1.mp3">Song 1</li>
  <li data-src="song2.mp3">Song 2</li>
  <li data-src="song3.mp3">Song 3</li>
</ul>

<script>
  const audioPlayer = document.getElementById('audioPlayer');
  const playlist = document.getElementById('playlist');

  playlist.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
      const songSrc = event.target.getAttribute('data-src');
      audioPlayer.src = songSrc;
      audioPlayer.play();
    }
  });
</script>

</body>
</html>