在节奏中歌唱：原生JS打造定制音乐播放器

在数字音乐时代，音乐播放器已成为不可或缺的工具，它陪伴我们穿梭于音乐的海洋，享受着美妙的旋律。而原生JS，作为一种强大且灵活的编程语言，赋予了我们打造定制音乐播放器的能力。无论你是音乐发烧友，还是前端开发者，都能从本教程中有所收获，亲自创造出独一无二的音乐播放器。

扬帆起航：创建播放器

首先，让我们从头开始，创建一个基本的音乐播放器。只需几行简单的代码，你就能构建出播放器框架。接下来，我们将逐一添加功能，使播放器更加完善。

// 创建播放器元素
const player = document.createElement('div');
player.classList.add('player');

// 创建音频元素
const audio = document.createElement('audio');
audio.src = 'path/to/your/music.mp3';

// 创建播放/暂停按钮
const playPauseButton = document.createElement('button');
playPauseButton.classList.add('play-pause-button');
playPauseButton.textContent = 'Play/Pause';

// 创建进度条
const progressBar = document.createElement('div');
progressBar.classList.add('progress-bar');

// 创建歌词显示区
const lyrics = document.createElement('div');
lyrics.classList.add('lyrics');

// 将所有元素添加到播放器中
player.appendChild(audio);
player.appendChild(playPauseButton);
player.appendChild(progressBar);
player.appendChild(lyrics);

// 添加事件监听器
playPauseButton.addEventListener('click', () => {
  if (audio.paused) {
    audio.play();
    playPauseButton.textContent = 'Pause';
  } else {
    audio.pause();
    playPauseButton.textContent = 'Play';
  }
});

现在，你已经拥有了一个基本的音乐播放器，它可以播放音乐并控制播放/暂停。

扩展功能：锦上添花

接下来，让我们为播放器添加更多功能，使之更加全面和人性化。

播放进度条控制

为了让用户能够轻松控制播放进度，我们需要添加一个播放进度条。我们可以使用HTML5的<input type="range">元素来实现。

// 创建播放进度条
const progressBar = document.createElement('input');
progressBar.type = 'range';
progressBar.min = 0;
progressBar.max = audio.duration;
progressBar.value = 0;

// 将播放进度条添加到播放器中
player.appendChild(progressBar);

// 添加事件监听器
progressBar.addEventListener('input', (e) => {
  audio.currentTime = e.target.value;
});

这样，用户就可以通过拖动进度条来控制音乐的播放进度了。

歌词显示及高亮

如果想让用户在欣赏音乐的同时，还能同步查看歌词，该怎么做呢？我们可以使用<pre>元素来显示歌词，并使用JavaScript来高亮当前正在播放的歌词行。

// 创建歌词显示区
const lyrics = document.createElement('pre');
lyrics.classList.add('lyrics');

// 将歌词显示区添加到播放器中
player.appendChild(lyrics);

// 加载歌词文件
fetch('path/to/your/lyrics.txt')
  .then(response => response.text())
  .then(data => {
    lyrics.textContent = data;
  });

// 高亮当前正在播放的歌词行
audio.addEventListener('timeupdate', () => {
  const currentTime = audio.currentTime;

  // 找到当前正在播放的歌词行
  const currentLine = lyrics.querySelector(`[data-time="${currentTime}"]`);

  // 移除其他歌词行的高亮样式
  lyrics.querySelectorAll('.highlight').forEach(line => {
    line.classList.remove('highlight');
  });

  // 为当前正在播放的歌词行添加高亮样式
  if (currentLine) {
    currentLine.classList.add('highlight');
  }
});

通过这些代码，用户就能在播放音乐的同时，看到歌词并高亮显示当前正在播放的歌词行，让音乐体验更加丰富。

播放模式设置

为了满足不同用户的需求，我们可以添加播放模式设置，允许用户选择循环播放、单曲循环或随机播放。

// 创建播放模式选择器
const playbackModeSelector = document.createElement('select');
playbackModeSelector.classList.add('playback-mode-selector');

// 添加播放模式选项
const playbackModes = ['loop', 'repeat-one', 'shuffle'];
playbackModes.forEach(mode => {
  const option = document.createElement('option');
  option.value = mode;
  option.textContent = mode;

  playbackModeSelector.appendChild(option);
});

// 将播放模式选择器添加到播放器中
player.appendChild(playbackModeSelector);

// 添加事件监听器
playbackModeSelector.addEventListener('change', (e) => {
  audio.loop = e.target.value === 'loop';
  audio.setAttribute('loop', e.target.value === 'loop');
});

现在，用户就可以根据自己的喜好选择播放模式，让音乐播放更加符合他们的需求。

播放器属性归类

为了使播放器更加清晰易用，我们可以将播放器属性进行归类。例如，将播放控制属性放在一个组中，将歌词显示属性放在另一个组中，等等。

// 创建播放控制组
const playbackControls = document.createElement('div');
playbackControls.classList.add('playback-controls');

// 将播放/暂停按钮添加到播放控制组中
playbackControls.appendChild(playPauseButton);

// 创建进度条组
const progressBarGroup = document.createElement('div');
progressBarGroup.classList.add('progress-bar-group');

// 将进度条添加到进度条组中
progressBarGroup.appendChild(progressBar);

// 创建歌词显示组
const lyricsGroup = document.createElement('div');
lyricsGroup.classList.add('lyrics-group');

// 将歌词显示区添加到歌词显示组中
lyricsGroup.appendChild(lyrics);

// 将播放控制组、进度条组和歌词显示组添加到播放器中
player.appendChild(playbackControls);
player.appendChild(progressBarGroup);
player.appendChild(lyricsGroup);

通过这种方式，播放器的属性被清晰地组织起来，使之更加直观和易于操作。

结语

通过本教程，你已经学会了如何使用原生JS创建音乐播放器，并添加了播放进度条控制、歌词显示及高亮、播放模式设置等功能。当然，你也可以根据自己的需求和创意，添加更多功能，让播放器更加强大和个性化。

在音乐的世界里，尽情徜徉，享受旋律的魅力，让音乐成为你生活中不可或缺的一部分。而你亲手打造的音乐播放器，将成为你音乐之旅中忠实的伴侣。