react-native-track-player | fully fledged audio module created for music apps | Audio Utils library
kandi X-RAY | react-native-track-player Summary
Support
Quality
Security
License
Reuse
- Creates a media source .
- Updates the playback state .
- Returns the default capabilities .
- Get a Uri from a resource .
- Handle ID3 data .
- Called when audio focus has changed .
- Remove a single media source .
- Called when a position is discontinuous .
- Starts the service .
- Initialize Flipper
react-native-track-player Key Features
react-native-track-player Examples and Code Snippets
Trending Discussions on react-native-track-player
Trending Discussions on react-native-track-player
QUESTION
I am using react-native-track-player to create a music app. Can I customize the notification area, and lock screen player?
What I need to do is changing the background color and add custom theming to the notification area and lock screen play options. Can someone please let me know how to do it please?
Following is the code I have used to enable track player options. How can I modified it to do above tasks? Or is there any other method to perform customization. Thank you so much.
const setUpTrackPlayer = async () => {
try {
await TrackPlayer.setupPlayer();
await TrackPlayer.add(audioClipsArray);
await TrackPlayer.updateOptions({
stopWithApp: true,
capabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
Capability.Stop,
],
compactCapabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
],
notificationCapabilities: [
Capability.Play,
Capability.Pause,
Capability.SkipToNext,
Capability.SkipToPrevious,
],
});
} catch (e) {
console.log(e);
}
};
ANSWER
Answered 2022-Feb-09 at 21:26You cannot do it from javascript at least for now, because this module is not providing any methods to customize that. To do that you need to change native files in order to get make it customized. You can also take a look at https://github.com/invertase/notifee and see if you can make it work together with track player.
QUESTION
I am using ReactNative version 0.62.2 and when i try to run the application using the command
react-native run-android
the build gets failed with the following error message
Could not determine the dependencies of task ':app:mergeDebugAssets'.
> Could not resolve all task dependencies for configuration ':app:debugRuntimeClasspath'.
> Could not resolve com.facebook.react:react-native:+.
Required by:
project :app
project :app > project :react-native-fs
project :app > project :react-native-community_async-storage
project :app > project :react-native-community_datetimepicker
project :app > project :react-native-community_slider
project :app > project :react-native-firebase_analytics
project :app > project :react-native-firebase_app
project :app > project :react-native-firebase_storage
project :app > project :react-native-audio
project :app > project :react-native-document-picker
project :app > project :react-native-file-selector
project :app > project :react-native-get-random-values
project :app > project :react-native-image-crop-picker
project :app > project :react-native-navigation
project :app > project :react-native-scan-barcode
project :app > project :react-native-track-player
project :app > project :react-native-vector-icons
project :app > project :react-native-video
> Failed to list versions for com.facebook.react:react-native.
> Unable to load Maven meta-data from http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml.
> Could not get resource 'http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml'.
> Could not GET 'http://dl.bintray.com/lukaville/maven/com/facebook/react/react-native/maven-metadata.xml'. Received status code 502 from server: Bad Gateway
Not sure why it fails now because earlier it builds properly
Build.gradle
buildscript {
ext {
RNNKotlinVersion = "1.3.61"
buildToolsVersion = "28.0.3"
minSdkVersion = 19
compileSdkVersion = 28
targetSdkVersion = 28
RNNKotlinStdlib = "kotlin-stdlib-jdk8"
}
repositories {
google()
jcenter()
mavenLocal()
mavenCentral()
}
dependencies {
classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:1.3.61"
classpath("com.android.tools.build:gradle:3.5.2")
classpath 'com.google.gms:google-services:4.3.3'
// NOTE: Do not place your application dependencies here; they belong
// in the individual module build.gradle files
}
}
ANSWER
Answered 2021-Dec-26 at 08:42Bintray service is down and the only way to fix this is to migrate to React Native 0.65, where this repo is no longer used.
QUESTION
For the past 1.5 days or so, I tried to get react-native-track-player working and I just can't make it happen. No matter what I try I always end up running into the same error block:
ERROR TypeError: null is not an object (evaluating 'TrackPlayer.RATING_HEART')
ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect.
This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.
I set it up both with react-native expo
and 'normal' react-native
(according to react-native docu) both with JS
and TS
. And for all variants of that I tried:
- Deleting/reinstalling node-modules
npm cache verify
(as described here),react-native start --reset-cache
(from here) and some other cache reset/deletion things.- I've copied the example from their GitHub repo.
- I updated and/or reinstalled pretty much every library (incl.
node
)
All of those efforts ended in the exact same error.
So ye, I literally don't know what to do anymore. I'm a beginner at both react-native and app dev in general. So to be honest, it's very likely the mistake I'm making is super stupid/simple. But I just can't find it. I would be more than grateful for any advise.
EDIT 2: Solution - react-native
removed jcenter
between v0.64
v0.65
which was root of all my problems, check my answer below for details.
ANSWER
Answered 2021-Sep-12 at 12:05Unfortunately by Looking the Documentation of react-native-track-player , This package doesn't support expo Expo and Expokit support
How I manage to run the Example Project from Package Steps:Cloned react-native-track-player
add package in dependencies
"react-native-track-player": "^2.0.1",
yarn install
ornpm install
yarn android
ornpm run android
QUESTION
I'm developing a react-native application which plays both audio and video files. So I'm using two javascript dependencies: react-native-track-player
and react-native-video
.
Individually, they work fine. Together though...
07-23 09:41:24.052 24644 24644 E AndroidRuntime: FATAL EXCEPTION: main
07-23 09:41:24.052 24644 24644 E AndroidRuntime: Process: com.myapp, PID: 24644
07-23 09:41:24.052 24644 24644 E AndroidRuntime: java.lang.NoSuchMethodError: No virtual method setAudioAttributes(Lcom/google/android/exoplayer2/audio/AudioAttributes;)V in class Lcom/google/android/exoplayer2/SimpleExoPlayer; or its super classes (declaration of 'com.google.android.exoplayer2.SimpleExoPlayer' appears in /data/app/~~JZaWLKING3kOoM2Xhy3b8g==/com.myapp-ZiTzxTcb_NCKba7M-tUmIw==/base.apk!classes2.dex)
After some research, it seems to come from a version mismatch, as they both rely on exoplayer
.
react-native-video
:
dependencies {
implementation('com.google.android.exoplayer:exoplayer:2.13.2') {
exclude group: 'com.android.support'
}
}
react-native-track-player
:
def safeExtGet(prop, fallback) {
rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback
}
dependencies {
def exoPlayerVersion = safeExtGet("exoPlayerVersion", '2.11.4')
implementation "com.google.android.exoplayer:exoplayer-core:${exoPlayerVersion}"
}
react-native-track-player
seems to fall back to 2.11.4
: if I hard-code the version number instead of calling safeExtGet
, I can observe the same crash.
The weird thing is that there are no errors (or warnings!) at build time. When looking at the react-native-track-player
android code using Android Studio, setAudioAttributes
is a valid method (at least no errors are reported by the IDE).
My questions are:
- Is it possible to have two different versions of a same library coexist, and have the Java code being properly linked to whichever version is used in the library? (in this case:
exoplayer
) - If it is possible, could the behavior I'm observing come from some settings in these projects'
build.gradle
files? - If it's not possible, what's the default behavior? "Keep the higher version silently"?
Thanks in advance.
ANSWER
Answered 2021-Jul-23 at 09:19After discussing the issue with some people, it appears that it's impossible to have two different versions of a same library. It seems to be a limitation of the JVM, with Maven, Gradle, and Sbt all having different behaviors when confronted with the issue.
What most surprises me is that Gradle silently override the lower-version dependency with the higher one without notifying me, which results in a different runtime API, and thus crashes.
I fixed the issue by bumping my react-native-track-player
exoplayer
dependency version to 2.13.2
, and just had to do minor changes in the source code.
QUESTION
This is the functional component sample that I want to use.
How to convert this into class component?
import React, { useEffect } from "react";
import { StyleSheet, Text, View } from "react-native";
import TrackPlayer from "react-native-track-player";
import Player from "../components/Player";
import playlistData from "../data/playlist.json";
import localTrack from "../resources/pure.m4a";
export default function LandingScreen() {
const playbackState = TrackPlayer.usePlaybackState();
useEffect(() => {
TrackPlayer.setupPlayer();
TrackPlayer.updateOptions({
stopWithApp: false,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
TrackPlayer.CAPABILITY_STOP
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE
]
});
}, []);
async function togglePlayback() {
const currentTrack = await TrackPlayer.getCurrentTrack();
if (currentTrack == null) {
await TrackPlayer.reset();
await TrackPlayer.add(playlistData);
await TrackPlayer.add({
id: "local-track",
url: localTrack,
title: "Pure (Demo)",
artist: "David Chavez",
artwork: "https://picsum.photos/200"
});
await TrackPlayer.play();
} else {
if (playbackState === TrackPlayer.STATE_PAUSED) {
await TrackPlayer.play();
} else {
await TrackPlayer.pause();
}
}
}
return (
We'll be inserting a playlist into the library loaded from
`playlist.json`. We'll also be using the `ProgressComponent` which
allows us to track playback time.
{getStateName(playbackState)}
);
}
LandingScreen.navigationOptions = {
title: "Playlist Example"
};
function getStateName(state) {
switch (state) {
case TrackPlayer.STATE_NONE:
return "None";
case TrackPlayer.STATE_PLAYING:
return "Playing";
case TrackPlayer.STATE_PAUSED:
return "Paused";
case TrackPlayer.STATE_STOPPED:
return "Stopped";
case TrackPlayer.STATE_BUFFERING:
return "Buffering";
}
}
async function skipToNext() {
try {
await TrackPlayer.skipToNext();
} catch (_) {}
}
async function skipToPrevious() {
try {
await TrackPlayer.skipToPrevious();
} catch (_) {}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
backgroundColor: "#F5FCFF"
},
description: {
width: "80%",
marginTop: 20,
textAlign: "center"
},
player: {
marginTop: 40
},
state: {
marginTop: 20
}
});
I tried as following. But it gives me error.
import React, { Component, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Player from './Player'
import TrackPlayer from 'react-native-track-player';
// const playbackState = TrackPlayer.usePlaybackState(); // I don't know how to manage this.
export default class MusicPlayer extends Component {
constructor(props) {
super(props);
this.state = {
full: true,
clicked: '',
};
}
componentWillMount() {
TrackPlayer.setupPlayer();
TrackPlayer.updateOptions({
stopWithApp: false,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
TrackPlayer.CAPABILITY_STOP
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE
]
});
}
async togglePlayback() {
const currentTrack = await TrackPlayer.getCurrentTrack();
if (currentTrack == null) {
await TrackPlayer.reset();
await TrackPlayer.add(playlistData);
await TrackPlayer.add({
id: "local-track",
url: 'http://192.168.22.27:8000/' + this.props.navigation.getParam('clickedSource'),
title: "Pure (Demo)",
artist: "David Chavez",
artwork: "https://picsum.photos/200"
});
await TrackPlayer.play();
} else {
if (playbackState === TrackPlayer.STATE_PAUSED) {
await TrackPlayer.play();
} else {
await TrackPlayer.pause();
}
}
}
async skipToNext() {
try {
await TrackPlayer.skipToNext();
} catch (_) { }
}
async skipToPrevious() {
try {
await TrackPlayer.skipToPrevious();
} catch (_) { }
}
render() {
return (
this.skipToNext()}
style={styles.player}
onPrevious={()=>this.skipToPrevious()}
onTogglePlayback={()=>this.togglePlayback()}
/>
);
}
}
const styles = StyleSheet.create({
player: {
marginTop: 40
},
});
How can I convert this into class component?
ANSWER
Answered 2020-Apr-22 at 07:41usePlaybackState
is a react hook, but it appears there exists a getState function that returns a promise. You don't want to store this state object as it likely will become stale very fast, so no need to use this.playbackState
at all. You'll just need to await it each time you need to access the current player state.
const playbackState = await TrackPlayer.getState(); // <-- get player state
if (playbackState === TrackPlayer.STATE_PAUSED) {
await TrackPlayer.play();
} else {
await TrackPlayer.pause();
}
Full code
import React, { Component, useEffect } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Dimensions, Image, AsyncStorage } from 'react-native';
import Icon from 'react-native-vector-icons/AntDesign';
import Player from './Player'
import TrackPlayer from 'react-native-track-player';
export default class MusicPlayer extends Component {
constructor(props) {
super(props);
this.state = {
full: true,
clicked: '',
};
}
componentWillMount() {
TrackPlayer.setupPlayer();
TrackPlayer.updateOptions({
stopWithApp: false,
capabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE,
TrackPlayer.CAPABILITY_SKIP_TO_NEXT,
TrackPlayer.CAPABILITY_SKIP_TO_PREVIOUS,
TrackPlayer.CAPABILITY_STOP
],
compactCapabilities: [
TrackPlayer.CAPABILITY_PLAY,
TrackPlayer.CAPABILITY_PAUSE
]
});
}
async togglePlayback() {
const currentTrack = await TrackPlayer.getCurrentTrack();
if (currentTrack == null) {
await TrackPlayer.reset();
await TrackPlayer.add(playlistData);
await TrackPlayer.add({
id: "local-track",
url: 'http://192.168.22.27:8000/' + this.props.navigation.getParam('clickedSource'),
title: "Pure (Demo)",
artist: "David Chavez",
artwork: "https://picsum.photos/200"
});
await TrackPlayer.play();
} else {
const playbackState = await TrackPlayer.getState(); // <-- get player state
if (playbackState === TrackPlayer.STATE_PAUSED) {
await TrackPlayer.play();
} else {
await TrackPlayer.pause();
}
}
}
async skipToNext() {
try {
await TrackPlayer.skipToNext();
} catch (_) { }
}
async skipToPrevious() {
try {
await TrackPlayer.skipToPrevious();
} catch (_) { }
}
render() {
return (
this.skipToNext()}
style={styles.player}
onPrevious={()=>this.skipToPrevious()}
onTogglePlayback={()=>this.togglePlayback()}
/>
);
}
}
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install react-native-track-player
You can use react-native-track-player like any standard Java library. Please include the the jar files in your classpath. You can also use any IDE and you can run and debug the react-native-track-player component as you would do with any other Java program. Best practice is to use a build tool that supports dependency management such as Maven or Gradle. For Maven installation, please refer maven.apache.org. For Gradle installation, please refer gradle.org .
Support
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesExplore Kits - Develop, implement, customize Projects, Custom Functions and Applications with kandi kits
Save this library and start creating your kit
Share this Page