9

So I am using the react-native-audio package to play preloaded audio files and capture the user's recorded audio. What I would like to do is convert the audio into some sort of data for visualization and analysis. There seems to be several options for web but not much in this direction specifically for React Native. How would I achieve this? Thank you.

Tom Goldenberg
  • 566
  • 3
  • 6
  • 14
  • 1
    You can have a look at react-sparklines.It is a react-package but it might work for react-native too as it does not seem to use any core node modules – Nishanth Shankar Oct 18 '15 at 07:22
  • however, `react-sparklines` presumes a set of data. Not sure how I would get the raw numerical data from a saved .mp3 or .caf file in RN – Tom Goldenberg Oct 18 '15 at 15:19
  • While looking for this functionality I found EZAudio https://github.com/syedhali/EZAudio, it has nice visualisations specially "EZAudioOpenGLWaveformExample" made with OpenGL, so somehow I think could be reproduced with https://github.com/ProjectSeptemberInc/gl-react-native , and wrapped as a react-native-wave-plot component, I suspect would be much more fluid than react-sparklines. – alfonsodev Oct 18 '15 at 20:23
  • @alfonsodev Thank you, that's really interesting. I'm not an objective C / Swift person, so it would be great to have some examples in the React Native community. It seems like there are a lot of options, but no clear path for those unfamiliar with Swift for now. – Tom Goldenberg Oct 18 '15 at 20:42
  • Currently trying to link up the `node-waveform` npm package, but finding that difficult as well :/ – Tom Goldenberg Oct 18 '15 at 20:56
  • but do you need it as image, or animated ? with gl-react-native you can pass fragment shaders, so in theory this code https://www.shadertoy.com/view/4dl3z4 could be passed as a fragment shader, to gl-react-native, – alfonsodev Oct 18 '15 at 21:08
  • @alfonsodev that sounds really interesting. I haven't looked at gl-react-native (haven't used any webGL stuff at all, actually), so that sounds like a possiblility – Tom Goldenberg Oct 18 '15 at 21:20
  • @alfonsodev Also, I am looking for animated waveform, but also interested in the raw frequency data to compare two separate audio files – Tom Goldenberg Oct 18 '15 at 21:35
  • @alfonsodev I'm thinking the way of gl-react-native and wrapping some of the EZAudio examples would be the best. I'll be struggling to try to get it to work, so if you do feel like making an example, I'm sure the community would appreciate it :) – Tom Goldenberg Oct 19 '15 at 00:07
  • @TomGoldenberg are you still having issues w/ this? – JayGarcia Jun 28 '16 at 19:31
  • @JayGarcia I've let it slip by the wayside, but might be interested in taking it up again in the future. Can you write a blog post on how to do this? I think it would be really interesting! – Tom Goldenberg Jun 29 '16 at 19:01
  • Has anyone had any luck with this? I was thinking of taking to up, but I don't have much experience with native code. Can someone point me on the right direction? @alfonsodev – Aakash Sigdel Aug 17 '16 at 04:30
  • @AakashSigdel Did you find the solution? – Nam Vu Aug 10 '17 at 03:38

1 Answers1

6

I've just bump with this post, I am building a React Native Waveform visualiser, still work in progres with the android side, but its working on the iOS side.

Pretty much is a port from WaveForm on IOS ,using Igor Shubin's solution.

You are very welcome to check out the code at https://github.com/juananime/react-native-audiowaveform

  1. To try straight away:

    npm react-native-audiowaveform --save

Cheers!

Community
  • 1
  • 1
Juanan Jimenez
  • 194
  • 2
  • 7