react-native-soundcloud-waveform

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

Show Cases

Getting Started

• Installation
• Basic Usage
• Properties
• Contribution
• Questions

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

• @pritishvaidya The main author.

Questions

Feel free to contact me or create an issue