dfws-react-audio

东方网升 react 版本音频播放器组件

Usage no npm install needed!

<script type="module">
  import dfwsReactAudio from 'https://cdn.skypack.dev/dfws-react-audio';
</script>

README

东方网升 react 版本音频播放器组件

发布

  1. 更改package.json版本
  2. yarn run build
  3. npm publish 注：镜像源需切换回NPM官方源

链接

示例

  • yarn
  • yarn start

使用之前

该组件依赖于react,antd，使用之前请配置react。

何时使用

  • 需要播放课程,音乐等。

API

import AudioPlayer from 'dfws-react-audio'

<AudioPlayer.WebAudio
    ref={musicRef}
    onChange={v => console.log(v)}
    onOperate={v => console.log(v)}
    info={[{
      src: "http://ting6.yymp3.net:86/new27/underlover/3.mp3",
      artist: "林俊杰",
      name: "杀手",
      img: "https://img2-xz.veimg.cn/CourseMpic/2017113016101327292.jpg?x-oss-process=image/crop,x_100,y_0,w_500,h_500",
      id: "66575568448"
    }, {
      src: "http://mp3.9ku.com/m4a/186947.m4a",
      artist: "冷漠",
      name: "看透爱情看透你",
      img: "https://img2-xz.veimg.cn/CourseMpic/201711301695915297.jpg?x-oss-process=image/crop,x_100,y_0,w_500,h_500",
      id: "66575568447"
    }, {
      src: "http://ting6.yymp3.net:86/new27/zhangbeibei/4.mp3",
      artist: "张北北",
      name: "如果爱你注定是我受的罪",
      img: "https://img2-xz.veimg.cn/CourseMpic/201711301694361683.jpg?x-oss-process=image/crop,x_100,y_0,w_500,h_500",
      id: "66575568441"
    }]} 
/>

upload props

参数 说明 类型 默认值
info 播放列表信息 array []
ref 实例对象 string or DOM -
onChange 播放后回调函数 返回数组 [{src:文件信息,id:上传完成后的路径}] function -
onOperate 播放控件操作回调函数 operate[上一首,下一个] function -

参考文档