SoundCloud 基于 React.js 写的 Player

阴明
1,152 阅读2分钟
原文链接： labs.voronianski.com

Create custom SoundCloud players with React.js

View on Github[1]Check Examples

Getting Started

npm install react-soundplayer --save
ReactSoundPlayer is bundled with componentsaddons inside, both should be required separately.
// all examples use ES6 syntax
import { PlayButton, Progress, Icons }  'react-soundplayer/components';
import { SoundPlayerContainer }  'react-soundplayer/addons';

const { SoundCloudLogoSVG } = Icons;

// ...
Module depends on React.js[2] 0.13.x (or higher) and SoundCloudAudio[3] for managing HTML5 Audio.

Pure Components

Each component accepts className prop as regular DOM elements which makes it simple to use different styles with them. Here is the list of all available so-called "dumb" components that accept data and callbacks with self-descriptive props:

<PlayButton />

Play or pause track.
<PlayButton
    className={String}
    playing={Boolean}
    seeking={Boolean}
    seekingIcon={ReactElement}
    onTogglePlay={Function}
    soundCloudAudio={instanceof SoundCloudAudio}
/>

<NextButton />

Switch to the next track in a playlist.
<NextButton
    className={String}
    onNextClick={Function}
    soundCloudAudio={instanceof SoundCloudAudio}
/>

<PrevButton />

Return to the previous track in a playlist.
<PrevButton
    className={String}
    onPrevClick={Function}
    soundCloudAudio={instanceof SoundCloudAudio}
/>
Important note: All buttons accept soundCloudAudio prop which when passed will add actions to buttons automagically (e.g. play or pause, go to prev or next track), callback function used in onTogglePlayonNextClickonPrevClick will still be called after.

<Progress />

Component that replaces native <progress> DOM element[4]soundCloudAudio prop is passed it automagically updates track audio time due to clicked progress position.
<Progress
    className={String}
    innerClassName={String}
    value={Number}
    onSeekTrack={Function}
    soundCloudAudio={instanceof SoundCloudAudio}
/>

<Timer />

Shows current time of the track and its' duration in(hh:)mm:ss/(hh:)mm:ss format.
00:2405:00
<Timer
    className={String}
    duration={Number}
    currentTime={Number}
/>

<Cover />

Nice looking cover box inspired by original SoundCloud players.
Exploding Whale by Sufjan Stevens
franiefroufrou
<Cover
    className={String}
    trackName={String}
    artistName={String}
    backgroundUrl={String}
/>

Higher-order Containers

In the heart of ReactSoundPlayer there is a container that incapsulates interaction with browser's Audio object and passes all necessary state data as properties inside children.

<SoundPlayerContainer />

In order to use it just choose what kind of data you are consuming (via resolveUrlstreamUrl
render() {
    return (
        <SoundPlayerContainer
            clientId={String}
            resolveUrl={String}
            streamUrl={String}
            onStartTrack={Function}
            onStopTrack={Function}
        >
        {/*Children get props full of useful data!*/}
        </SoundPlayerContainer>
    );
}
With this information in mind it is really easy to create your own custom players like on example below:

Долго объяснять

Stepan i Meduza_official

import React  'react';
import { SoundPlayerContainer }  'react-soundplayer/addons';

const clientId = 'YOUR CLIENT ID';
const resolveUrl = 'https://soundcloud.com/stepan-i-meduza-official/dolgo-obyasnyat';

class CustomPlayer extends React.Component {
    play() {
         { soundCloudAudio, playing } = .props;
         (playing) {
            soundCloudAudio.pause();
        }  {
            soundCloudAudio.play();
        }
    }

    render() {
         { track, playing } = .props;

         (!track) {
            return <>Loading...</>;
        }

        return (
            <>
                <>{track.title}</>
                <>{track.user.username}</>
                <button onClick={this.play.bind(this)}>
                    {playing ? 'Pause' : 'Play'}
                </button>
            </>
        );
    }
}

class  extends React.Component {
    render() {
        return (
            <SoundPlayerContainer resolveUrl={streamUrl} clientId={clientId}>
                <CustomPlayer />
            </SoundPlayerContainer>
        );
    }
}

React.render(< />, document.body);

Example Players

These beautiful players are built using pure componentsSoundPlayerContainer. What makes them extremely pretty is a low-level modular CSS toolkit named BASSCSS[5]It's easy to create your own!

Shura - Indecision (12" Edit)

00:0005:45

Say Lou Lou

Nothing But A Heartbeat

PC Music ♩

00:0000:00

pc-r6: easyFun - Deep Trouble

JOHNNY JEWEL

GLASS CANDY / SHELL GAME

Icon Components

Icons for buttons and SoundCloud logo can be used on their own as well. All of them are pure SVG right now.
import { Icons }  'react-soundplayer/components';

// the list of available icons:
const {
    SoundCloudLogoSVG,
    PlayIconSVG,
    PauseIconSVG,
    NextIconSVG,
    PrevIconSVG
} = Icons;

Troubleshooting

Please keep in mind that SoundCloud provides an option for users to prevent streaming to third-party apps.If your sound isn't playing check the trackstreamable property. If it is set to false, there is no way to play that sound with the API.

Useful Resources

avatar
文章
阅读
粉丝