react-playlist-player v1.2.6

https://www.patreon.com/champipatreon

react-playlist-player

Open live demo

Install

  npm install react-playlist-player mobx mobx-react --save

You'll also need the following devDependencies:

"devDependencies": {
    "@babel/cli": "^7.14.5",
    "@babel/core": "^7.14.6",
    "@babel/plugin-proposal-decorators": "^7.14.5",
    "@babel/plugin-syntax-jsx": "^7.14.5",
    "@babel/polyfill": "^7.12.1",
    "@babel/preset-env": "^7.14.7",
    "@craco/craco": "^5.6.4",
    "node-sass": "^6.0.1"
  }

then update the scripts:

"scripts": {
    "start": "craco start",
    "build": "craco build"
  }

and add a craco.config.js at the root of your project:

module.exports = {
  reactScriptsVersion: "react-scripts",
  babel: {
    plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]]
  }
};

Usage

import React, { Component } from 'react'
import { render } from 'react-dom'
import AudioPlayer from 'react-playlist-player'

class Demo extends Component {
  state = {
    currentPlayList: {}
  }

  loadPlayList = () =>
    this.setState({
      currentPlayList: {
        playlistCoverUrl: 'path/to/coverUrl',
        playlistName: 'playlist name',
        bandName: 'band name',
        songs: [
          {
            position: '1',
            songName: 'foo',
            songUrl: 'path/to/songUrl'
          },
          {
            position: '2',
            songName: 'bar',
            songUrl: 'path/to/songUrl'
          },
          {
            position: '3',
            songName: 'baz',
            songUrl: 'path/to/songUrl'
          }
        ],
        type: 'album'
      }
    })

  render() {
    return (
      <div className={'Demo'}>
        <button className={'Demo__load-btn'} onClick={this.loadPlayList}>
          load playlist
        </button>
        <AudioPlayer currentPlayList={this.state.currentPlayList} 
          onToggle={({audioPlaying}) => console.log({audioPlaying})}
          onSongChanged={({currentSong}) => {console.log(currentSong)}}
        />
      </div>
    )
  }
}

render(<Demo />, document.querySelector('#demo'))

Props

Exposed api

toggleAudio

import { toggleAudio } from 'react-playlist-player'

// Plays / pauses the audio
toggleAudio()