juananime / react-native-audiowaveform Goto Github PK
View Code? Open in Web Editor NEWAudio waveform renderer for React Native
Audio waveform renderer for React Native
Hey, i want to use something with streaming, showinhg a audio spectro or something like that, this works with that?
Can I use this library for the latest react native project?
May I know the performance issue is fixed for the android part?
The URL of this package is incorrect in NPM, and points to https://github.com/juananime/react-native-waveformt (notice the 't' at the end).
See:
https://www.npmjs.com/package/react-native-audiowaveform
Awesome lib, but I have found out that when we put a source file and display the wave form, we can not use play prop to let it play the audio on iOS 12.4 which is working on Android.
I keep getting this error while building the app in android
* What went wrong:
Execution failed for task ':react-native-audiowaveform:compileDebugJavaWithJavac'.
> Could not resolve all files for configuration ':react-native-audiowaveform:debugCompileClasspath'.
> Could not find recyclerview-1.0.0.jar (androidx.recyclerview:recyclerview:1.0.0).
Searched in the following locations:
https://dl.google.com/dl/android/maven2/androidx/recyclerview/recyclerview/1.0.0/recyclerview-1.0.0.jar
checked everything in Readme file.
react native version: 0.64.0
"react-native-audiowaveform": "^2.0.5"
Hi can I know where can I access the generated wave image from the local mobile folder in iOS and android? Or do we have a function just to access the image?
thanks,
"libOGReactNativeWaveform.a" cannot be found.
I'm on Mac OS. all NPM, xcode, etc are up-to-date.
Thank you for sharing the module. Its fun!
But unfortunately for making an apk with the latest master banch, I had to have few changes like this.
tf0054@e3cd51a
And I found the change of parameter name and it needed me to apply the according change to react-native-audiowaveform module pulled from npm repo (v1.0.461)
tf0054@e3cd51a#diff-ff34929671c373ab095bcafa91bd46d4
patch -d node_modules/react-native-audiowaveform < react-native-audiowaveform_index_js.diff
Is it possible to add WaveformWrapper.js which is missing? I guess itd the best to sync the example between Android and IOS.
Hi, great component btw.
I'm having a problem when I run de assempleDebug.
The app works perfectly when I do npx react-native run-android.
The soundfile is playing and the UI works just fine in dev mode with my phone connected with usb.
But In the APK I see this with logcat:
E/OGTAGDEBUG::: waveformFinishPlay:
E/XSXGOT: soundfile is null
V/MediaPlayerNative: isPlaying: no active player
Any idea? Thanks
Is there any events like onLoadComplete ?
hey , i can't find how to get audio info like,
duration,
current time ... etc
thanks in advance :)
appreciated your work @juananime, Does this library support iTunes music ?
if Yes than Please provide Demo Example for that
Thanks for the hard work on this module.
I have run into a couple of issues using this on iOS:
2018-08-16 14:38:58.755514+0100 CloudVoiceSimple[27007:10505913] SRC ::: {
isAsset = 0;
isNetwork = 1;
mainVer = 0;
patchVer = 0;
uri = "https://archive.org/download/testmp3testfile/mpthreetest.mp3";
}
2018-08-16 14:38:58.755723+0100 CloudVoiceSimple[27007:10505913] NSURLRequest :: https://archive.org/download/testmp3testfile/mpthreetest.mp3
2018-08-16 14:38:58.763712+0100 CloudVoiceSimple[27007:10505913] reactSetFrame ::: (null)
2018-08-16 14:38:59.487585+0100 CloudVoiceSimple[27007:10513492] [] nw_connection_get_connected_socket 231 Connection has no connected handler
2018-08-16 14:39:01.402117+0100 CloudVoiceSimple[27007:10505913] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [nan 16.5]'
*** First throw call stack:
(
0 CoreFoundation 0x00000001058481e6 __exceptionPreprocess + 294
1 libobjc.A.dylib 0x0000000103cec031 objc_exception_throw + 48
2 CoreFoundation 0x00000001058bd975 +[NSException raise:format:] + 197
3 QuartzCore 0x00000001081ace25 _ZN2CA5Layer12set_positionERKNS_4Vec2IdEEb + 151
4 QuartzCore 0x000000010819d52a -[CALayer setPosition:] + 43
5 QuartzCore 0x000000010819db58 -[CALayer setFrame:] + 544
6 UIKit 0x000000010982c557 -[UIView(Geometry) setFrame:] + 368
7 CloudVoiceSimple 0x0000000101ffca25 __34-[OGWaverformView updateProgress:]_block_invoke + 261
8 UIKit 0x000000010983f597 +[UIView(UIViewAnimationWithBlocks) _setupAnimationWithDuration:delay:view:options:factory:animations:start:animationStateGenerator:completion:] + 560
9 UIKit 0x000000010983fb25 +[UIView(UIViewAnimationWithBlocks) animateWithDuration:animations:] + 48
10 CloudVoiceSimple 0x0000000101ffc8d2 -[OGWaverformView updateProgress:] + 642
11 Foundation 0x00000001037564dd __NSFireTimer + 83
12 CoreFoundation 0x00000001057d7e64 __CFRUNLOOP_IS_CALLING_OUT_TO_A_TIMER_CALLBACK_FUNCTION__ + 20
13 CoreFoundation 0x00000001057d7a52 __CFRunLoopDoTimer + 1026
14 CoreFoundation 0x00000001057d760a __CFRunLoopDoTimers + 266
15 CoreFoundation 0x00000001057cee4c __CFRunLoopRun + 2252
16 CoreFoundation 0x00000001057ce30b CFRunLoopRunSpecific + 635
17 GraphicsServices 0x000000010d8fca73 GSEventRunModal + 62
18 UIKit 0x000000010977d0b7 UIApplicationMain + 159
19 CloudVoiceSimple 0x0000000101cbb18f main + 111
20 libdyld.dylib 0x0000000108754955 start + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)
Not render on Android from Uri , IOS work
Do I need to add any other props to parent views to enable scrub control?
Doesn't seem to be working with the following:
import React, { PureComponent } from "react";
import { View, StyleSheet, ActivityIndicator } from "react-native";
// Constants
import {
brightRowBackground,
skyBlueButtonBackground,
buttonTextColor,
darkRowBackground
} from "../../../utils/Colors";
// Packages
import WaveForm from "react-native-audiowaveform";
export default class Waveform extends PureComponent {
static defaultProps = {
isPlaying: false
};
constructor(props) {
super(props);
this.state = {
redrawWaveform: false
};
}
componentWillReceiveProps(props) {
if (props.inOutPanelExpanded !== this.props.inOutPanelExpanded) {
this.setState({ redrawWaveform: true }, () => this.setState({ redrawWaveform: false }));
}
}
render() {
if (!this.state.redrawWaveform) {
return (
<WaveForm
play={this.props.isPlaying}
source={require("../../../../assets/sounds/Audio.wav")}
waveFormStyle={{ waveColor: "white", scrubColor: "#B5FF00" }}
style={[styles.container, this.props.inOutPanelExpanded ? { height: 88 } : { height: 32 }]}
/>
);
} else {
return <View style={[styles.container, this.props.inOutPanelExpanded ? { height: 88 } : { height: 32 }]} />;
}
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: darkRowBackground
}
});
hey man-
this thing is great!
but i'm running into a couple of little issues w/ very short sounds
see the screen attached screenshot and mp3
the waveform does not fill the view and it's not resizing on device rotate
the scrubber sync is less of an issue for my application as i will be using the waveform just to set in and out points
Im using react-native: 0.42.0
react-native-cli: 2.0.1
it throws this error when I apply :-
<WaveForm source={{uri:'https://www......mp3'}} />
When using onPress an error is thrown (RSD).
Cannot read property 'props' of undefined
Example implementation;
<WaveForm source={{ uri: 'https://.....WW01.mp3' }} waveFormStyle={{waveColor:'red', scrubColor:'white'}} onPress={sender => console.log(
click ${sender})} > </WaveForm>
Wasn't sure what sender
was so included that for the sake of debugging.
I built a starter app using react-native init.
My react-native version is 0.46.1 and react-cli version is 2.0.1.
I added the library via yarn add react-native-audiowaveform
Then, I manually linked the library into the starter app using the instructions provided in the readme file.
I then changed the index.android.js file, here's the source of that file :-
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
import WaveForm from 'react-native-audiowaveform';
export default class WaveformApp extends Component {
render() {
return (
<View style={styles.container}>
<WaveForm
source={require('./a_fusion_in_raag_des.mp3')}
waveFormStyle={{waveColor:'red', scrubColor:'white'}}>
</WaveForm>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
AppRegistry.registerComponent('WaveformApp', () => WaveformApp);
After the building process is successfully completed, it shows this error screen as soon as the app is loaded:-
Please advise as to how to proceed, thank you.
Hi! Thanks for your plugin ๐
I've tried to make an example from your Readme:
import WaveForm from 'react-native-audiowaveform';
<WaveForm
source={require('./path/to/your/file.mp3')}
waveFormStyle={{waveColor:'red', scrubColor:'white'}}
>
</WaveForm>
But i've got:
Warning: Failed prop type: Invalid prop `waveFormStyle.waveColor` of type `number` supplied to `OGWave`, expected `string`.
in OGWave (created by WaveForm)
in WaveForm (created by Player)
in RCTView (created by View)
in View (created by Player)
in Player (created by CastsList)
in RCTView (created by View)
in View (created by CastsList)
in CastsList (created by App)
in App (created by CloudCast)
in CloudCast
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
What I have to do?
Hi, awesome lib! Is this support stop callback and play callback so that we can know when the audio is start playing and stoping? just like set play={false} when the audio is finished to play.
Hi, I am using the waveform component, but sometimes it takes a while to load the sound file and show up the waveform on view, I like to put a loading spinner before it is loaded, after it is loaded then turn off the spinner, so is there a loaded callback function where I can turn off the loading spinner? my code looks like this:
`
{audioFileURL.length!=0 && <WaveForm
style={styles.waveform}
onPress={this.changestate}
source={{uri: audioFileURL}}
stop={stopAudio}
play={playAudio}
autoPlay={true}
waveFormStyle={{ waveColor: "lightsteelblue", scrubColor: "white" }}
/>}
`
My react-native and reaxt-cli versions are 0.40.1 and 2.0.1 respectively.
The steps I followed to run the app were as follows:-
Example
directory.yarn
command to install all dependencies.react-native start
command.react-native run-android
command which began with building the app.I cloned the repo and moved into the Example
directory, installed all dependencies via yarn, started packager using react-native start
and then built the app using react-native run-android
.
The app built successfully but as soon as the app starts on the device it throws this exception :-
I then tried to fix this by navigating to react-native-audiowaveform directory inside the node_modules directory and define a propType for componentID
like this :-
const WaveForm = React.createClass({
propTypes: {
...View.propTypes,
componentID:React.PropTypes.string,
autoPlay:React.PropTypes.bool,
waveFormStyle:PropTypes.shape({
leftWaveColor: React.PropTypes.string,
rightWaveColor: React.PropTypes.string
}),
When I rebuilt the app, the exception changed to :-
Please advise about how to get this sample application up and running and what's wrong that's causing these issues. Thank you.
I'm facing this error:
{props.audio && (
<WaveForm
source={{uri: 'https://psv4.userapi.com/c852436//u338598380/audiomsg/d4/01f4598f0f.mp3'}}
waveFormStyle={{waveColor:'red', scrubColor:'white'}}
play={true}
>
</WaveForm>
)}
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},
"dependencies": {
"@expo/vector-icons": "^10.2.0",
"expo": "^35.0.0",
"expo-font": "~7.0.0",
"lottie-ios": "^3.0.3",
"lottie-react-native": "^3.0.2",
"native-base": "^2.13.8",
"react": "16.8.3",
"react-dom": "16.8.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
"react-native-audiowaveform": "^2.0.5",
"react-native-easy-grid": "^0.2.2",
"react-native-elements": "^2.0.2",
"react-native-gesture-handler": "^1.5.0",
"react-native-reanimated": "^1.4.0",
"react-native-screens": "^2.8.0",
"react-native-svg": "^9.13.3",
"react-native-web": "^0.11.7",
"react-native-webview": "^10.2.3",
"react-navigation": "^4.0.10",
"react-navigation-stack": "^1.10.3"
},```
Instead of generating waveform from a file, I aim to generate from device mic input.
How can I achieve this?
Hi,
I get this error on IOS:
Invariant Violation: requireNativeComponent: "OGWave" was not found in the UIManager.
After searching, #68 said that simply doing a cd ios && pod install
would work.
But when using expo there isn't any IOS folder where I can pod install
unless I eject
Please help
When I set mp3 file it works perfect.
But when source is aac file waves are displayed but can't play sound.
I am using react-native 0.46.1 which uses react 16.0.0-alpha12 and react-cli 2.0.1.
I have just added, manually linked and included the react-native-audiowaveform library into my app.
When the app starts it shows me some deprecations in yellow boxes at the bottom of my app.
Here's a screenshot regarding the same :-
Please upgrade the React API used for the library. Thank you
Hi,
I tried to install and link your module in my React Native App, it's compile and run successfully but when i use in my render, it doesn't show anything
Can you help me?
Thanks
It has been a while since a release on npm and there have been a number of fixes that would really benefit from being published in a new version.
When i view a 30 minute file, there is no visualization. I am guessing this is because the library is optimized for songs. Is there some easy way to make the sample rate dynamic?
HI, when I loaded my audio file from my local folder on real device, no wave form shown up, but if I load from require(), it works, the code is as following:
`
<WaveForm
style={styles.waveform}
onPress={this.changestate}
//source={require('../../../assets/videos/bachfugue.mp3')} . //works
source={{uri: "file://"+RNFetchBlob.fs.dirs.DCIMDir+ '/Camera/test.aac'}} // not work
//source={{uri: "file://"+RNFetchBlob.fs.dirs.DCIMDir+ '/Camera/cutVideo.mp3'}} // not work
stop={this.state.stopAudio}
play={this.state.playAudio}
autoPlay={true}
waveFormStyle={{ waveColor: "lightsteelblue", scrubColor: "white" }}
/>`
Please help!
idoor
I would love to use this library for some audio recordings, but when trying to use it with RN 0.61.2, it throws an error on the attempt to import <RCTViewManager.h>. Is there intention to support 0.61+? Also, can a podspec be written to make this a pod that can leverage Autolinking?
#import <React/RCTResizeMode.h>
this line failed in XCode when trying to compile. seems like the React library is not imported?
I can play audio file but I can't see the waveform at all.
Please help me!
@juananime
The library is not working anymore for newer RN versions. I was planning to use this on a production app but i am stuck on this since few days. Can you please check out whats the problem. I tried fixing the android code but so far no success.
<WaveForm
source={{uri:'http://abc.mp3'}}
play={true}
waveFormStyle={{waveColor:'red', scrubColor:'blue'}}
style={{ width: 500, height: 50 }}
/>
Add android libraries with same iOS functionality
Some files should be excluded from the npm package because they make it unnecessarily big:
Also, why is there an express app in this repo that seems irrelevant to the project?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.