Skip to content
Creating a simple transform to the SoundCloud's waveforms from the image url
JavaScript Objective-C Python Java
Branch: master
Clone or download
Latest commit 71019a2 Feb 13, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
_tests_
example Fixing whatwg-fetch error and updating peer dependencies Feb 13, 2019
src Fixing whatwg-fetch error and updating peer dependencies Feb 13, 2019
.editorconfig Updating the config files and removing lint errors Jan 21, 2019
.eslintrc.json Adding the utils jest tests Jan 21, 2019
.gitignore
.jest.json Updating the readme Jan 23, 2019
.npmignore Adding rollup config Jan 22, 2019
.travis.yml Adding travis integration to code climate 💥 Jan 21, 2019
LICENSE Initial commit Oct 2, 2018
README.md Adding codefactor badge Jan 27, 2019
global-mocks.js Adding jest changes Jan 22, 2019
package.json Bumping the version Feb 13, 2019
rollup.config.js Adding rollup config Jan 22, 2019
yarn.lock

README.md

react-native-soundcloud-waveform Build Status CodeFactor Maintainability Test Coverage npm version npm downloads module formats: umd, cjs, esm

Creating a simple transform to the SoundCloud's waveforms from the image url

Show Cases

Alt Text

Getting Started

Installation

$ npm i react-native-soundcloud-waveform --save

Basic Usage

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

import SoundCloudWaveform from 'react-native-soundcloud-waveform'

...
setTime = (time) => {
  
}

render() {
   <View style={Styles.progressContainer}>
      <SoundCloudWaveform
        waveformUrl={track.waveform_url}
        percentPlayable={playableTime}
        percentPlayed={currentTime)}
        setTime={this.setTime}  
      />
   </View>
}

Properties

Prop Default Type Description
waveformUrl required string The png format waveform_url object of the SoundCloud's track
setTime required func Callback function to update the current time. (returns progress in between 0 - 100)
percentPlayed required number The current time of the track (progress in between 0 - 1)
percentPlayable 0 number The percentage of the track that has been buffered (progress in between 0 - 1)
height 50 number The height of the waveform
width screenWidth number The width of the waveform
active #FF1844 string Active Color of the waveform
activeInverse #4F1224 string Active Color of the inverse waveform
activePlayable #1b1b26 string Active buffered track color of the waveform
activePlayableInverse #131116 string Active buffered track color of the inverse waveform
inactive #424056 string Inactive color of the waveform
inactiveInverse #1C1A27 string Inactive color of the inverse waveform

Contribution

Questions

Feel free to contact me or create an issue

You can’t perform that action at this time.