歌曲列表项设置为按钮：一键点击播放歌曲

javascript

2024-03-19 11:07:09

如何将歌曲列表项设为按钮，以便点击播放

简介

在当今快节奏的世界中，音乐已成为我们生活中不可或缺的一部分。无论是通勤途中、锻炼时还是放松时，音乐都能为我们带来慰藉和陪伴。然而，有时我们可能会发现自己陷入了笨拙的播放列表界面，很难快速找到并播放我们想要的歌曲。

本博客文章将指导您如何将歌曲列表项设为按钮，以便点击即可播放歌曲。我们将深入探讨该过程的各个步骤，并提供一个示例代码片段，供您在自己的项目中使用。

将歌曲列表项设为按钮

1. 创建歌曲列表

首先，我们需要创建一个无序列表，其中每个列表项代表一首歌曲。确保为每个列表项分配一个唯一的 ID。

2. 添加事件侦听器

接下来，我们需要为每个列表项添加一个事件侦听器，用于侦听点击事件。当用户点击列表项时，事件侦听器将触发，并调用一个函数来播放或暂停歌曲。

3. 播放或暂停歌曲

在事件侦听器函数中，我们将使用 JavaScript 中的 HTML5 Audio API 播放或暂停歌曲。我们需要为每个歌曲创建一个音频对象，并根据需要播放或暂停它们。

示例代码

<ul>
  <li id="song1">歌曲 1</li>
  <li id="song2">歌曲 2</li>
  <li id="song3">歌曲 3</li>
</ul>

const songs = {
  song1: new Audio('song1.mp3'),
  song2: new Audio('song2.mp3'),
  song3: new Audio('song3.mp3'),
};

document.querySelectorAll('li').forEach((song) => {
  song.addEventListener('click', () => {
    const audio = songs[song.id];
    if (audio.paused) {
      audio.play();
    } else {
      audio.pause();
    }
  });
});