search

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

When will this be ready to use? #1

Closed tgoldenberg closed 8 years ago

tgoldenberg commented 9 years ago

This looks really interesting. I am interested in converting user recordings and pre-recorded sound files into data, based on their frequency, as well as give a visualization. Any suggestions or things you would recommend I check out? Thanks!

vespakoen commented 9 years ago

I have used this in an old react-native app (works!) Not sure with the latest version of react native though, so try it out and let me know!

tgoldenberg commented 8 years ago

@vespakoen Could you maybe provide some instructions on how to use this in a RN project? I wouldn't know where to start, so it would be a big help. Once I figure it out, I wouldn't mind making some helpful documentation notes

So first steps:

  1. npm install react-native-waveform --save
  2. link libraries with the libWaveForm.a file
  3. let Waveform = require('react-native-waveform');
  4. Then what? Can I pass the component an mp3 file, etc. ??
vespakoen commented 8 years ago

You can set the filename or base64Content property

https://github.com/vespakoen/react-native-waveform/blob/master/RCTWaveFormManager.m#L12-L13

jamesfzhang commented 8 years ago

Some more instructions would be great, I have it working with v0.15 of react-native.

<Waveform
  style={{ width: 300, height: 100 }}
  filename='audio.mp3'
/>

As the mp3 plays, how do you show a highlighted portion of the waveform?

vespakoen commented 8 years ago

This project wraps https://github.com/fulldecent/FDWaveformView into react native and exposes some properties.

Showing progress is possible with this library, from the looks of their readme:

// Set play progress to highlight part of the waveform:
self.waveform.progressSamples = self.waveform.totalSamples / 2;

I also haven't been following react-native lately so I don't know what has changed that breaks this package on newer react-native versions.

Right now I use a (crosswalk) webview (embedded it native apps) with http://wavesurfer-js.org/ inside, which has a lot more features and works great for (dis)playing audio files.

I am not really planning on updating this project, but am happy to accept pull request and accept you as contributors.

vespakoen commented 8 years ago

Hey, a little update, I just pushed some changes I made to the project (a start of adding android support) The repository is quite messy at the moment, the IOS library is in there twice now.

I suggest to use waveform.js or wavesurfer.js in a WebView if you want to get something cross-platform quickly.

I will probably continue work on this project in a couple of weeks (busy with other stuff at the moment)

If you want to help / become a contributor, let me know and I'll add you.