react-music-widget

### 安装 ```shell script yarn add react-music-widget ``` ### 配置

Usage no npm install needed!

<script type="module">
  import reactMusicWidget from 'https://cdn.skypack.dev/react-music-widget';
</script>

README

使用方式

安装

yarn add react-music-widget

配置

declare type PropsType = Props<null> & {
    audioId?: string; // audio元素id
    textColor?: string; // 歌词颜色
    panelColor?: string; // 面板颜色
    theme?: "default";  // 主题，暂未使用
    progressColor?: ''; // 进度条颜色
    autoHidden?: boolean; // 是否自动隐藏
    musicList?: MusicList; // 歌曲列表，另外支持拖动歌曲播放
    position?: 'top' | 'middle' | 'bottom'; // 面板初始位置
};

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import {Player} from 'react-music-widget'

const url = "http://up_mp4.t57.cn/2018/1/03m/13/396131229550.m4a"
const musicList = [{
    url,
    name: '最美的期待-周笔畅'
}]

ReactDOM.render(<Player musicList={musicList} position={"middle"}/>, document.querySelector('#root'))

示例

demo

https://yuhengshen.github.io/react-music-widget/

gif

demo

已知问题

  • 隐藏歌词和面板时，组件effect取消函数addTimeUpdateCallback可能晚于audio的onUpdateTime回调，此时有概率会提示内存泄漏风险。实际并没无影响。