轻松让你的React项目具备音乐播放功能

1,335 阅读1分钟

前言:最近一直在忙里偷闲开发React音乐插件,到现在已经完成了百分之八十,快来看看有哪些内容吧~希望能帮到你们。

总览

使用该组件时,刚进入页面是这样的,只有一个音乐唱片在左下角,如下所示。

image.png

点击这个音乐唱片之后,可以显示音乐卡片,音乐卡片具备 暂停播放、切换音乐、静音、拖拽进度条等功能

image.png

点击右上角的更多按钮可以打开一个页面,在这个页面中可以搜索,删除掉正在播放音乐列表中不想听的内容

image.png

使用方法

  • 安装
npm i wjj-player
  • 在入口文件中引入css
import 'wjj-player/dist/style.css'
  • 任意一个组件中,导入Player并使用
import React from 'react'
import { Player } from 'wjj-player'
function App() {
  return (
    <div className='App'>
      <Player />
    </div>
  )
}

export default App

想对大家说的话

因为刚刚接触react没多久,所以开发了一个这样的小音乐组件练练手,目前还有挺多功能没实现的,例如:

  • 类似随机播放和顺序播放这种控制播放顺序的功能
  • 登录并查看自己的歌单的功能
  • 手机端适配
  • 性能优化
  • 打包优化
  • 类型问题

但是希望如果大家看到了,感兴趣的话可以npm install下来试用一下,如果有什么问题或建议,也可以留在评论区或者去github中提issue:https://github.com/hnustwjj/wjj-music。希望能跟大家互相学习,谢谢qwq。