vespakoen / react-native-waveform

react-native module that exposes (and fixes some bugs in) FDWaveformView for visualizing waveforms of an audio file.
8 stars 2 forks source link

Android Support? #2

Open ericraio opened 8 years ago

ericraio commented 8 years ago

android support?

vespakoen commented 8 years ago

Hey! I might pick this up again in a couple of weeks. I am using this in my side project, I actually added some sort of android support, it's not great though. I will push it now, maybe you can improve it.

vespakoen commented 8 years ago

Ok, just pushed it, seems like I tried another IOS library as well. (Now there are basically 2 IOS libraries in the project, one should be removed) I suggest you use a WebView with something like Waveform.js if you want something stable-ish for now, and look back (or contribute!) to this project for a better solution.

ericraio commented 8 years ago

@vespakoen thanks for the speedy response!

I am building a radio app and I am using MediaPlayer on Android and StreamingKit for iOS, I am wondering if I could input the PCM data into this module

vespakoen commented 8 years ago

Hey, that should be possible, store the PCM as a .wav and it should be able to process it just fine (The release version on IOS should at least)

If you install the master branch, and do something like

<Waveform src="path/to/some.wav" />

That might even work as well.

There are other properties you can set (all the ReactProp's) https://github.com/vespakoen/react-native-waveform/blob/master/android/src/main/java/com/vespakoen/waveform/WaveformViewManager.java#L50

But you shouldn't use them (or be ready to update them later) since they will be removed / renamed.

vespakoen commented 8 years ago

By the way, at the moment this project hasn't found a cross-platform API yet. The way forward would be to define one, and implement it on both platforms.

If you want to work on this, I would be happy to give you contribution access. If not, you will have to wait a couple more weeks until I pick this up again.

ericraio commented 8 years ago

@vespakoen yeah id love to work on this, thanks!

vespakoen commented 8 years ago

In that case, congrats! you are now a collaborator, let me know if you have any questions =)

ericraio commented 8 years ago

@vespakoen do you have any screenshots of your app with the library in use? I want to show another radio app about this lib. :)

vespakoen commented 8 years ago

Oeff, let me check

vespakoen commented 8 years ago

Well, I found this (for android)

var React = require('react-native');
// var Recorder = require('react-native-recorder');
var Waveform = require('react-native-waveform');

var {
  View,
  Text,
  StyleSheet,
  TouchableHighlight,
  WebView
} = React;

var Request = React.createClass({
  render() {
    return (
      <Waveform
        src={this.props.audioSrc}
        style={styles.waveform}
        gridLineColor="#ff0000"
        waveformSelectedColor="#00ff00"
        waveformUnselectedColor="#000000"
        waveformUnselectedBackgroundColor="#ffffff"
        selectionBorderColor="#0000ff"
        playbackIndicatorColor="#ffff00"
        timecodeColor="#00ffff"
        timecodeShadowColor="#0f0f0f" />
    );
  }
});

var styles = StyleSheet.create({
  waveform: {
    height: 100,
    width: 300
  }
});

module.exports = Request;

But I modified the project that it was in to use webpack, which I couln't get to work, so it's in a kindof "fucked" state at the moment, perhaps you can try to get that to build (using the master branch, npm install --save git+https://github.com/vespakoen/react-native-waveform.git)

vespakoen commented 8 years ago

This might help:

android/settings.gradle

...
include ':react-native-waveform'
project(':react-native-waveform').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-waveform/android')

android/app/build.gradle

dependencies {
    ...
    compile project(':react-native-waveform')
}

android/app/src/main/java/com/NAME_OF_PROJECT/MainActivity.java

import com.vespakoen.waveform.WaveformPackage; // <-- add this to imports

...
    @Override
    protected List<ReactPackage> getPackages() {
        return Arrays.<ReactPackage>asList(
          ...
          new WaveformPackage() // <--- add this to packages