我创建了一个开源音乐播放器🎵🎶

几天前，我发表了一篇关于如何创建madza.dev 的帖子。其中最令人兴奋的部分之一是为音乐部分创建一个音频播放器。

我收到了一些关于此事的 PM，所以我决定详细说明一下。

作为一名音乐制作人，我最初只是把它当作播放自己曲目的组件。然而，随着我不断努力，我越来越意识到我应该把它变成一个让社区也能从中受益的东西。

所以我用它做了一个开源包。你可以安装它，设置音轨源，还可以自定义外观。

特征

播放/暂停
下一页/上一页
重复/循环
进度滑块
剩余时间/总计
音量滑块
搜索轨迹
按类型过滤
播放列表项目

安装

 npm install @madzadev/audio-player

用法

import Player from "@madzadev/audio-player";
import "@madzadev/audio-player/dist/index.css";

const tracks = [
  {
    url: "https://audioplayer.madza.dev/Madza-Chords_of_Life.mp3",
    title: "Madza - Chords of Life",
    tags: ["house"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Late_Night_Drive.mp3",
    title: "Madza - Late Night Drive",
    tags: ["dnb"],
  },
  {
    url: "https://audioplayer.madza.dev/Madza-Persistence.mp3",
    title: "Madza - Persistence",
    tags: ["dubstep"],
  },
];

<Player trackList={tracks}>

trackList是必需的 prop，需要传入由url、title和tags键的对象组成的数组。

选项

显示可用选项属性的默认值。

<Player
  trackList={tracks}
  includeTags={true}
  includeSearch={true}
  showPlaylist={true}
  autoPlayNextTrack={true}
/>

配色方案

您可以通过编辑下方的颜色变量来进一步自定义播放器 UI。我们计划在未来推出预定义的配色方案。

const colors = `html {
          --tagsBackground: #9440f3;
          --tagsText: #ffffff;
          --tagsBackgroundHoverActive: #2cc0a0;
          --tagsTextHoverActive: #ffffff;
          --searchBackground: #18191f;
          --searchText: #ffffff;
          --searchPlaceHolder: #575a77;
          --playerBackground: #18191f;
          --titleColor: #ffffff; 
          --timeColor: #ffffff;
          --progressSlider: #9440f3;
          --progressUsed: #ffffff;
          --progressLeft: #151616;
          --volumeSlider: #9440f3;
          --volumeUsed: #ffffff;
          --volumeLeft:  #151616;
          --playlistBackground: #18191f;
          --playlistText: #575a77;
          --playlistBackgroundHoverActive:  #18191f;
          --playlistTextHoverActive: #ffffff;
      }`;

<Player trackList={tracks} customColorScheme={colors} />

最后说明

建议使用Contentful或DatoCMS等 CMS来管理您的音频文件并通过 API 访问它们。

该项目是开源的，任何功能请求或问题都欢迎在Github 仓库中提出。如果您喜欢，可以看看并点个⭐。

写作一直是我的热情所在，能够帮助和激励他人让我感到快乐。如有任何疑问，欢迎随时联系我们！

在Twitter、LinkedIn和GitHub上关注我！
访问我的博客查看更多文章。

文章来源：https://dev.to/madza/i-created-an-open-source-music-player-53bh