React>> react_audio_player>> 返回
项目作者： Dalanke

项目描述 ：
HTML5 audio tag based player as react component
高级语言： JavaScript
项目地址: git://github.com/Dalanke/react_audio_player.git
创建时间： 2020-08-26T15:56:58Z
项目社区：https://github.com/Dalanke/react_audio_player
开源协议：
下载


React audio player

This a React component based on HTML5 <audio> tag. It provides basic music player features as well as responsive design. Could be a reference for who want to create their own music player in React.

image

Click here for mobile screen shot

This component has been used in project Teatime music, visit github repo to see detail:

https://github.com/Dalanke/youtube_audio_API

Live demo can be access here:

https://stayhome-ui.herokuapp.com/

Project structure

  1. .
  2. ├── README.md
  3. ├── example
  4. ├── lib
  5. ├── package-lock.json
  6. ├── package.json
  7. ├── rollup.config.js
  8. └── src
  • Source code located in src
  • Example are created by create-react-app, use cd example && npm start to start in local host (might need to link the package first)

Usage

Import

  1. npm install @dalanke/react-audio-player
  1. import { Player } from '@dalanke/react-audio-player';
  3. ...
  4. // in render()/return()
  5. <Player
  6.   playlist={this.state.playlist}
  7.   shufflePlaylist={this.shufflePlaylist}
  8.   removeFromPlaylist={this.removeFromPlaylist}
  9.   hide={this.state.hidePlayer}
  10. ></Player>

Component props

  • playlist: the playlist pass into player. Playlist should be a object contains name, description and musics. musics is an array store muisc information, src will be passed into <audio src="">. See example playlist below:

    1. const testPlaylist = {
    2. name: 'Temp Playlist',
    3. description: '',
    4. musics: [
    5.   {
    6.     src: 'https://stayhome-api.herokuapp.com/stream?id=HdQCWXh3XXU',
    7.     title: 'STYX HELIX ',
    8.     author: 'Re：ゼロから始める異世界生活 ED1',
    9.     thumbnail: 'https://i.ytimg.com/vi/HdQCWXh3XXU/maxresdefault.jpg',
    10.   },
    11.   {
    12.     src: 'https://stayhome-api.herokuapp.com/stream?id=E8S2IHiuWZA',
    13.     title: 'Kizuna Music キズナミュージック♪ [Piano+Sheet]',
    14.     author: 'Poppin Party',
    15.     thumbnail: '',
    16.   },
    17.   ],
    18. }

  • shufflePlaylist: the function shuffle playlist(shuffle musics array), example code:

    1. shufflePlaylist = (callback) => {
    2.   const copyList = [...this.state.playlist.musics];
    3.   for (let i = copyList.length - 1; i > 0; i--) {
    4.     const j = Math.floor(Math.random() * (i + 1));
    5.     [copyList[i], copyList[j]] = [copyList[j], copyList[i]];
    6.   }
    8.   // we need reset the current index after shuffle, pass the call back in here
    9.   this.setState({ playlist: { ...this.state.playlist, musics: copyList } }, callback);
    10. }

  • removeFromPlaylist: remove a song from playlist, used in playlist button, example code: 

    1. removeFromPlaylist = (index) => {
    2.   const copyList = [...this.state.playlist.musics];
    3.   copyList.splice(index, 1);
    4.   this.setState({ playlist: { ...this.state.playlist, musics: copyList } });
    5. }

  • hide: boolean, hide the player or not

Development