diff --git a/404.html b/404.html index eb0a94fa1..077a8dfdb 100644 --- a/404.html +++ b/404.html @@ -5,13 +5,13 @@ Page Not Found | React Native Track Player - +
Skip to main content

Page Not Found

We could not find what you were looking for.

Please contact the owner of the site that linked you to the original URL and let them know their link is broken.

- + \ No newline at end of file diff --git a/assets/js/4a97e2ba.994439b2.js b/assets/js/4a97e2ba.8908d7fa.js similarity index 75% rename from assets/js/4a97e2ba.994439b2.js rename to assets/js/4a97e2ba.8908d7fa.js index dc622eded..d73a69ba7 100644 --- a/assets/js/4a97e2ba.994439b2.js +++ b/assets/js/4a97e2ba.8908d7fa.js @@ -1 +1 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3054],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return k}});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=n.createContext({}),c=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=c(a),k=r,y=d["".concat(s,".").concat(k)]||d[k]||u[k]||o;return a?n.createElement(y,i(i({ref:t},p),{},{components:a})):n.createElement(y,i({ref:t},p))}));function k(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c require('./service'));\n")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},'// service.js\nmodule.exports = async function() {\n // This service needs to be registered for the module to work\n // but it will be used later in the "Receiving Events" section\n}\n')),(0,o.kt)("p",null,"Then, you need to set up the player. This usually takes less than a second:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import TrackPlayer from 'react-native-track-player';\n\nawait TrackPlayer.setupPlayer()\n// The player is ready to be used\n")),(0,o.kt)("p",null,"Make sure the setup method has completed before interacting with any other functions in ",(0,o.kt)("inlineCode",{parentName:"p"},"TrackPlayer")," in order to avoid instability."),(0,o.kt)("h2",{id:"controlling-the-player"},"Controlling the Player"),(0,o.kt)("h3",{id:"adding-tracks-to-the-playback-queue"},"Adding Tracks to the Playback Queue"),(0,o.kt)("p",null,"You can add a track to the player using a url or by requiring a file in the app\nbundle or on the file system."),(0,o.kt)("p",null,"First of all, you need to create a ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"track object"),", which\nis a plain javascript object with a number of properties describing the track.\nThen add the track to the queue:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"var track1 = {\n url: 'http://example.com/avaritia.mp3', // Load media from the network\n title: 'Avaritia',\n artist: 'deadmau5',\n album: 'while(1<2)',\n genre: 'Progressive House, Electro House',\n date: '2014-05-20T07:00:00+00:00', // RFC 3339\n artwork: 'http://example.com/cover.png', // Load artwork from the network\n duration: 402 // Duration in seconds\n};\n\nconst track2 = {\n url: require('./coelacanth.ogg'), // Load media from the app bundle\n title: 'Coelacanth I',\n artist: 'deadmau5',\n artwork: require('./cover.jpg'), // Load artwork from the app bundle\n duration: 166\n};\n\nconst track3 = {\n url: 'file:///storage/sdcard0/Downloads/artwork.png', // Load media from the file system\n title: 'Ice Age',\n artist: 'deadmau5',\n // Load artwork from the file system:\n artwork: 'file:///storage/sdcard0/Downloads/cover.png',\n duration: 411\n};\n\n// You can then [add](https://rntp.dev/docs/api/functions/queue#addtracks-insertbeforeindex) the items to the queue\nawait TrackPlayer.add([track1, track2, track3]);\n")),(0,o.kt)("h3",{id:"player-information"},"Player Information"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"\nimport TrackPlayer, { State } from 'react-native-track-player';\n\nconst state = await TrackPlayer.getState();\nif (state === State.Playing) {\n console.log('The player is playing');\n};\n\nlet trackIndex = await TrackPlayer.getCurrentTrack();\nlet trackObject = await TrackPlayer.getTrack(trackIndex);\nconsole.log(`Title: ${trackObject.title}`);\n\nconst position = await TrackPlayer.getPosition();\nconst duration = await TrackPlayer.getDuration();\nconsole.log(`${duration - position} seconds left.`);\n")),(0,o.kt)("h3",{id:"changing-playback-state"},"Changing Playback State"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"TrackPlayer.play();\nTrackPlayer.pause();\nTrackPlayer.reset();\n\n// Seek to 12.5 seconds:\nTrackPlayer.seekTo(12.5);\n\n// Set volume to 50%:\nTrackPlayer.setVolume(0.5);\n")),(0,o.kt)("h3",{id:"controlling-the-queue"},"Controlling the Queue"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"// Skip to a specific track index:\nawait TrackPlayer.skip(trackIndex);\n\n// Skip to the next track in the queue:\nawait TrackPlayer.skipToNext();\n\n// Skip to the previous track in the queue:\nawait TrackPlayer.skipToPrevious();\n\n// Remove two tracks from the queue:\nawait TrackPlayer.remove([trackIndex1, trackIndex2]);\n\n// Retrieve the track objects in the queue:\nconst tracks = await TrackPlayer.getQueue();\nconsole.log(`First title: ${tracks[0].title}`);\n")),(0,o.kt)("h4",{id:"playback-events"},"Playback Events"),(0,o.kt)("p",null,"You can subscribe to ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/events#player"},"player events"),", which describe the\nchanging nature of the playback state. For example, subscribe to the\n",(0,o.kt)("inlineCode",{parentName:"p"},"Event.PlaybackTrackChanged")," event to be notified when the track has changed or\nsubscribe to the ",(0,o.kt)("inlineCode",{parentName:"p"},"Event.PlaybackState")," event to be notified when the player\nbuffers, plays, pauses and stops."),(0,o.kt)("h4",{id:"example"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import TrackPlayer, { Event } from 'react-native-track-player';\n\nconst PlayerInfo = () => {\n const [trackTitle, setTrackTitle] = useState();\n\n // do initial setup, set initial trackTitle..\n\n useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {\n if (event.type === Event.PlaybackTrackChanged && event.nextTrack != null) {\n const track = await TrackPlayer.getTrack(event.nextTrack);\n const {title} = track || {};\n setTrackTitle(title);\n }\n });\n\n return (\n {trackTitle}\n );\n}\n")),(0,o.kt)("h2",{id:"progress-updates"},"Progress Updates"),(0,o.kt)("p",null,"Music apps often need an automated way to show the progress of a playing track.\nFor this purpose, we created ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/hooks"},"the hook: ",(0,o.kt)("inlineCode",{parentName:"a"},"useProgress"))," which\nupdates itself automatically."),(0,o.kt)("h4",{id:"example-1"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import TrackPlayer, { useProgress } from 'react-native-track-player';\n\nconst MyPlayerBar = () => {\n const progress = useProgress();\n\n return (\n // Note: formatTime and ProgressBar are just examples:\n \n {formatTime(progress.position)}\n \n \n );\n\n}\n")),(0,o.kt)("h2",{id:"track-player-options"},"Track Player Options"),(0,o.kt)("p",null,"Track Player can be configured using a number of options. Some of these options\npertain to the media controls available in the lockscreen / notification and how\nthey behave, others describe the availability of capabilities needed for\nplatform specific functionalities like Android Auto."),(0,o.kt)("p",null,"You can change options multiple times. You do not need to specify all the\noptions, just the ones you want to change."),(0,o.kt)("p",null,"For more information about the properties you can set, ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/functions/player#updateoptionsoptions"},"check the\ndocumentation"),"."),(0,o.kt)("h4",{id:"example-2"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import TrackPlayer, { Capability } from 'react-native-track-player';\n\nTrackPlayer.updateOptions({\n // Media controls capabilities\n capabilities: [\n Capability.Play,\n Capability.Pause,\n Capability.SkipToNext,\n Capability.SkipToPrevious,\n Capability.Stop,\n ],\n\n // Capabilities that will show up when the notification is in the compact form on Android\n compactCapabilities: [Capability.Play, Capability.Pause],\n\n // Icons for the notification on Android (if you don't like the default ones)\n playIcon: require('./play-icon.png'),\n pauseIcon: require('./pause-icon.png'),\n stopIcon: require('./stop-icon.png'),\n previousIcon: require('./previous-icon.png'),\n nextIcon: require('./next-icon.png'),\n icon: require('./notification-icon.png')\n});\n")))}k.isMDXComponent=!0}}]); \ No newline at end of file +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[3054],{3905:function(e,t,a){a.d(t,{Zo:function(){return p},kt:function(){return k}});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function o(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function i(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var s=n.createContext({}),c=function(e){var t=n.useContext(s),a=t;return e&&(a="function"==typeof e?e(t):i(i({},t),e)),a},p=function(e){var t=c(e.components);return n.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,o=e.originalType,s=e.parentName,p=l(e,["components","mdxType","originalType","parentName"]),d=c(a),k=r,y=d["".concat(s,".").concat(k)]||d[k]||u[k]||o;return a?n.createElement(y,i(i({ref:t},p),{},{components:a})):n.createElement(y,i({ref:t},p))}));function k(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=a.length,i=new Array(o);i[0]=d;var l={};for(var s in t)hasOwnProperty.call(t,s)&&(l[s]=t[s]);l.originalType=e,l.mdxType="string"==typeof e?e:r,i[1]=l;for(var c=2;c require('./service'));\n")),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},'// service.js\nmodule.exports = async function() {\n // This service needs to be registered for the module to work\n // but it will be used later in the "Receiving Events" section\n}\n')),(0,o.kt)("p",null,"Then, you need to set up the player. This usually takes less than a second:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import TrackPlayer from 'react-native-track-player';\n\nawait TrackPlayer.setupPlayer()\n// The player is ready to be used\n")),(0,o.kt)("p",null,"Make sure the setup method has completed before interacting with any other functions in ",(0,o.kt)("inlineCode",{parentName:"p"},"TrackPlayer")," in order to avoid instability."),(0,o.kt)("h2",{id:"controlling-the-player"},"Controlling the Player"),(0,o.kt)("h3",{id:"adding-tracks-to-the-playback-queue"},"Adding Tracks to the Playback Queue"),(0,o.kt)("p",null,"You can add a track to the player using a url or by requiring a file in the app\nbundle or on the file system."),(0,o.kt)("p",null,"First of all, you need to create a ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"track object"),", which\nis a plain javascript object with a number of properties describing the track.\nThen add the track to the queue:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"var track1 = {\n url: 'http://example.com/avaritia.mp3', // Load media from the network\n title: 'Avaritia',\n artist: 'deadmau5',\n album: 'while(1<2)',\n genre: 'Progressive House, Electro House',\n date: '2014-05-20T07:00:00+00:00', // RFC 3339\n artwork: 'http://example.com/cover.png', // Load artwork from the network\n duration: 402 // Duration in seconds\n};\n\nconst track2 = {\n url: require('./coelacanth.ogg'), // Load media from the app bundle\n title: 'Coelacanth I',\n artist: 'deadmau5',\n artwork: require('./cover.jpg'), // Load artwork from the app bundle\n duration: 166\n};\n\nconst track3 = {\n url: 'file:///storage/sdcard0/Downloads/artwork.png', // Load media from the file system\n title: 'Ice Age',\n artist: 'deadmau5',\n // Load artwork from the file system:\n artwork: 'file:///storage/sdcard0/Downloads/cover.png',\n duration: 411\n};\n\n// You can then [add](https://rntp.dev/docs/api/functions/queue#addtracks-insertbeforeindex) the items to the queue\nawait TrackPlayer.add([track1, track2, track3]);\n")),(0,o.kt)("h3",{id:"player-information"},"Player Information"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"\nimport TrackPlayer, { State } from 'react-native-track-player';\n\nconst state = await TrackPlayer.getState();\nif (state === State.Playing) {\n console.log('The player is playing');\n};\n\nlet trackIndex = await TrackPlayer.getCurrentTrack();\nlet trackObject = await TrackPlayer.getTrack(trackIndex);\nconsole.log(`Title: ${trackObject.title}`);\n\nconst position = await TrackPlayer.getPosition();\nconst duration = await TrackPlayer.getDuration();\nconsole.log(`${duration - position} seconds left.`);\n")),(0,o.kt)("h3",{id:"changing-playback-state"},"Changing Playback State"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"TrackPlayer.play();\nTrackPlayer.pause();\nTrackPlayer.reset();\n\n// Seek to 12.5 seconds:\nTrackPlayer.seekTo(12.5);\n\n// Set volume to 50%:\nTrackPlayer.setVolume(0.5);\n")),(0,o.kt)("h3",{id:"controlling-the-queue"},"Controlling the Queue"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"// Skip to a specific track index:\nawait TrackPlayer.skip(trackIndex);\n\n// Skip to the next track in the queue:\nawait TrackPlayer.skipToNext();\n\n// Skip to the previous track in the queue:\nawait TrackPlayer.skipToPrevious();\n\n// Remove two tracks from the queue:\nawait TrackPlayer.remove([trackIndex1, trackIndex2]);\n\n// Retrieve the track objects in the queue:\nconst tracks = await TrackPlayer.getQueue();\nconsole.log(`First title: ${tracks[0].title}`);\n")),(0,o.kt)("h4",{id:"playback-events"},"Playback Events"),(0,o.kt)("p",null,"You can subscribe to ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/events#player"},"player events"),", which describe the\nchanging nature of the playback state. For example, subscribe to the\n",(0,o.kt)("inlineCode",{parentName:"p"},"Event.PlaybackTrackChanged")," event to be notified when the track has changed or\nsubscribe to the ",(0,o.kt)("inlineCode",{parentName:"p"},"Event.PlaybackState")," event to be notified when the player\nbuffers, plays, pauses and stops."),(0,o.kt)("h4",{id:"example"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import TrackPlayer, { Event } from 'react-native-track-player';\n\nconst PlayerInfo = () => {\n const [trackTitle, setTrackTitle] = useState();\n\n // do initial setup, set initial trackTitle..\n\n useTrackPlayerEvents([Event.PlaybackActiveTrackChanged], async event => {\n if (event.type === Event.PlaybackActiveTrackChanged && event.track != null) {\n const {title} = event.track || {};\n setTrackTitle(title);\n }\n });\n\n return (\n {trackTitle}\n );\n}\n")),(0,o.kt)("h2",{id:"progress-updates"},"Progress Updates"),(0,o.kt)("p",null,"Music apps often need an automated way to show the progress of a playing track.\nFor this purpose, we created ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/hooks"},"the hook: ",(0,o.kt)("inlineCode",{parentName:"a"},"useProgress"))," which\nupdates itself automatically."),(0,o.kt)("h4",{id:"example-1"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-tsx"},"import TrackPlayer, { useProgress } from 'react-native-track-player';\n\nconst MyPlayerBar = () => {\n const progress = useProgress();\n\n return (\n // Note: formatTime and ProgressBar are just examples:\n \n {formatTime(progress.position)}\n \n \n );\n\n}\n")),(0,o.kt)("h2",{id:"track-player-options"},"Track Player Options"),(0,o.kt)("p",null,"Track Player can be configured using a number of options. Some of these options\npertain to the media controls available in the lockscreen / notification and how\nthey behave, others describe the availability of capabilities needed for\nplatform specific functionalities like Android Auto."),(0,o.kt)("p",null,"You can change options multiple times. You do not need to specify all the\noptions, just the ones you want to change."),(0,o.kt)("p",null,"For more information about the properties you can set, ",(0,o.kt)("a",{parentName:"p",href:"/docs/next/api/functions/player#updateoptionsoptions"},"check the\ndocumentation"),"."),(0,o.kt)("h4",{id:"example-2"},"Example"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-ts"},"import TrackPlayer, { Capability } from 'react-native-track-player';\n\nTrackPlayer.updateOptions({\n // Media controls capabilities\n capabilities: [\n Capability.Play,\n Capability.Pause,\n Capability.SkipToNext,\n Capability.SkipToPrevious,\n Capability.Stop,\n ],\n\n // Capabilities that will show up when the notification is in the compact form on Android\n compactCapabilities: [Capability.Play, Capability.Pause],\n\n // Icons for the notification on Android (if you don't like the default ones)\n playIcon: require('./play-icon.png'),\n pauseIcon: require('./pause-icon.png'),\n stopIcon: require('./stop-icon.png'),\n previousIcon: require('./previous-icon.png'),\n nextIcon: require('./next-icon.png'),\n icon: require('./notification-icon.png')\n});\n")))}k.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/761b8908.2ecb9c21.js b/assets/js/761b8908.2ecb9c21.js new file mode 100644 index 000000000..92955a13b --- /dev/null +++ b/assets/js/761b8908.2ecb9c21.js @@ -0,0 +1 @@ +"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[398],{3905:function(e,t,a){a.d(t,{Zo:function(){return k},kt:function(){return c}});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var d=n.createContext({}),p=function(e){var t=n.useContext(d),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},k=function(e){var t=p(e.components);return n.createElement(d.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,i=e.originalType,d=e.parentName,k=o(e,["components","mdxType","originalType","parentName"]),m=p(a),c=r,s=m["".concat(d,".").concat(c)]||m[c]||u[c]||i;return a?n.createElement(s,l(l({ref:t},k),{},{components:a})):n.createElement(s,l({ref:t},k))}));function c(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=a.length,l=new Array(i);l[0]=m;var o={};for(var d in t)hasOwnProperty.call(t,d)&&(o[d]=t[d]);o.originalType=e,o.mdxType="string"==typeof e?e:r,l[1]=o;for(var p=2;padd(tracks, insertBeforeIndex)",id:"addtracks-insertbeforeindex",level:2},{value:"remove(indexes)",id:"removeindexes",level:2},{value:"setQueue(tracks)",id:"setqueuetracks",level:2},{value:"load(track)",id:"loadtrack",level:2},{value:"skip(index, initialPosition)",id:"skipindex-initialposition",level:2},{value:"skipToNext(initialPosition)",id:"skiptonextinitialposition",level:2},{value:"skipToPrevious(initialPosition)",id:"skiptopreviousinitialposition",level:2},{value:"move(fromIndex, toIndex)",id:"movefromindex-toindex",level:2},{value:"reset()",id:"reset",level:2},{value:"getTrack(index)",id:"gettrackindex",level:2},{value:"getActiveTrack()",id:"getactivetrack",level:2},{value:"getActiveTrackIndex()",id:"getactivetrackindex",level:2},{value:"getQueue()",id:"getqueue",level:2},{value:"removeUpcomingTracks()",id:"removeupcomingtracks",level:2},{value:"updateMetadataForTrack(index, metadata)",id:"updatemetadatafortrackindex-metadata",level:2},{value:"setRepeatMode(mode)",id:"setrepeatmodemode",level:2},{value:"getRepeatMode()",id:"getrepeatmode",level:2},{value:"\u26a0\ufe0f getCurrentTrack()",id:"\ufe0f-getcurrenttrack",level:2}],m={toc:u};function c(e){var t=e.components,a=(0,r.Z)(e,l);return(0,i.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"queue"},"Queue"),(0,i.kt)("h2",{id:"addtracks-insertbeforeindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"add(tracks, insertBeforeIndex)")),(0,i.kt)("p",null,"Adds one or more tracks to the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")," - The promise resolves with the first\nadded track index. If no tracks were added it returns ",(0,i.kt)("inlineCode",{parentName:"p"},"void"),"."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"tracks"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track \\| Track[]")),(0,i.kt)("td",{parentName:"tr",align:null},"The ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," objects that will be added")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"insertBeforeIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The index of the track that will be located immediately after the inserted tracks. Set it to ",(0,i.kt)("inlineCode",{parentName:"td"},"null")," to add it at the end of the queue")))),(0,i.kt)("h2",{id:"removeindexes"},(0,i.kt)("inlineCode",{parentName:"h2"},"remove(indexes)")),(0,i.kt)("p",null,"Removes one or more tracks from the queue by indexes. If the current track is removed, the next track will activated. If the current track was the last track in the queue, the first track will be activated."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"indexes"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number \\| number[]")),(0,i.kt)("td",{parentName:"tr",align:null},"The index or indices of tracks in the queue that will be removed")))),(0,i.kt)("h2",{id:"setqueuetracks"},(0,i.kt)("inlineCode",{parentName:"h2"},"setQueue(tracks)")),(0,i.kt)("p",null,"Clears the current queue and adds the supplied tracks to the now empty queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"tracks"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track[]")),(0,i.kt)("td",{parentName:"tr",align:null},"An array of ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," to replace the current queue with.")))),(0,i.kt)("h2",{id:"loadtrack"},(0,i.kt)("inlineCode",{parentName:"h2"},"load(track)")),(0,i.kt)("p",null,"Replaces the current track with the supplied track or creates a track when the queue is empty."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"track"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track")),(0,i.kt)("td",{parentName:"tr",align:null},"The ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," object that will be loaded")))),(0,i.kt)("h2",{id:"skipindex-initialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skip(index, initialPosition)")),(0,i.kt)("p",null,"Skips to a track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"skiptonextinitialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skipToNext(initialPosition)")),(0,i.kt)("p",null,"Skips to the next track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"skiptopreviousinitialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skipToPrevious(initialPosition)")),(0,i.kt)("p",null,"Skips to the previous track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"movefromindex-toindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"move(fromIndex, toIndex)")),(0,i.kt)("p",null,"Moves a track from the specified index to another."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"fromIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The index of the track you'd like to move.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"toIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The position you'd like to move the track to.")))),(0,i.kt)("h2",{id:"reset"},(0,i.kt)("inlineCode",{parentName:"h2"},"reset()")),(0,i.kt)("p",null,"Resets the player stopping the current track and clearing the queue."),(0,i.kt)("h2",{id:"gettrackindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"getTrack(index)")),(0,i.kt)("p",null,"Gets a track object from the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track"),(0,i.kt)("inlineCode",{parentName:"p"},">")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")))),(0,i.kt)("h2",{id:"getactivetrack"},(0,i.kt)("inlineCode",{parentName:"h2"},"getActiveTrack()")),(0,i.kt)("p",null,"Gets the active track object."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track"),(0,i.kt)("inlineCode",{parentName:"p"}," | undefined>")),(0,i.kt)("h2",{id:"getactivetrackindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"getActiveTrackIndex()")),(0,i.kt)("p",null,"Gets the index of the current track, or ",(0,i.kt)("inlineCode",{parentName:"p"},"undefined")," if no track loaded"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("h2",{id:"getqueue"},(0,i.kt)("inlineCode",{parentName:"h2"},"getQueue()")),(0,i.kt)("p",null,"Gets the whole queue"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track[]"),(0,i.kt)("inlineCode",{parentName:"p"},">")),(0,i.kt)("h2",{id:"removeupcomingtracks"},(0,i.kt)("inlineCode",{parentName:"h2"},"removeUpcomingTracks()")),(0,i.kt)("p",null,"Clears any upcoming tracks from the queue."),(0,i.kt)("h2",{id:"updatemetadatafortrackindex-metadata"},(0,i.kt)("inlineCode",{parentName:"h2"},"updateMetadataForTrack(index, metadata)")),(0,i.kt)("p",null,"Updates the metadata of a track in the queue.\nIf the current track is updated, the notification and the Now Playing Center will be updated accordingly."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"metadata"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"object")),(0,i.kt)("td",{parentName:"tr",align:null},"A subset of the ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track Object")," with only the ",(0,i.kt)("inlineCode",{parentName:"td"},"artwork"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"title"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"artist"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"album"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"description"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"genre"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"date"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"rating")," and ",(0,i.kt)("inlineCode",{parentName:"td"},"duration")," properties.")))),(0,i.kt)("h2",{id:"setrepeatmodemode"},(0,i.kt)("inlineCode",{parentName:"h2"},"setRepeatMode(mode)")),(0,i.kt)("p",null,"Sets the repeat mode."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"mode"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/constants/repeat-mode"},"Repeat Mode")),(0,i.kt)("td",{parentName:"tr",align:null},"The repeat mode")))),(0,i.kt)("h2",{id:"getrepeatmode"},(0,i.kt)("inlineCode",{parentName:"h2"},"getRepeatMode()")),(0,i.kt)("p",null,"Gets the repeat mode."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/constants/repeat-mode"},"Repeat Mode")),(0,i.kt)("h2",{id:"\ufe0f-getcurrenttrack"},"\u26a0\ufe0f ",(0,i.kt)("inlineCode",{parentName:"h2"},"getCurrentTrack()")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u26a0\ufe0f Deprecated:")," To get the active track index use\n",(0,i.kt)("a",{parentName:"p",href:"#getactivetrackindex"},(0,i.kt)("inlineCode",{parentName:"a"},"getActiveTrackIndex()"))," instead or use\n",(0,i.kt)("a",{parentName:"p",href:"#getactivetrack"},(0,i.kt)("inlineCode",{parentName:"a"},"getActiveTrack()"))," to get the active track object."),(0,i.kt)("p",null,"Gets the index of the current track, or null if no track loaded"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/761b8908.506f2208.js b/assets/js/761b8908.506f2208.js deleted file mode 100644 index 0016c345a..000000000 --- a/assets/js/761b8908.506f2208.js +++ /dev/null @@ -1 +0,0 @@ -"use strict";(self.webpackChunkdocs=self.webpackChunkdocs||[]).push([[398],{3905:function(e,t,a){a.d(t,{Zo:function(){return k},kt:function(){return c}});var n=a(7294);function r(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,n)}return a}function l(e){for(var t=1;t=0||(r[a]=e[a]);return r}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(r[a]=e[a])}return r}var p=n.createContext({}),d=function(e){var t=n.useContext(p),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},k=function(e){var t=d(e.components);return n.createElement(p.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},m=n.forwardRef((function(e,t){var a=e.components,r=e.mdxType,i=e.originalType,p=e.parentName,k=o(e,["components","mdxType","originalType","parentName"]),m=d(a),c=r,s=m["".concat(p,".").concat(c)]||m[c]||u[c]||i;return a?n.createElement(s,l(l({ref:t},k),{},{components:a})):n.createElement(s,l({ref:t},k))}));function c(e,t){var a=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var i=a.length,l=new Array(i);l[0]=m;var o={};for(var p in t)hasOwnProperty.call(t,p)&&(o[p]=t[p]);o.originalType=e,o.mdxType="string"==typeof e?e:r,l[1]=o;for(var d=2;dadd(tracks, insertBeforeIndex)",id:"addtracks-insertbeforeindex",level:2},{value:"remove(tracks)",id:"removetracks",level:2},{value:"setQueue(tracks)",id:"setqueuetracks",level:2},{value:"load(track)",id:"loadtrack",level:2},{value:"skip(index, initialPosition)",id:"skipindex-initialposition",level:2},{value:"skipToNext(initialPosition)",id:"skiptonextinitialposition",level:2},{value:"skipToPrevious(initialPosition)",id:"skiptopreviousinitialposition",level:2},{value:"move(fromIndex, toIndex)",id:"movefromindex-toindex",level:2},{value:"reset()",id:"reset",level:2},{value:"getTrack(index)",id:"gettrackindex",level:2},{value:"getActiveTrack()",id:"getactivetrack",level:2},{value:"getActiveTrackIndex()",id:"getactivetrackindex",level:2},{value:"getQueue()",id:"getqueue",level:2},{value:"removeUpcomingTracks()",id:"removeupcomingtracks",level:2},{value:"updateMetadataForTrack(index, metadata)",id:"updatemetadatafortrackindex-metadata",level:2},{value:"setRepeatMode(mode)",id:"setrepeatmodemode",level:2},{value:"getRepeatMode()",id:"getrepeatmode",level:2},{value:"\u26a0\ufe0f getCurrentTrack()",id:"\ufe0f-getcurrenttrack",level:2}],m={toc:u};function c(e){var t=e.components,a=(0,r.Z)(e,l);return(0,i.kt)("wrapper",(0,n.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("h1",{id:"queue"},"Queue"),(0,i.kt)("h2",{id:"addtracks-insertbeforeindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"add(tracks, insertBeforeIndex)")),(0,i.kt)("p",null,"Adds one or more tracks to the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")," - The promise resolves with the first\nadded track index. If no tracks were added it returns ",(0,i.kt)("inlineCode",{parentName:"p"},"void"),"."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"tracks"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track \\| Track[]")),(0,i.kt)("td",{parentName:"tr",align:null},"The ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," objects that will be added")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"insertBeforeIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The index of the track that will be located immediately after the inserted tracks. Set it to ",(0,i.kt)("inlineCode",{parentName:"td"},"null")," to add it at the end of the queue")))),(0,i.kt)("h2",{id:"removetracks"},(0,i.kt)("inlineCode",{parentName:"h2"},"remove(tracks)")),(0,i.kt)("p",null,"Removes one or more tracks from the queue. If the current track is removed, the next track will activated. If the current track was the last track in the queue, the first track will be activated."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"tracks"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track \\| Track[]")),(0,i.kt)("td",{parentName:"tr",align:null},"The ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," objects that will be removed")))),(0,i.kt)("h2",{id:"setqueuetracks"},(0,i.kt)("inlineCode",{parentName:"h2"},"setQueue(tracks)")),(0,i.kt)("p",null,"Clears the current queue and adds the supplied tracks to the now empty queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"tracks"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track[]")),(0,i.kt)("td",{parentName:"tr",align:null},"An array of ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," to replace the current queue with.")))),(0,i.kt)("h2",{id:"loadtrack"},(0,i.kt)("inlineCode",{parentName:"h2"},"load(track)")),(0,i.kt)("p",null,"Replaces the current track with the supplied track or creates a track when the queue is empty."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"track"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"Track")),(0,i.kt)("td",{parentName:"tr",align:null},"The ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track")," object that will be loaded")))),(0,i.kt)("h2",{id:"skipindex-initialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skip(index, initialPosition)")),(0,i.kt)("p",null,"Skips to a track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"skiptonextinitialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skipToNext(initialPosition)")),(0,i.kt)("p",null,"Skips to the next track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"skiptopreviousinitialposition"},(0,i.kt)("inlineCode",{parentName:"h2"},"skipToPrevious(initialPosition)")),(0,i.kt)("p",null,"Skips to the previous track in the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"initialPosition"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("strong",{parentName:"td"},"Optional.")," Sets the initial playback for the track you're skipping to.")))),(0,i.kt)("h2",{id:"movefromindex-toindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"move(fromIndex, toIndex)")),(0,i.kt)("p",null,"Moves a track from the specified index to another."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"fromIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The index of the track you'd like to move.")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"toIndex"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The position you'd like to move the track to.")))),(0,i.kt)("h2",{id:"reset"},(0,i.kt)("inlineCode",{parentName:"h2"},"reset()")),(0,i.kt)("p",null,"Resets the player stopping the current track and clearing the queue."),(0,i.kt)("h2",{id:"gettrackindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"getTrack(index)")),(0,i.kt)("p",null,"Gets a track object from the queue."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track"),(0,i.kt)("inlineCode",{parentName:"p"},">")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")))),(0,i.kt)("h2",{id:"getactivetrack"},(0,i.kt)("inlineCode",{parentName:"h2"},"getActiveTrack()")),(0,i.kt)("p",null,"Gets the active track object."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track"),(0,i.kt)("inlineCode",{parentName:"p"}," | undefined>")),(0,i.kt)("h2",{id:"getactivetrackindex"},(0,i.kt)("inlineCode",{parentName:"h2"},"getActiveTrackIndex()")),(0,i.kt)("p",null,"Gets the index of the current track, or ",(0,i.kt)("inlineCode",{parentName:"p"},"undefined")," if no track loaded"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("h2",{id:"getqueue"},(0,i.kt)("inlineCode",{parentName:"h2"},"getQueue()")),(0,i.kt)("p",null,"Gets the whole queue"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise<"),(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/objects/track"},"Track[]"),(0,i.kt)("inlineCode",{parentName:"p"},">")),(0,i.kt)("h2",{id:"removeupcomingtracks"},(0,i.kt)("inlineCode",{parentName:"h2"},"removeUpcomingTracks()")),(0,i.kt)("p",null,"Clears any upcoming tracks from the queue."),(0,i.kt)("h2",{id:"updatemetadatafortrackindex-metadata"},(0,i.kt)("inlineCode",{parentName:"h2"},"updateMetadataForTrack(index, metadata)")),(0,i.kt)("p",null,"Updates the metadata of a track in the queue.\nIf the current track is updated, the notification and the Now Playing Center will be updated accordingly."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"index"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"number")),(0,i.kt)("td",{parentName:"tr",align:null},"The track index")),(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"metadata"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("inlineCode",{parentName:"td"},"object")),(0,i.kt)("td",{parentName:"tr",align:null},"A subset of the ",(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/objects/track"},"Track Object")," with only the ",(0,i.kt)("inlineCode",{parentName:"td"},"artwork"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"title"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"artist"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"album"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"description"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"genre"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"date"),", ",(0,i.kt)("inlineCode",{parentName:"td"},"rating")," and ",(0,i.kt)("inlineCode",{parentName:"td"},"duration")," properties.")))),(0,i.kt)("h2",{id:"setrepeatmodemode"},(0,i.kt)("inlineCode",{parentName:"h2"},"setRepeatMode(mode)")),(0,i.kt)("p",null,"Sets the repeat mode."),(0,i.kt)("table",null,(0,i.kt)("thead",{parentName:"table"},(0,i.kt)("tr",{parentName:"thead"},(0,i.kt)("th",{parentName:"tr",align:null},"Param"),(0,i.kt)("th",{parentName:"tr",align:null},"Type"),(0,i.kt)("th",{parentName:"tr",align:null},"Description"))),(0,i.kt)("tbody",{parentName:"table"},(0,i.kt)("tr",{parentName:"tbody"},(0,i.kt)("td",{parentName:"tr",align:null},"mode"),(0,i.kt)("td",{parentName:"tr",align:null},(0,i.kt)("a",{parentName:"td",href:"/docs/next/api/constants/repeat-mode"},"Repeat Mode")),(0,i.kt)("td",{parentName:"tr",align:null},"The repeat mode")))),(0,i.kt)("h2",{id:"getrepeatmode"},(0,i.kt)("inlineCode",{parentName:"h2"},"getRepeatMode()")),(0,i.kt)("p",null,"Gets the repeat mode."),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("a",{parentName:"p",href:"/docs/next/api/constants/repeat-mode"},"Repeat Mode")),(0,i.kt)("h2",{id:"\ufe0f-getcurrenttrack"},"\u26a0\ufe0f ",(0,i.kt)("inlineCode",{parentName:"h2"},"getCurrentTrack()")),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"\u26a0\ufe0f Deprecated:")," To get the active track index use\n",(0,i.kt)("a",{parentName:"p",href:"#getactivetrackindex"},(0,i.kt)("inlineCode",{parentName:"a"},"getActiveTrackIndex()"))," instead or use\n",(0,i.kt)("a",{parentName:"p",href:"#getactivetrack"},(0,i.kt)("inlineCode",{parentName:"a"},"getActiveTrack()"))," to get the active track object."),(0,i.kt)("p",null,"Gets the index of the current track, or null if no track loaded"),(0,i.kt)("p",null,(0,i.kt)("strong",{parentName:"p"},"Returns:")," ",(0,i.kt)("inlineCode",{parentName:"p"},"Promise")))}c.isMDXComponent=!0}}]); \ No newline at end of file diff --git a/assets/js/runtime~main.41586515.js b/assets/js/runtime~main.4e832536.js similarity index 99% rename from assets/js/runtime~main.41586515.js rename to assets/js/runtime~main.4e832536.js index 0c97ff128..c57940054 100644 --- a/assets/js/runtime~main.41586515.js +++ b/assets/js/runtime~main.4e832536.js @@ -1 +1 @@ -!function(){"use strict";var e,f,d,c,a,b={},t={};function n(e){var f=t[e];if(void 0!==f)return f.exports;var d=t[e]={id:e,loaded:!1,exports:{}};return b[e].call(d.exports,d,d.exports,n),d.loaded=!0,d.exports}n.m=b,n.c=t,e=[],n.O=function(f,d,c,a){if(!d){var b=1/0;for(u=0;u=a)&&Object.keys(n.O).every((function(e){return n.O[e](d[r])}))?d.splice(r--,1):(t=!1,a0&&e[u-1][2]>a;u--)e[u]=e[u-1];e[u]=[d,c,a]},n.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(f,{a:f}),f},d=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var a=Object.create(null);n.r(a);var b={};f=f||[null,d({}),d([]),d(d)];for(var t=2&c&&e;"object"==typeof t&&!~f.indexOf(t);t=d(t))Object.getOwnPropertyNames(t).forEach((function(f){b[f]=function(){return e[f]}}));return b.default=function(){return e},n.d(a,b),a},n.d=function(e,f){for(var d in f)n.o(f,d)&&!n.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:f[d]})},n.f={},n.e=function(e){return Promise.all(Object.keys(n.f).reduce((function(f,d){return n.f[d](e,f),f}),[]))},n.u=function(e){return"assets/js/"+({17:"8c248731",53:"935f2afb",54:"9389d3ae",105:"92abfdb4",222:"d2277970",236:"e6e2221b",260:"d47f630f",284:"8e2f3fc5",355:"f1a88448",382:"a236d818",398:"761b8908",431:"62e88040",443:"1cb0395a",595:"ed107d34",642:"afecbf48",698:"074bc8bd",764:"eb235785",793:"93b46221",796:"79291fe1",804:"1c9ef7dd",810:"d8463709",890:"2a42c7dd",969:"13fa0dd9",1050:"74dd9064",1055:"f03452c8",1070:"73aff2cf",1137:"45736229",1164:"8b87dc66",1320:"43dd293f",1383:"b67a5abf",1477:"dfd9ed8a",1480:"38aea66f",1572:"2dcdf14f",1607:"19e38dee",1616:"043bfdb8",1695:"e898bf59",1761:"9dc704f3",1831:"a0dcd1b2",1835:"45c8d51b",1839:"b3f20807",1876:"a937d322",1906:"135272dc",1917:"c6b2435e",1960:"dae16eba",2056:"1c6e47e8",2090:"fe98b244",2094:"0f61d384",2113:"a48a11d2",2236:"d082cc16",2285:"538b2445",2288:"1ffa7e68",2347:"c31e0d20",2375:"6dff8123",2398:"246d3e16",2492:"6db21fe3",2530:"889cf12d",2611:"09d72823",2622:"eb9e8a54",2664:"7ef8eea2",2666:"ca71058e",2683:"070bc404",2706:"95a5accd",2787:"98b4c888",2813:"0f361a98",2927:"7b37f89c",2944:"4d60a64e",3019:"8d80a052",3054:"4a97e2ba",3128:"ce11e34c",3142:"d9b7e452",3149:"a1a89a94",3150:"7fa821f3",3179:"055aceb0",3230:"d4a334ea",3237:"1df93b7f",3287:"04597326",3392:"f7993752",3438:"c77292a6",3472:"16fe2a79",3582:"386ee75a",3602:"56b31061",3619:"f1f06577",3632:"120b0a90",3694:"f9a922c8",3754:"f0a2a361",3797:"d0853bc3",3889:"8e018bee",3931:"e7f618ac",3952:"3a799785",4013:"bd6db1ff",4029:"44fc1ed2",4053:"f7b14bb8",4098:"d4550109",4132:"28397205",4143:"7c3fde0a",4251:"8f23db15",4287:"fd2a2d4b",4388:"fd9eb927",4470:"3b4d5c14",4476:"5efa6c93",4493:"e92119ee",4546:"abaf7d79",4618:"ac651f74",4627:"1c62a355",4664:"578de3c1",4703:"f448fb76",4711:"00bde185",4741:"ece5b2e7",4758:"5d596a59",4807:"8d81c973",4818:"600114f6",4870:"c3b68060",4880:"9ecc3836",4946:"1b443631",4993:"7ea2ba81",5003:"6b498f1a",5015:"f0536058",5037:"712df674",5156:"e7540c7f",5217:"28d51b82",5229:"886f88ba",5235:"71a56230",5253:"a52164d2",5292:"66e65244",5358:"4220f025",5362:"e9391917",5383:"167f1ed3",5510:"84a28de8",5515:"c2159d4f",5520:"56955660",5557:"2e801a15",5572:"49b2413b",5593:"db5fd16e",5605:"05dd9f1b",5684:"ef393c84",5740:"6abc7f36",5755:"aca787b9",5852:"5eecce84",5896:"4d309f27",6235:"7e2d8c8f",6261:"f716dc8a",6345:"1cad3c18",6498:"91a61dba",6512:"ef58ed28",6523:"aeb7fe78",6529:"47220f75",6551:"89bdffad",6564:"eed56d04",6687:"318ef88e",6712:"b8b88847",6773:"7239a3d4",6787:"0bc03210",6804:"1977677a",6863:"cc7e6cd8",6895:"749c5af5",6956:"f7ad92b0",6961:"c5bc3e95",6991:"0714762b",7005:"10276b08",7025:"60066cbc",7227:"59558ff1",7384:"0341dc9d",7472:"32562f03",7476:"20b525ec",7502:"9fd45252",7553:"aa6fdb86",7700:"8c06d75f",7716:"5eb25670",7740:"6dddf308",7788:"87586e81",7918:"17896441",7920:"1a4e3797",7938:"6ad07298",7946:"78ef4445",7950:"07004238",8011:"bcb5a753",8089:"d6713ad4",8111:"1d3e5a90",8113:"41c60057",8145:"1c31a03e",8169:"d955e81a",8199:"91c698cf",8224:"8a63a6fa",8253:"167ceed1",8256:"ccc69032",8286:"9f08905e",8311:"4e799a97",8359:"e9bfd275",8362:"612bb7e4",8505:"3ca474ac",8550:"d85a90e3",8555:"94f117cd",8696:"987ef8c7",8705:"1925e818",8706:"a3fbc3e1",8773:"242d99d9",8809:"426721b3",8856:"0e924499",8935:"470d967a",8985:"e0a25ebe",9004:"1efad297",9020:"6ae9250f",9034:"ecf4ec08",9070:"1c0ad8e6",9081:"df51c7e2",9087:"aa8c2816",9197:"e8f71a57",9264:"463048b9",9331:"5ddd09c5",9333:"30561dc1",9345:"61485af4",9348:"2a51e4df",9355:"1c7dd417",9360:"9d9f8394",9445:"420e651f",9450:"f87dac3c",9461:"d66f2a44",9514:"1be78505",9523:"ed606a56",9536:"c5286dcd",9622:"0685996c",9628:"e5edc355",9629:"12770ebd",9671:"0e384e19",9675:"df47c164",9689:"91983b5e",9711:"5d4b3239",9741:"1291c0ae",9770:"fe6d77e8",9789:"48d5e293",9845:"1bf8893b",9892:"6469b7c9",9958:"fd4bca7f",9999:"9f36ee50"}[e]||e)+"."+{17:"cc223389",53:"9866a00a",54:"788f131f",105:"466de0b8",222:"38067e0d",236:"b9d4e8c9",260:"5aded7d4",284:"a3ca6cca",355:"69586857",382:"ce9318d6",398:"506f2208",431:"a7b0a639",443:"7b85bdfa",595:"2058a534",642:"ee531f94",698:"fce89d82",764:"9a5f32b3",793:"28a72239",796:"84f7d330",804:"f318e3b4",810:"24027de5",890:"c904489d",969:"32af17e9",1050:"2b341219",1055:"ffd875b5",1070:"33e7a707",1137:"7996626a",1164:"1f26b915",1320:"1c6c9ad7",1383:"0c3b85ba",1477:"622d9c22",1480:"234e5621",1572:"bd9d6b8b",1607:"a6b31780",1616:"2834aa47",1695:"62543b13",1761:"b6581e66",1831:"9c5dbec4",1835:"4a86e63d",1839:"7212284d",1876:"cd9cddf7",1906:"e045ae1c",1917:"c7e4105e",1960:"0036acc6",2056:"d019b559",2090:"4310abfa",2094:"010aa403",2113:"65582938",2236:"a84e54d5",2285:"59cd8f2b",2288:"dc3393b3",2347:"0df0fe99",2375:"b1bccdac",2398:"786dc6ce",2492:"d9778aa2",2530:"248ecfad",2611:"eb675ace",2622:"6794eff2",2664:"d2c31e1a",2666:"8513c79f",2683:"3f36465b",2706:"f95e2112",2787:"4e6e15d7",2813:"69593e39",2927:"525f0239",2944:"0963b6ae",3019:"51f19029",3054:"994439b2",3128:"fc5bc2e3",3142:"03a2d636",3149:"638e22ee",3150:"acc4c8b4",3179:"564f1347",3230:"243f842c",3237:"8d062c7f",3287:"3c0f83ac",3392:"7681587a",3438:"85e55219",3472:"a57c4e35",3582:"2aeeb8af",3602:"eab92a2e",3619:"03006de3",3632:"7bc80dc8",3694:"07dbe4d4",3754:"48cd9c41",3797:"ca91ad1e",3889:"fbdb3c72",3931:"7dcc8b4f",3952:"f35962e1",4013:"fccb510a",4029:"93022ac0",4053:"f104e179",4098:"646be75a",4132:"9daa7801",4143:"0cedf416",4251:"ebdf86be",4287:"4a043c48",4388:"dea4143c",4470:"3d1b8c2a",4476:"b98b3627",4493:"925830d2",4546:"46671096",4608:"a724041c",4618:"8e502726",4627:"ddc17695",4664:"37565125",4703:"d9e395bc",4711:"7702eee5",4741:"2e31321b",4758:"a8eff83a",4807:"3efb8b18",4818:"d796b9db",4870:"0132ea4b",4880:"0f39a698",4946:"8d4cfae2",4993:"4c9236c5",5003:"d43a989b",5015:"466a776b",5037:"deb056ad",5156:"73e70b96",5217:"21535f6e",5229:"46110b9f",5235:"3905997f",5253:"006e8cfc",5292:"afdff135",5358:"0b5905f9",5362:"74867c15",5383:"0844d6f8",5510:"5f22f7ca",5515:"e94a478f",5520:"af76406c",5557:"7c12c9f2",5572:"b2f6271a",5593:"62dd00dc",5605:"90e84b08",5684:"a44b7bb5",5740:"8abb198f",5755:"9f82ed8a",5852:"ca24a413",5896:"55ed1611",6235:"b2bf8fc4",6261:"9c9e53bb",6345:"7be8cab8",6498:"a55c8092",6512:"360e63ab",6523:"2b074541",6529:"66b66bc1",6551:"412eebd7",6564:"91561196",6687:"56d2b2a4",6712:"d002ff5a",6773:"762b0e36",6787:"9adaa34a",6804:"152afdca",6815:"bf8d939b",6863:"079bf868",6895:"4b5715f7",6945:"7e7c6451",6956:"d6a6ed55",6961:"b7d40a6c",6991:"5a6ebbf6",7005:"67882c55",7025:"88864636",7227:"0f6698f5",7384:"8cae3d26",7472:"9167a40d",7476:"c0fe9f8d",7502:"563327d3",7553:"b2ee5cd2",7700:"22aaeb00",7716:"562ca4a4",7740:"fafbd4da",7788:"7427f3b1",7918:"38b27ede",7920:"4f66bef6",7938:"8098e091",7946:"7fd1235c",7950:"2160200e",8011:"18c50c99",8089:"1ad77812",8111:"33164565",8113:"5d963417",8145:"8976dfa1",8169:"e70696a4",8199:"5c1e2aac",8224:"e443b260",8253:"36365ae9",8256:"2061d4f4",8286:"e0b6a8d7",8311:"d38a0ee7",8359:"2d9a4582",8362:"fa33e632",8505:"f2097f63",8550:"3250f44f",8555:"796ac9f6",8696:"b41c9621",8705:"f443cbde",8706:"151ced3d",8773:"e8285c44",8809:"92cb4d9f",8856:"c01de302",8894:"8579f5eb",8935:"8514d5e7",8985:"39c52a60",9004:"7c6d7321",9020:"dada5e94",9034:"d5c1d02d",9070:"bd64bfb3",9081:"1d987951",9087:"2194f516",9197:"559e6326",9264:"e36c46b8",9331:"e52b3606",9333:"f69a79ae",9345:"4a9c6482",9348:"6090d38d",9355:"e4735be9",9360:"7592e6b2",9445:"9bfcc2bb",9450:"c8a7fef7",9461:"cbd5028e",9514:"e4a80609",9523:"bb219347",9536:"48cc6b9b",9622:"245fc315",9628:"865202d4",9629:"a84da1f7",9671:"356bfe19",9675:"794ea0be",9689:"beaeef4d",9711:"5fc815ac",9741:"6e27562e",9770:"e17918c7",9789:"93fd515a",9845:"55af75d0",9892:"686e54b0",9958:"b8027785",9999:"5a2544d6"}[e]+".js"},n.miniCssF=function(e){},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},c={},a="docs:",n.l=function(e,f,d,b){if(c[e])c[e].push(f);else{var t,r;if(void 0!==d)for(var o=document.getElementsByTagName("script"),u=0;u=a)&&Object.keys(n.O).every((function(e){return n.O[e](d[r])}))?d.splice(r--,1):(t=!1,a0&&e[u-1][2]>a;u--)e[u]=e[u-1];e[u]=[d,c,a]},n.n=function(e){var f=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(f,{a:f}),f},d=Object.getPrototypeOf?function(e){return Object.getPrototypeOf(e)}:function(e){return e.__proto__},n.t=function(e,c){if(1&c&&(e=this(e)),8&c)return e;if("object"==typeof e&&e){if(4&c&&e.__esModule)return e;if(16&c&&"function"==typeof e.then)return e}var a=Object.create(null);n.r(a);var b={};f=f||[null,d({}),d([]),d(d)];for(var t=2&c&&e;"object"==typeof t&&!~f.indexOf(t);t=d(t))Object.getOwnPropertyNames(t).forEach((function(f){b[f]=function(){return e[f]}}));return b.default=function(){return e},n.d(a,b),a},n.d=function(e,f){for(var d in f)n.o(f,d)&&!n.o(e,d)&&Object.defineProperty(e,d,{enumerable:!0,get:f[d]})},n.f={},n.e=function(e){return Promise.all(Object.keys(n.f).reduce((function(f,d){return n.f[d](e,f),f}),[]))},n.u=function(e){return"assets/js/"+({17:"8c248731",53:"935f2afb",54:"9389d3ae",105:"92abfdb4",222:"d2277970",236:"e6e2221b",260:"d47f630f",284:"8e2f3fc5",355:"f1a88448",382:"a236d818",398:"761b8908",431:"62e88040",443:"1cb0395a",595:"ed107d34",642:"afecbf48",698:"074bc8bd",764:"eb235785",793:"93b46221",796:"79291fe1",804:"1c9ef7dd",810:"d8463709",890:"2a42c7dd",969:"13fa0dd9",1050:"74dd9064",1055:"f03452c8",1070:"73aff2cf",1137:"45736229",1164:"8b87dc66",1320:"43dd293f",1383:"b67a5abf",1477:"dfd9ed8a",1480:"38aea66f",1572:"2dcdf14f",1607:"19e38dee",1616:"043bfdb8",1695:"e898bf59",1761:"9dc704f3",1831:"a0dcd1b2",1835:"45c8d51b",1839:"b3f20807",1876:"a937d322",1906:"135272dc",1917:"c6b2435e",1960:"dae16eba",2056:"1c6e47e8",2090:"fe98b244",2094:"0f61d384",2113:"a48a11d2",2236:"d082cc16",2285:"538b2445",2288:"1ffa7e68",2347:"c31e0d20",2375:"6dff8123",2398:"246d3e16",2492:"6db21fe3",2530:"889cf12d",2611:"09d72823",2622:"eb9e8a54",2664:"7ef8eea2",2666:"ca71058e",2683:"070bc404",2706:"95a5accd",2787:"98b4c888",2813:"0f361a98",2927:"7b37f89c",2944:"4d60a64e",3019:"8d80a052",3054:"4a97e2ba",3128:"ce11e34c",3142:"d9b7e452",3149:"a1a89a94",3150:"7fa821f3",3179:"055aceb0",3230:"d4a334ea",3237:"1df93b7f",3287:"04597326",3392:"f7993752",3438:"c77292a6",3472:"16fe2a79",3582:"386ee75a",3602:"56b31061",3619:"f1f06577",3632:"120b0a90",3694:"f9a922c8",3754:"f0a2a361",3797:"d0853bc3",3889:"8e018bee",3931:"e7f618ac",3952:"3a799785",4013:"bd6db1ff",4029:"44fc1ed2",4053:"f7b14bb8",4098:"d4550109",4132:"28397205",4143:"7c3fde0a",4251:"8f23db15",4287:"fd2a2d4b",4388:"fd9eb927",4470:"3b4d5c14",4476:"5efa6c93",4493:"e92119ee",4546:"abaf7d79",4618:"ac651f74",4627:"1c62a355",4664:"578de3c1",4703:"f448fb76",4711:"00bde185",4741:"ece5b2e7",4758:"5d596a59",4807:"8d81c973",4818:"600114f6",4870:"c3b68060",4880:"9ecc3836",4946:"1b443631",4993:"7ea2ba81",5003:"6b498f1a",5015:"f0536058",5037:"712df674",5156:"e7540c7f",5217:"28d51b82",5229:"886f88ba",5235:"71a56230",5253:"a52164d2",5292:"66e65244",5358:"4220f025",5362:"e9391917",5383:"167f1ed3",5510:"84a28de8",5515:"c2159d4f",5520:"56955660",5557:"2e801a15",5572:"49b2413b",5593:"db5fd16e",5605:"05dd9f1b",5684:"ef393c84",5740:"6abc7f36",5755:"aca787b9",5852:"5eecce84",5896:"4d309f27",6235:"7e2d8c8f",6261:"f716dc8a",6345:"1cad3c18",6498:"91a61dba",6512:"ef58ed28",6523:"aeb7fe78",6529:"47220f75",6551:"89bdffad",6564:"eed56d04",6687:"318ef88e",6712:"b8b88847",6773:"7239a3d4",6787:"0bc03210",6804:"1977677a",6863:"cc7e6cd8",6895:"749c5af5",6956:"f7ad92b0",6961:"c5bc3e95",6991:"0714762b",7005:"10276b08",7025:"60066cbc",7227:"59558ff1",7384:"0341dc9d",7472:"32562f03",7476:"20b525ec",7502:"9fd45252",7553:"aa6fdb86",7700:"8c06d75f",7716:"5eb25670",7740:"6dddf308",7788:"87586e81",7918:"17896441",7920:"1a4e3797",7938:"6ad07298",7946:"78ef4445",7950:"07004238",8011:"bcb5a753",8089:"d6713ad4",8111:"1d3e5a90",8113:"41c60057",8145:"1c31a03e",8169:"d955e81a",8199:"91c698cf",8224:"8a63a6fa",8253:"167ceed1",8256:"ccc69032",8286:"9f08905e",8311:"4e799a97",8359:"e9bfd275",8362:"612bb7e4",8505:"3ca474ac",8550:"d85a90e3",8555:"94f117cd",8696:"987ef8c7",8705:"1925e818",8706:"a3fbc3e1",8773:"242d99d9",8809:"426721b3",8856:"0e924499",8935:"470d967a",8985:"e0a25ebe",9004:"1efad297",9020:"6ae9250f",9034:"ecf4ec08",9070:"1c0ad8e6",9081:"df51c7e2",9087:"aa8c2816",9197:"e8f71a57",9264:"463048b9",9331:"5ddd09c5",9333:"30561dc1",9345:"61485af4",9348:"2a51e4df",9355:"1c7dd417",9360:"9d9f8394",9445:"420e651f",9450:"f87dac3c",9461:"d66f2a44",9514:"1be78505",9523:"ed606a56",9536:"c5286dcd",9622:"0685996c",9628:"e5edc355",9629:"12770ebd",9671:"0e384e19",9675:"df47c164",9689:"91983b5e",9711:"5d4b3239",9741:"1291c0ae",9770:"fe6d77e8",9789:"48d5e293",9845:"1bf8893b",9892:"6469b7c9",9958:"fd4bca7f",9999:"9f36ee50"}[e]||e)+"."+{17:"cc223389",53:"9866a00a",54:"788f131f",105:"466de0b8",222:"38067e0d",236:"b9d4e8c9",260:"5aded7d4",284:"a3ca6cca",355:"69586857",382:"ce9318d6",398:"2ecb9c21",431:"a7b0a639",443:"7b85bdfa",595:"2058a534",642:"ee531f94",698:"fce89d82",764:"9a5f32b3",793:"28a72239",796:"84f7d330",804:"f318e3b4",810:"24027de5",890:"c904489d",969:"32af17e9",1050:"2b341219",1055:"ffd875b5",1070:"33e7a707",1137:"7996626a",1164:"1f26b915",1320:"1c6c9ad7",1383:"0c3b85ba",1477:"622d9c22",1480:"234e5621",1572:"bd9d6b8b",1607:"a6b31780",1616:"2834aa47",1695:"62543b13",1761:"b6581e66",1831:"9c5dbec4",1835:"4a86e63d",1839:"7212284d",1876:"cd9cddf7",1906:"e045ae1c",1917:"c7e4105e",1960:"0036acc6",2056:"d019b559",2090:"4310abfa",2094:"010aa403",2113:"65582938",2236:"a84e54d5",2285:"59cd8f2b",2288:"dc3393b3",2347:"0df0fe99",2375:"b1bccdac",2398:"786dc6ce",2492:"d9778aa2",2530:"248ecfad",2611:"eb675ace",2622:"6794eff2",2664:"d2c31e1a",2666:"8513c79f",2683:"3f36465b",2706:"f95e2112",2787:"4e6e15d7",2813:"69593e39",2927:"525f0239",2944:"0963b6ae",3019:"51f19029",3054:"8908d7fa",3128:"fc5bc2e3",3142:"03a2d636",3149:"638e22ee",3150:"acc4c8b4",3179:"564f1347",3230:"243f842c",3237:"8d062c7f",3287:"3c0f83ac",3392:"7681587a",3438:"85e55219",3472:"a57c4e35",3582:"2aeeb8af",3602:"eab92a2e",3619:"03006de3",3632:"7bc80dc8",3694:"07dbe4d4",3754:"48cd9c41",3797:"ca91ad1e",3889:"fbdb3c72",3931:"7dcc8b4f",3952:"f35962e1",4013:"fccb510a",4029:"93022ac0",4053:"f104e179",4098:"646be75a",4132:"9daa7801",4143:"0cedf416",4251:"ebdf86be",4287:"4a043c48",4388:"dea4143c",4470:"3d1b8c2a",4476:"b98b3627",4493:"925830d2",4546:"46671096",4608:"a724041c",4618:"8e502726",4627:"ddc17695",4664:"37565125",4703:"d9e395bc",4711:"7702eee5",4741:"2e31321b",4758:"a8eff83a",4807:"3efb8b18",4818:"d796b9db",4870:"0132ea4b",4880:"0f39a698",4946:"8d4cfae2",4993:"4c9236c5",5003:"d43a989b",5015:"466a776b",5037:"deb056ad",5156:"73e70b96",5217:"21535f6e",5229:"46110b9f",5235:"3905997f",5253:"006e8cfc",5292:"afdff135",5358:"0b5905f9",5362:"74867c15",5383:"0844d6f8",5510:"5f22f7ca",5515:"e94a478f",5520:"af76406c",5557:"7c12c9f2",5572:"b2f6271a",5593:"62dd00dc",5605:"90e84b08",5684:"a44b7bb5",5740:"8abb198f",5755:"9f82ed8a",5852:"ca24a413",5896:"55ed1611",6235:"b2bf8fc4",6261:"9c9e53bb",6345:"7be8cab8",6498:"a55c8092",6512:"360e63ab",6523:"2b074541",6529:"66b66bc1",6551:"412eebd7",6564:"91561196",6687:"56d2b2a4",6712:"d002ff5a",6773:"762b0e36",6787:"9adaa34a",6804:"152afdca",6815:"bf8d939b",6863:"079bf868",6895:"4b5715f7",6945:"7e7c6451",6956:"d6a6ed55",6961:"b7d40a6c",6991:"5a6ebbf6",7005:"67882c55",7025:"88864636",7227:"0f6698f5",7384:"8cae3d26",7472:"9167a40d",7476:"c0fe9f8d",7502:"563327d3",7553:"b2ee5cd2",7700:"22aaeb00",7716:"562ca4a4",7740:"fafbd4da",7788:"7427f3b1",7918:"38b27ede",7920:"4f66bef6",7938:"8098e091",7946:"7fd1235c",7950:"2160200e",8011:"18c50c99",8089:"1ad77812",8111:"33164565",8113:"5d963417",8145:"8976dfa1",8169:"e70696a4",8199:"5c1e2aac",8224:"e443b260",8253:"36365ae9",8256:"2061d4f4",8286:"e0b6a8d7",8311:"d38a0ee7",8359:"2d9a4582",8362:"fa33e632",8505:"f2097f63",8550:"3250f44f",8555:"796ac9f6",8696:"b41c9621",8705:"f443cbde",8706:"151ced3d",8773:"e8285c44",8809:"92cb4d9f",8856:"c01de302",8894:"8579f5eb",8935:"8514d5e7",8985:"39c52a60",9004:"7c6d7321",9020:"dada5e94",9034:"d5c1d02d",9070:"bd64bfb3",9081:"1d987951",9087:"2194f516",9197:"559e6326",9264:"e36c46b8",9331:"e52b3606",9333:"f69a79ae",9345:"4a9c6482",9348:"6090d38d",9355:"e4735be9",9360:"7592e6b2",9445:"9bfcc2bb",9450:"c8a7fef7",9461:"cbd5028e",9514:"e4a80609",9523:"bb219347",9536:"48cc6b9b",9622:"245fc315",9628:"865202d4",9629:"a84da1f7",9671:"356bfe19",9675:"794ea0be",9689:"beaeef4d",9711:"5fc815ac",9741:"6e27562e",9770:"e17918c7",9789:"93fd515a",9845:"55af75d0",9892:"686e54b0",9958:"b8027785",9999:"5a2544d6"}[e]+".js"},n.miniCssF=function(e){},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=function(e,f){return Object.prototype.hasOwnProperty.call(e,f)},c={},a="docs:",n.l=function(e,f,d,b){if(c[e])c[e].push(f);else{var t,r;if(void 0!==d)for(var o=document.getElementsByTagName("script"),u=0;u Capability | React Native Track Player - +
Version: 2.1

Capability

All Capability types are made available through the named export Capability:

import { Capability } from 'react-native-track-player';
NameDescription
PlayCapability indicating the ability to play
PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
PauseCapability indicating the ability to pause
StopCapability indicating the ability to stop (on iOS available only for tracks where .isLiveStream is true)
SeekToCapability indicating the ability to seek to a position in the timeline
SkipCapability indicating the ability to skip to any song in the queue
SkipToNextCapability indicating the ability to skip to the next track
SkipToPreviousCapability indicating the ability to skip to the previous track
SetRatingCapability indicating the ability to set the rating value based on the rating type
JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
Like(ios-only) Capability indicating the ability to like from control center
Dislike(ios-only) Capability indicating the ability to dislike from control center
Bookmark(ios-only) Capability indicating the ability to bookmark from control center
- + \ No newline at end of file diff --git a/docs/2.1/api/constants/pitch-algorithm.html b/docs/2.1/api/constants/pitch-algorithm.html index 4da1f6929..864f19a28 100644 --- a/docs/2.1/api/constants/pitch-algorithm.html +++ b/docs/2.1/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
Version: 2.1

Pitch Algorithm (ios-only)

All PitchAlgorithm types are made available through the named export PitchAlgorithm:

import { PitchAlgorithm } from 'react-native-track-player';
NameDescription
LinearAn algorithm suitable for general use.
MusicAn algorithm suitable for music.
VoiceAn algorithm suitable for voice.
- + \ No newline at end of file diff --git a/docs/2.1/api/constants/rating.html b/docs/2.1/api/constants/rating.html index 97758e136..8dc2b2b67 100644 --- a/docs/2.1/api/constants/rating.html +++ b/docs/2.1/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
Version: 2.1

Rating

All RatingType types are made available through the named export RatingType:

import { RatingType } from 'react-native-track-player';
NameDescription
HeartRating type indicating "with heart" or "without heart", its value is a boolean.
ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
PercentageRating type indicating percentage, its value is a number.
- + \ No newline at end of file diff --git a/docs/2.1/api/constants/repeat-mode.html b/docs/2.1/api/constants/repeat-mode.html index 396d2c388..bdb880405 100644 --- a/docs/2.1/api/constants/repeat-mode.html +++ b/docs/2.1/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
Version: 2.1

Repeat Mode

All RepeatMode types are made available through the named export RepeatMode:

import { RepeatMode } from 'react-native-track-player';
NameDescription
OffDoesn't repeat.
TrackLoops the current track.
QueueRepeats the whole queue.
- + \ No newline at end of file diff --git a/docs/2.1/api/constants/state.html b/docs/2.1/api/constants/state.html index 1fac434e6..8f164487d 100644 --- a/docs/2.1/api/constants/state.html +++ b/docs/2.1/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
Version: 2.1

State

All State types are made available through the named export State:

import { State } from 'react-native-track-player';
NameDescription
NoneState indicating that no media is currently loaded
ReadyState indicating that the player is ready to start playing
PlayingState indicating that the player is currently playing
PausedState indicating that the player is currently paused
StoppedState indicating that the player is currently stopped
BufferingState indicating that the player is currently buffering (in "play" state)
ConnectingState indicating that the player is currently buffering (in "pause" state)
- + \ No newline at end of file diff --git a/docs/2.1/api/events.html b/docs/2.1/api/events.html index 17859f1eb..c4883f383 100644 --- a/docs/2.1/api/events.html +++ b/docs/2.1/api/events.html @@ -5,14 +5,14 @@ Events | React Native Track Player - +
Version: 2.1

Events

All event types are made available through the named export Event:

import { Event } from 'react-native-track-player';

Player​

PlaybackState​

Fired when the state of the player changes.

ParamTypeDescription
stateStateThe new state

PlaybackTrackChanged​

Fired when a track is changed.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds
nextTracknumberThe next track index. Might be null

PlaybackQueueEnded​

Fired when the queue reaches the end.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds

PlaybackMetadataReceived​

Fired when the current track receives metadata encoded in. (e.g. ID3 tags, Icy Metadata, Vorbis Comments or QuickTime metadata).

ParamTypeDescription
sourcestringThe metadata source (id3, icy, icy-headers, vorbis-comment, quicktime)
titlestringThe track title. Might be null
urlstringThe track url. Might be null
artiststringThe track artist. Might be null
albumstringThe track album. Might be null
datestringThe track date. Might be null
genrestringThe track genre. Might be null

PlaybackError​

Fired when an error occurs.

ParamTypeDescription
codestringThe error code
messagestringThe error message

Media Controls​

RemotePlay​

Fired when the user presses the play button. Only fired if the Capability.Play is allowed.

RemotePlayId​

Fired when the user selects a track from an external device. Required for Android Auto support. Only fired if the Capability.PlayFromId is allowed.

ParamTypeDescription
idstringThe track id

RemotePlaySearch​

Fired when the user searches for a track (usually voice search). Required for Android Auto support. Only fired if the Capability.PlayFromSearch is allowed.

Every parameter except query is optional and may not be provided. In the case where query is empty, feel free to select any track to play.

ParamTypeDescription
querystringThe search query
focusstringThe focus of the search. One of artist, album, playlist or genre
titlestringThe track title
artiststringThe track artist
albumstringThe track album
genrestringThe track genre
playliststringThe track playlist

RemotePause​

Fired when the user presses the pause button. Only fired if the Capability.Pause is allowed or if there's a change in outputs (e.g.: headphone disconnected).

RemoteStop​

Fired when the user presses the stop button. Only fired if the Capability.Stop is allowed.

RemoteSkip​

Fired when the user skips to a track in the queue. Only fired if the Capability.Skip is allowed.

ParamTypeDescription
indexnumberThe track index

RemoteNext​

Fired when the user presses the next track button. Only fired if the Capability.SkipToNext is allowed.

RemotePrevious​

Fired when the user presses the previous track button. Only fired if the Capability.SkipToPrevious is allowed.

RemoteSeek​

Fired when the user changes the position of the timeline. Only fired if the Capability.SeekTo is allowed.

ParamTypeDescription
positionnumberThe position in seconds

RemoteSetRating​

Fired when the user changes the rating for the track. Only fired if the Capability.SetRating is allowed.

ParamTypeDescription
ratingDepends on the Rating TypeThe rating that was set

RemoteJumpForward​

Fired when the user presses the jump forward button. Only fired if the Capability.JumpForward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump forward. It's usually the forwardJumpInterval set in the options.

RemoteJumpBackward​

Fired when the user presses the jump backward button. Only fired if the Capability.JumpBackward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump backward. It's usually the backwardJumpInterval set in the options.

RemoteLike (iOS only)​

Fired when the user presses the like button in the now playing center. Only fired if the likeOptions is set in updateOptions.

RemoteDislike (iOS only)​

Fired when the user presses the dislike button in the now playing center. Only fired if the dislikeOptions is set in updateOptions.

RemoteBookmark (iOS only)​

Fired when the user presses the bookmark button in the now playing center. Only fired if the bookmarkOptions is set in updateOptions.

RemoteDuck​

Subscribing to this event to handle interruptions ensures that your app’s audio continues behaving gracefully when a phone call arrives, a clock or calendar alarm sounds, or another app plays audio.

On Android, this event is fired when the device needs the player to pause or stop for an interruption and again when the interruption has passed and playback may resume. On iOS this event is fired after playback was already interrupted (meaning pausing playback is unnecessary) and again when playback may resume or to notify that the interruption was permanent.

On Android, the volume may also be lowered on an transient interruption without triggering this event. If you want to receive those interruptions, set the alwaysPauseOnInterruption option to true.

  • When the event is triggered with paused set to true, on Android the player should pause playback. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is not set to true, the player may resume playback.
ParamTypeDescription
pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.
- + \ No newline at end of file diff --git a/docs/2.1/api/functions/lifecycle.html b/docs/2.1/api/functions/lifecycle.html index 9e477b035..7d9ae2ec3 100644 --- a/docs/2.1/api/functions/lifecycle.html +++ b/docs/2.1/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
Version: 2.1

Lifecycle

setupPlayer(options: PlayerOptions)​

Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

You should always call this function (even without any options set) before using the player to make sure everything is initialized.

If the player is already initialized, the promise will resolve instantly.

Returns: Promise

ParamTypeDescriptionDefaultAndroidiOSWindows
optionsPlayerOptionsThe options
options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()playback❌✅❌
options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
options.waitForBufferbooleanIndicates whether the player should automatically delay playback in order to minimize stalling. If you notice that network media immediately pauses after it buffers, setting this to true may help.false❌✅❌
options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅❌❌

destroy()​

Destroys the player, cleaning up its resources. After executing this function, you won't be able to use the player anymore, unless you call setupPlayer() again.

registerPlaybackService(serviceProvider)​

Register the playback service. The service will run as long as the player runs.

This function should only be called once, and should be registered right after registering your React application with AppRegistry.

You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

ParamTypeDescription
serviceProviderfunctionThe function that must return an async service function.

useTrackPlayerEvents(events: Event[], handler: Handler)​

Hook that fires on the specified events.

You can find a list of events in the events section.

- + \ No newline at end of file diff --git a/docs/2.1/api/functions/player.html b/docs/2.1/api/functions/player.html index 57acf0600..042e07366 100644 --- a/docs/2.1/api/functions/player.html +++ b/docs/2.1/api/functions/player.html @@ -5,14 +5,14 @@ Player | React Native Track Player - +
Version: 2.1

Player

updateOptions(options)​

Updates the configuration for the components.

All parameters are optional. You also only need to specify the ones you want to update.

These parameters are different than the ones set using setupPlayer(). Parameters other than those listed below will not be applied.

Some parameters are unused depending on platform.

ParamTypeDescriptionAndroidiOSWindows
optionsMetadataOptionsThe options
options.ratingTypeRatingTypeThe rating type✅❌❌
options.forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅❌
options.backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
options.stoppingAppPausesPlaybackbooleanWhether the player will be destroyed when the app closes✅❌❌
options.alwaysPauseOnInterruptionbooleanWhether the remote-duck event will be triggered on every interruption✅❌❌
options.likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.capabilitiesCapability[]The media controls that will be enabled✅✅✅
options.notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
options.compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
options.iconResource ObjectThe notification icon¹✅❌❌
options.playIconResource ObjectThe play icon¹✅❌❌
options.pauseIconResource ObjectThe pause icon¹✅❌❌
options.stopIconResource ObjectThe stop icon¹✅❌❌
options.previousIconResource ObjectThe previous icon¹✅❌❌
options.nextIconResource ObjectThe next icon¹✅❌❌
options.rewindIconResource ObjectThe jump backward icon¹✅❌❌
options.forwardIconResource ObjectThe jump forward icon¹✅❌❌
options.colornumberThe notification color in an ARGB hex✅❌❌

¹ - The custom icons will only work in release builds

play()​

Plays or resumes the current track.

pause()​

Pauses the current track.

stop()​

Stops the current track.

seekTo(seconds)​

Seeks to a specified time position in the current track.

ParamTypeDescription
secondsnumberThe position in seconds

setVolume(volume)​

Sets the volume of the player.

ParamTypeDescription
volumenumberThe volume in a range from 0 to 1

getVolume()​

Gets the volume of the player (a number between 0 and 1).

Returns: Promise<number>

setRate(rate)​

Sets the playback rate

ParamTypeDescription
ratenumberThe playback rate where 1 is the regular speed

getRate()​

Gets the playback rate, where 1 is the regular speed.

Returns: Promise<number>

getDuration()​

Gets the duration of the current track in seconds.

Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

You should only trust the result of this function if you included the duration property in the Track Object.

Returns: Promise<number>

getPosition()​

Gets the position of the player in seconds.

Returns: Promise<number>

getBufferedPosition()​

Gets the buffered position of the player in seconds.

Returns: Promise<number>

getState()​

Gets the state of the player.

Returns: Promise<State>

- + \ No newline at end of file diff --git a/docs/2.1/api/functions/queue.html b/docs/2.1/api/functions/queue.html index bd46be667..756c50ead 100644 --- a/docs/2.1/api/functions/queue.html +++ b/docs/2.1/api/functions/queue.html @@ -5,7 +5,7 @@ Queue | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 2.1

Queue

add(tracks, insertBeforeIndex)​

Adds one or more tracks to the queue.

Returns: Promise<number | void> - The promise resolves with the first added track index. If no tracks were added it returns void.

ParamTypeDescription
tracksarray of Track Object or a single oneThe tracks that will be added
insertBeforeIndexnumberThe index of the track that will be located immediately after the inserted tracks. Set it to null to add it at the end of the queue

remove(tracks)​

Removes one or more tracks from the queue.

Returns: Promise<void>

ParamTypeDescription
tracksarray of track indexes or a single oneThe tracks that will be removed

skip(index)​

Skips to a track in the queue.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index

skipToNext()​

Skips to the next track in the queue.

Returns: Promise<void>

skipToPrevious()​

Skips to the previous track in the queue.

Returns: Promise<void>

reset()​

Resets the player stopping the current track and clearing the queue.

getTrack(index)​

Gets a track object from the queue.

Returns: Promise<Track>

ParamTypeDescription
indexnumberThe track index

getCurrentTrack()​

Gets the index of the current track

Returns: Promise<number>

getQueue()​

Gets the whole queue

Returns: Promise<Track[]>

removeUpcomingTracks()​

Clears any upcoming tracks from the queue.

updateMetadataForTrack(index, metadata)​

Updates the metadata of a track in the queue. If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index
metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

setRepeatMode(mode)​

Sets the repeat mode.

ParamTypeDescription
modeRepeat ModeThe repeat mode

getRepeatMode()​

Gets the repeat mode.

Returns: Repeat Mode

- + \ No newline at end of file diff --git a/docs/2.1/api/hooks.html b/docs/2.1/api/hooks.html index f3b574149..4aff26a38 100644 --- a/docs/2.1/api/hooks.html +++ b/docs/2.1/api/hooks.html @@ -5,13 +5,13 @@ Hooks | React Native Track Player - +
Version: 2.1

Hooks

React v16.8 introduced hooks. If you are using a version of React Native that is before v0.59.0, your React Native version does not support hooks.

useTrackPlayerEvents​

Register an event listener for one or more of the events emitted by the TrackPlayer. The subscription is removed when the component unmounts.

Check out the events section for a full list of supported events.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { useTrackPlayerEvents, Event, State } from 'react-native-track-player';

// Subscribing to the following events inside MyComponent
const events = [
  Event.PlaybackState,
  Event.PlaybackError,
];

const MyComponent = () => {
  const [playerState, setPlayerState] = useState(null)

  useTrackPlayerEvents(events, (event) => {
    if (event.type === Event.PlaybackError) {
      console.warn('An error occured while playing the current track.');
    }
    if (event.type === Event.PlaybackState) {
      setPlayerState(event.state);
    }
  });

  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};

useProgress​

StateTypeDescription
positionnumberThe current position in seconds
bufferednumberThe buffered position in seconds
durationnumberThe duration in seconds

useProgress accepts an interval to set the rate (in miliseconds) to poll the track player's progress. The default value is 1000 or every second.

import React from 'react';
import { Text, View } from 'react-native';
import { useProgress } from 'react-native-track-player';

const MyComponent = () => {
  const { position, buffered, duration } = useProgress()

  return (
    <View>
      <Text>Track progress: {position} seconds out of {duration} total</Text>
      <Text>Buffered progress: {buffered} seconds buffered out of {duration} total</Text>
    </View>
  )
}

usePlaybackState​

Register an event listener for the PlaybackState event emitted by the TrackPlayer. The subscription is removed when the component unmounts.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { usePlaybackState, State } from 'react-native-track-player';

const MyComponent = () => {
  const playerState = usePlaybackState();
  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};
- + \ No newline at end of file diff --git a/docs/2.1/api/objects/feedback.html b/docs/2.1/api/objects/feedback.html index 5022ed9c6..b8e381542 100644 --- a/docs/2.1/api/objects/feedback.html +++ b/docs/2.1/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
Version: 2.1

Feedback

Controls the rendering of the control center item.

ParamTypeDescription
isActivebooleanMarks wether the option should be marked as active or "done"
titlebooleanThe title to give the action (relevant for iOS)
- + \ No newline at end of file diff --git a/docs/2.1/api/objects/resource.html b/docs/2.1/api/objects/resource.html index 600d90893..36a25576f 100644 --- a/docs/2.1/api/objects/resource.html +++ b/docs/2.1/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
Version: 2.1

Resource

Resource objects are the result of require/import for files.

For more information about Resource Objects, read the Images section of the React Native documentation

- + \ No newline at end of file diff --git a/docs/2.1/api/objects/track.html b/docs/2.1/api/objects/track.html index a1eba5cc1..72a21a12c 100644 --- a/docs/2.1/api/objects/track.html +++ b/docs/2.1/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
Version: 2.1

Track

Tracks in the player queue are plain javascript objects as described below.

Only the url, title and artist properties are required for basic playback

ParamTypeDescription
idstringThe track id
urlstring or Resource ObjectThe media URL
typestringStream type. One of dash, hls, smoothstreaming or default
userAgentstringThe user agent HTTP header
contentTypestringMime type of the media file
durationnumberThe duration in seconds
titlestringThe track title
artiststringThe track artist
albumstringThe track album
descriptionstringThe track description
genrestringThe track genre
datestringThe track release date in RFC 3339
ratingDepends on the rating typeThe track rating value
artworkstring or Resource ObjectThe artwork url
pitchAlgorithmPitch AlgorithmThe pitch algorithm
headersobjectAn object containing all the headers to use in the HTTP request
isLiveStreambooleanUsed by iOS to present live stream option in control center
- + \ No newline at end of file diff --git a/docs/2.1/basics/background-mode.html b/docs/2.1/basics/background-mode.html index 9cb6d9979..860e5f310 100644 --- a/docs/2.1/basics/background-mode.html +++ b/docs/2.1/basics/background-mode.html @@ -5,13 +5,13 @@ Background Mode | React Native Track Player - +
Version: 2.1

Background Mode

React Native Track Player supports playing audio while your app is in the background on all supported platforms.

Android​

Background audio playback works right out of the box. By default, the audio will continue to play, not only when the app is suspended in the background, but also after the app is closed by the user. If that is not the desired behavior and you want the audio to stop playing when the app is closed, you can disable it with the stoppingAppPausesPlayback property in updateOptions. In this case, the audio will still play while the app is open in the background.:

TrackPlayer.updateOptions({
    stoppingAppPausesPlayback: true
});

Please note that while your app is in background, your UI might be unmounted by React Native. Event listeners added in the playback service will continue to receive events.

Notification​

The notification will be visible as long as the playback service runs. Your app will be opened when it is clicked. You can implement a custom initialization (e.g.: opening directly the player UI) by using the Linking API looking for the trackplayer://notification.click URI.

iOS​

To allow background audio playback on iOS, you need to activate the 'Audio, Airplay and Picture in Picture' background mode in Xcode. Without activating it, the audio will only play when the app is in the foreground.

Xcode Background Capability

iOS Simulator​

As of iOS Simulator version 11, Apple has removed support for Control Center and Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

Windows​

To allow background audio playback on Windows, you need to add the background capability in the app manifest, as documented by Microsoft

<Capabilities>
    <uap3:Capability Name="backgroundMediaPlayback"/>
</Capabilities>
- + \ No newline at end of file diff --git a/docs/2.1/basics/build-preferences.html b/docs/2.1/basics/build-preferences.html index ce74c26e6..f34a27253 100644 --- a/docs/2.1/basics/build-preferences.html +++ b/docs/2.1/basics/build-preferences.html @@ -5,13 +5,13 @@ Build Preferences | React Native Track Player - +
Version: 2.1

Build Preferences

You can optionally configure a few options for how the Track Player module is built in your app. Add a JSON file named track-player.json to the root folder of your app (the same folder where index.android.js and node_modules are stored) and set one or more of the following properties:

{
  "dash": false,
  "hls": false,
  "smoothstreaming": false
}

dash (Android)​

Whether it will add support for DASH streams. This option adds an extension for handling DASH streams, which changes the app size. Defaults to false.

hls (Android)​

Whether it will add support for Smooth Streaming streams. This option adds an extension for handling SmoothStreaming streams, which changes the app size. Defaults to false.

smoothstreaming (Android)​

Whether it will add support for SmoothStreaming streams. This option adds an extension for handling SmoothStreaming streams, which changes the app size.

- + \ No newline at end of file diff --git a/docs/2.1/basics/getting-started.html b/docs/2.1/basics/getting-started.html index 19b95e38d..045cfc9e6 100644 --- a/docs/2.1/basics/getting-started.html +++ b/docs/2.1/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -30,7 +30,7 @@ (not swipable). Because you can not stop the player service by swiping the Android notification, we highly recommend you to have a stop button in the notification. The button should destroy() the player.

- + \ No newline at end of file diff --git a/docs/2.1/basics/installation.html b/docs/2.1/basics/installation.html index 8e093824d..36bfc1b6b 100644 --- a/docs/2.1/basics/installation.html +++ b/docs/2.1/basics/installation.html @@ -5,13 +5,13 @@ Installation | React Native Track Player - +
Version: 2.1

Installation

Stable​

npm install --save react-native-track-player

Unstable​

npm install --save react-native-track-player#dev

iOS Setup​

iOS requires a few extra steps that are not required for Android/Windows.

Enable Swift Modules​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can be easily by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Pod Install​

You'll need to run a pod install in order to install the native iOS dependencies

cd ios && pod install

Expo​

You can now use React Native Track Player with Expo.

Start by creating a custom development client for your Expo app and then install React Native Track Player.

Here is the configuration required for audio playback in background:

- + \ No newline at end of file diff --git a/docs/2.1/basics/platform-support.html b/docs/2.1/basics/platform-support.html index bd40fea0d..684b489a7 100644 --- a/docs/2.1/basics/platform-support.html +++ b/docs/2.1/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
Version: 2.1

Platform Support

Audio Sources​

FeatureAndroidiOSWindows
App bundle¹✅✅✅
Network✅✅✅
File System²✅✅✅

¹: Use require or import

²: Prefix the file path with file:///

Stream Types​

FeatureAndroidiOSWindows
Regular Streams✅✅✅
DASH✅❌✅
HLS✅✅✅
SmoothStreaming✅❌❌

Casting​

FeatureAndroidiOSWindows
Google Cast¹✅❌❌
Miracast/DLNA❌❌❌
AirPlay❌❌❌

¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

Miscellaneous​

FeatureAndroidiOSWindows
Media Controls✅✅✅
Caching✅❌❌
Background Mode¹✅✅✅

¹: Read more in Background Mode

Functions​

FunctionAndroidiOSWindows
setupPlayer✅✅✅
updateOptions✅✅✅
registerPlaybackService✅✅✅
addEventListener✅✅✅
play✅✅✅
pause✅✅✅
stop✅✅✅
reset✅✅✅
setVolume✅✅✅
getVolume✅✅✅
setRate✅✅✅
getRate✅✅✅
seekTo✅✅✅
getPosition✅✅✅
getBufferedPosition✅✅✅
getDuration✅✅✅
getState✅✅✅
getQueue✅✅✅
getCurrentTrack✅✅✅
getTrack✅✅✅
add✅✅✅
remove✅✅✅
skip✅✅✅
skipToPrevious✅✅✅
skipToNext✅✅✅
removeUpcomingTracks✅✅✅
destroy✅✅✅

Events​

EventAndroidiOSWindows
remote-play✅✅✅
remote-play-id✅❌❌
remote-play-search✅❌❌
remote-pause✅✅✅
remote-stop✅✅✅
remote-skip✅❌❌
remote-next✅✅✅
remote-previous✅✅✅
remote-seek✅✅✅
remote-set-rating✅❌❌
remote-jump-forward✅✅✅
remote-jump-backward✅✅✅
remote-duck✅✅❌
playback-state✅✅✅
playback-track-changed✅✅✅
playback-queue-ended✅✅✅
playback-error✅✅✅
playback-metadata-received✅✅❌
- + \ No newline at end of file diff --git a/docs/2.1/basics/playback-service.html b/docs/2.1/basics/playback-service.html index 555a005a4..1fb0241ff 100644 --- a/docs/2.1/basics/playback-service.html +++ b/docs/2.1/basics/playback-service.html @@ -5,13 +5,13 @@ Playback Service | React Native Track Player - +
Version: 2.1

Playback Service

The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

Remote Events​

Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

If you create a listener to a remote event like remote-pause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

Example​

// This needs to go right after you register the main component of your app
// AppRegistry.registerComponent(...)
TrackPlayer.registerPlaybackService(() => require('./service'));
// service.js
module.exports = async function() {

    TrackPlayer.addEventListener('remote-play', () => TrackPlayer.play());

    TrackPlayer.addEventListener('remote-pause', () => TrackPlayer.pause());

    TrackPlayer.addEventListener('remote-stop', () => TrackPlayer.destroy());

    // ...

};
- + \ No newline at end of file diff --git a/docs/2.1/core-team.html b/docs/2.1/core-team.html index 69c704eb9..133744afd 100644 --- a/docs/2.1/core-team.html +++ b/docs/2.1/core-team.html @@ -5,13 +5,13 @@ Core Team ✨ | React Native Track Player - +
- + \ No newline at end of file diff --git a/docs/2.1/guides/amazon-fire-support.html b/docs/2.1/guides/amazon-fire-support.html index 0a5695408..feeaadfa6 100644 --- a/docs/2.1/guides/amazon-fire-support.html +++ b/docs/2.1/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
Version: 2.1

Amazon FireOS Support

Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

Setup​

In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

Edit app/build.gradle​

Add productFlavors to your build file:

android {
  flavorDimensions "store"
  productFlavors {
    google {
      dimension "store"
    }
    amazon {
      dimension "store"
    }
  }
  ...
}

Override the exoplayer library, and version, by modifying the dependencies:

dependencies {
  compile (project(':react-native-track-player')) {
    exclude group: 'com.google.android.exoplayer'
  }
  googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
  amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
  ...
}

Build Using Variants​

To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

"scripts": {
  "android-google": "react-native run-android --variant=googleDebug",
  "android-amazon": "react-native run-android --variant=amazonDebug",
  "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
  "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
  ...
}
- + \ No newline at end of file diff --git a/docs/2.1/guides/offline-playback.html b/docs/2.1/guides/offline-playback.html index 5436aa59c..8936aab49 100644 --- a/docs/2.1/guides/offline-playback.html +++ b/docs/2.1/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

Hybrid Offline/Network​

To do this you'll first need to install a package like:

The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

- + \ No newline at end of file diff --git a/docs/2.1/intro.html b/docs/2.1/intro.html index 98425ecb9..8fbe94f0d 100644 --- a/docs/2.1/intro.html +++ b/docs/2.1/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 2.1

Intro

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

Features​

  • Lightweight - Optimized to use the least amount of resources according to your needs
  • Feels native - As everything is built together, it follows the same design principles as real music apps do
  • Multi-platform - Supports Android, iOS and Windows
  • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
  • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
  • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
  • Caching support - Cache media files to play them again without an internet connection
  • Background support - Keep playing audio even after the app is in background
  • Fully Customizable - Even the notification icons are customizable!
  • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
  • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

Example​

If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

import TrackPlayer, { RepeatMode } from 'react-native-track-player';

// Creates the player
const setup = async () => {
  await TrackPlayer.setupPlayer({});

  await TrackPlayer.add({
    url: require('track.mp3'),
    title: 'Track Title',
    artist: 'Track Artist',
    artwork: require('track.png')
  });

  TrackPlayer.setRepeatMode(RepeatMode.Queue);
};
- + \ No newline at end of file diff --git a/docs/2.1/sponsors.html b/docs/2.1/sponsors.html index 3cbef0554..79a5e10bd 100644 --- a/docs/2.1/sponsors.html +++ b/docs/2.1/sponsors.html @@ -5,13 +5,13 @@ Sponsors ❤️ | React Native Track Player - +
Version: 2.1

Sponsors ❤️

Thanks to our backers and sponsors for their generous support!

Backers​

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors​

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

- + \ No newline at end of file diff --git a/docs/2.1/troubleshooting.html b/docs/2.1/troubleshooting.html index 59f1bbb43..85ba10b74 100644 --- a/docs/2.1/troubleshooting.html +++ b/docs/2.1/troubleshooting.html @@ -5,13 +5,13 @@ Troubleshooting | React Native Track Player - +
Version: 2.1

Troubleshooting

iOS: (Enable Swift) library not found for -lswiftCoreAudio for architecture x86_64​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can easily be done by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Android: CIRCULAR REFERENCE:com.android.tools.r8.ApiLevelException: Default interface methods are only supported starting with Android N (--min-api 24)​

Since version 1.0.0, we began using a few Java 8 features in the project to reduce the code size.

To fix the issue, add the following options to your android/app/build.gradle file:

android {
    ...
+   compileOptions {
+       sourceCompatibility JavaVersion.VERSION_1_8
+       targetCompatibility JavaVersion.VERSION_1_8
+   }
    ...
}

Android: com.facebook.react.common.JavascriptException: No task registered for key TrackPlayer​

The playback service requires a headless task to be registered. You have to register it with registerPlaybackService.

Android: Error: Attribute XXX from [androidx.core:core:XXX] is also present at [com.android.support:support-compat:XXX]​

This error occurs when you're mixing both AndroidX and the Support Library in the same project.

You have to either upgrade everything to AndroidX or downgrade everything to the support library.

  • For react-native-track-player, the last version to run the support library is 1.1.4 and the first version to run AndroidX is 1.2.0.
  • For react-native, the last version to run the support library is 0.59 and the first version to run AndroidX is 0.60.

You can also use jetifier to convert all of the native code to use only one of them.

Android: Cleartext HTTP traffic not permitted​

Since API 28, Android disables traffic without TLS. To fix the issue you have to use https or enable clear text traffic.

[ERROR] Could not find com.google.android.exoplayer:exoplayer:2.11.4​

If you encounter this error while running a task such as npx react-native run-android or any other task that requires building your app, you can fix it by editing android/build.gradle file as follows:

// build.gradle
buildScript {
    ...
    repositories {
        ...
        jcenter() // <-- add this line
    }
 }
...
allprojects {
    ...
    repositories {
        ...
        jcenter() // <-- and this line
    }
}
- + \ No newline at end of file diff --git a/docs/2.1/v2-migration.html b/docs/2.1/v2-migration.html index 10779e91e..9289baa2c 100644 --- a/docs/2.1/v2-migration.html +++ b/docs/2.1/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
Version: 2.1

Migrating from v1 to v2

All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

We recommend using Typescript to have the system alert you of issues.

When migrating from v1 to v2, the following has changed:

// Methods

- async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
+ async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

- async function remove(tracks: string | string[]): Promise<void> {
+ async function remove(tracks: number | number[]): Promise<void> {

- async function skip(trackId: string): Promise<void> {
+ function skip(trackIndex: number): Promise<void> {

- async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
+ async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

- async function getTrack(trackId: string): Promise<Track> {
+ async function getTrack(trackIndex: number): Promise<Track> {

- async function getCurrentTrack(): Promise<string> {
+ async function getCurrentTrack(): Promise<number> {

// Imports

import TrackPlayer, {
-  STATE_XXX,
-  CAPABILITY_XXX,
-  PITCH_ALGORITHM_XXX,
-  RATING_XXX,
+  State,
+  Capability,
+  PitchAlgorithm,
+  RatingType,
+  Event,
+  RepeatMode
} from 'react-native-track-player'

// Hooks

- useTrackPlayerProgress
+ useProgress

// Event Listeners
// Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

+ usePlaybackState
+ useTrackPlayerEvents
+ useProgress
- + \ No newline at end of file diff --git a/docs/3.1/api/constants/capability.html b/docs/3.1/api/constants/capability.html index 1a2ec7d9f..357bc5544 100644 --- a/docs/3.1/api/constants/capability.html +++ b/docs/3.1/api/constants/capability.html @@ -5,13 +5,13 @@ Capability | React Native Track Player - +
Version: 3.1

Capability

All Capability types are made available through the named export Capability:

import { Capability } from 'react-native-track-player';
NameDescription
PlayCapability indicating the ability to play
PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
PauseCapability indicating the ability to pause
StopCapability indicating the ability to stop
SeekToCapability indicating the ability to seek to a position in the timeline
SkipCapability indicating the ability to skip to any song in the queue
SkipToNextCapability indicating the ability to skip to the next track
SkipToPreviousCapability indicating the ability to skip to the previous track
SetRatingCapability indicating the ability to set the rating value based on the rating type
JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
Like(ios-only) Capability indicating the ability to like from control center
Dislike(ios-only) Capability indicating the ability to dislike from control center
Bookmark(ios-only) Capability indicating the ability to bookmark from control center
- + \ No newline at end of file diff --git a/docs/3.1/api/constants/ios-category-mode.html b/docs/3.1/api/constants/ios-category-mode.html index 819733efe..2286d5959 100644 --- a/docs/3.1/api/constants/ios-category-mode.html +++ b/docs/3.1/api/constants/ios-category-mode.html @@ -5,7 +5,7 @@ iOS Category Mode (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ input or output.

See the Apple Docs

MoviePlayback​

A mode that indicates that your app is playing back movie content.

See the Apple Docs

SpokenAudio​

A mode used for continuous spoken audio to pause the audio when another app plays a short audio prompt.

See the Apple Docs

VideoChat​

A mode that indicates that your app is engaging in online video conferencing.

See the Apple Docs

VideoRecording​

A mode that indicates that your app is recording a movie.

See the Apple Docs

VoiceChat​

A mode that indicates that your app is performing two-way voice communication, such as using Voice over Internet Protocol (VoIP).

See the Apple Docs

VoicePrompt​

A mode that indicates that your app plays audio using text-to-speech.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.1/api/constants/ios-category-options.html b/docs/3.1/api/constants/ios-category-options.html index 38cab6e14..f94a6f788 100644 --- a/docs/3.1/api/constants/ios-category-options.html +++ b/docs/3.1/api/constants/ios-category-options.html @@ -5,7 +5,7 @@ iOS Category Options (ios-only) | React Native Track Player - + @@ -18,7 +18,7 @@ to Bluetooth devices that support the Advanced Audio Distribution Profile (A2DP).

See the Apple Docs

AllowAirPlay​

An option that determines whether you can stream audio from this session to AirPlay devices.

See the Apple Docs

DefaultToSpeaker​

An option that determines whether audio from the session defaults to the built-in speaker instead of the receiver.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.1/api/constants/ios-category.html b/docs/3.1/api/constants/ios-category.html index 17ff1f46a..ceb17258d 100644 --- a/docs/3.1/api/constants/ios-category.html +++ b/docs/3.1/api/constants/ios-category.html @@ -5,7 +5,7 @@ iOS Category (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ Voice over Internet Protocol (VoIP) app.

See the Apple Docs

MultiRoute​

The category for routing distinct streams of audio data to different output devices at the same time.

See the Apple Docs

Ambient​

The category for an app in which sound playback is nonprimary — that is, your app also works with the sound turned off.

See the Apple Docs

SoloAmbient​

The default audio session category.

See the Apple Docs

Record​

The category for recording audio while also silencing playback audio.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.1/api/constants/pitch-algorithm.html b/docs/3.1/api/constants/pitch-algorithm.html index eb0543af9..c0ea636ef 100644 --- a/docs/3.1/api/constants/pitch-algorithm.html +++ b/docs/3.1/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
Version: 3.1

Pitch Algorithm (ios-only)

All PitchAlgorithm types are made available through the named export PitchAlgorithm:

import { PitchAlgorithm } from 'react-native-track-player';
NameDescription
LinearAn algorithm suitable for general use.
MusicAn algorithm suitable for music.
VoiceAn algorithm suitable for voice.
- + \ No newline at end of file diff --git a/docs/3.1/api/constants/rating.html b/docs/3.1/api/constants/rating.html index 303f76a91..8c4ffcd61 100644 --- a/docs/3.1/api/constants/rating.html +++ b/docs/3.1/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
Version: 3.1

Rating

All RatingType types are made available through the named export RatingType:

import { RatingType } from 'react-native-track-player';
NameDescription
HeartRating type indicating "with heart" or "without heart", its value is a boolean.
ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
PercentageRating type indicating percentage, its value is a number.
- + \ No newline at end of file diff --git a/docs/3.1/api/constants/repeat-mode.html b/docs/3.1/api/constants/repeat-mode.html index 9d4863ff3..9c77f2718 100644 --- a/docs/3.1/api/constants/repeat-mode.html +++ b/docs/3.1/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
Version: 3.1

Repeat Mode

All RepeatMode types are made available through the named export RepeatMode:

import { RepeatMode } from 'react-native-track-player';
NameDescription
OffDoesn't repeat.
TrackLoops the current track.
QueueRepeats the whole queue.
- + \ No newline at end of file diff --git a/docs/3.1/api/constants/state.html b/docs/3.1/api/constants/state.html index dcb4b2023..809899e5c 100644 --- a/docs/3.1/api/constants/state.html +++ b/docs/3.1/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
Version: 3.1

State

All State types are made available through the named export State:

import { State } from 'react-native-track-player';
NameDescription
NoneState indicating that no media is currently loaded
ReadyState indicating that the player is ready to start playing
PlayingState indicating that the player is currently playing
PausedState indicating that the player is currently paused
StoppedState indicating that the player is currently stopped
BufferingState indicating that the player is currently buffering (in "play" state)
ConnectingState indicating that the player is currently buffering (in "pause" state)
- + \ No newline at end of file diff --git a/docs/3.1/api/events.html b/docs/3.1/api/events.html index 7574fe181..e632b0fe3 100644 --- a/docs/3.1/api/events.html +++ b/docs/3.1/api/events.html @@ -5,14 +5,14 @@ Events | React Native Track Player - +
Version: 3.1

Events

All event types are made available through the named export Event:

import { Event } from 'react-native-track-player';

Player​

PlaybackState​

Fired when the state of the player changes.

ParamTypeDescription
stateStateThe new state

PlaybackTrackChanged​

Fired when another track has become active or when there no longer is an active track.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds
nextTracknumberThe next track index. Might be null

PlaybackQueueEnded​

Fired when the queue reaches the end.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds

PlaybackMetadataReceived​

Fired when the current track receives metadata encoded in. (e.g. ID3 tags, Icy Metadata, Vorbis Comments or QuickTime metadata).

ParamTypeDescription
sourcestringThe metadata source (id3, icy, icy-headers, vorbis-comment, quicktime)
titlestringThe track title. Might be null
urlstringThe track url. Might be null
artiststringThe track artist. Might be null
albumstringThe track album. Might be null
datestringThe track date. Might be null
genrestringThe track genre. Might be null

PlaybackProgressUpdated​

⚠️ Note: This event is only emitted if you specify a non-zero progressUpdateEventInterval value in your player options.

Fired at the progressUpdateEventInterval if the player is playing and if a progressUpdateEventInterval has been specified.

ParamTypeDescription
positionnumberSee getPosition
durationnumberSee getDuration
buffernumberSee getBufferedPosition
tracknumberThe current index in the queue of the track.

PlaybackError​

Fired when an error occurs.

ParamTypeDescription
codestringThe error code
messagestringThe error message

Media Controls​

RemotePlay​

Fired when the user presses the play button. Only fired if the Capability.Play is allowed.

RemotePlayId​

Fired when the user selects a track from an external device. Required for Android Auto support. Only fired if the Capability.PlayFromId is allowed.

ParamTypeDescription
idstringThe track id

RemotePlaySearch​

Fired when the user searches for a track (usually voice search). Required for Android Auto support. Only fired if the Capability.PlayFromSearch is allowed.

Every parameter except query is optional and may not be provided. In the case where query is empty, feel free to select any track to play.

ParamTypeDescription
querystringThe search query
focusstringThe focus of the search. One of artist, album, playlist or genre
titlestringThe track title
artiststringThe track artist
albumstringThe track album
genrestringThe track genre
playliststringThe track playlist

RemotePause​

Fired when the user presses the pause button. Only fired if the Capability.Pause is allowed or if there's a change in outputs (e.g.: headphone disconnected).

RemoteStop​

Fired when the user presses the stop button. Only fired if the Capability.Stop is allowed.

RemoteSkip​

Fired when the user skips to a track in the queue. Only fired if the Capability.Skip is allowed.

ParamTypeDescription
indexnumberThe track index

RemoteNext​

Fired when the user presses the next track button. Only fired if the Capability.SkipToNext is allowed.

RemotePrevious​

Fired when the user presses the previous track button. Only fired if the Capability.SkipToPrevious is allowed.

RemoteSeek​

Fired when the user changes the position of the timeline. Only fired if the Capability.SeekTo is allowed.

ParamTypeDescription
positionnumberThe position to seek to in seconds

RemoteSetRating​

Fired when the user changes the rating for the track. Only fired if the Capability.SetRating is allowed.

ParamTypeDescription
ratingDepends on the Rating TypeThe rating that was set

RemoteJumpForward​

Fired when the user presses the jump forward button. Only fired if the Capability.JumpForward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump forward. It's usually the forwardJumpInterval set in the options.

RemoteJumpBackward​

Fired when the user presses the jump backward button. Only fired if the Capability.JumpBackward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump backward. It's usually the backwardJumpInterval set in the options.

RemoteLike (iOS only)​

Fired when the user presses the like button in the now playing center. Only fired if the likeOptions is set in updateOptions.

RemoteDislike (iOS only)​

Fired when the user presses the dislike button in the now playing center. Only fired if the dislikeOptions is set in updateOptions.

RemoteBookmark (iOS only)​

Fired when the user presses the bookmark button in the now playing center. Only fired if the bookmarkOptions is set in updateOptions.

RemoteDuck​

Subscribing to this event to handle interruptions ensures that your app’s audio continues behaving gracefully when a phone call arrives, a clock or calendar alarm sounds, or another app plays audio.

On Android, this event is fired when the device needs the player to pause or stop for an interruption and again when the interruption has passed and playback may resume. On iOS this event is fired after playback was already interrupted (meaning pausing playback is unnecessary) and again when playback may resume or to notify that the interruption was permanent.

On Android, the volume may also be lowered on an transient interruption without triggering this event. If you want to receive those interruptions, set the alwaysPauseOnInterruption option to true.

  • When the event is triggered with paused set to true, on Android the player should pause playback. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is not set to true, the player may resume playback.
ParamTypeDescription
pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.

Implementation examples can be found in the example project.

- + \ No newline at end of file diff --git a/docs/3.1/api/functions/lifecycle.html b/docs/3.1/api/functions/lifecycle.html index fe9573f1e..21802ecc2 100644 --- a/docs/3.1/api/functions/lifecycle.html +++ b/docs/3.1/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
Version: 3.1

Lifecycle

setupPlayer(options: PlayerOptions)​

Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

You should always call this function (even without any options set) before using the player to make sure everything is initialized.

If the player is already initialized, the promise will resolve instantly.

Returns: Promise

ParamTypeDescriptionDefaultAndroidiOSWindows
optionsPlayerOptionsThe options
options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()playback❌✅❌
options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅❌❌

registerPlaybackService(serviceProvider)​

Register the playback service. The service will run as long as the player runs.

This function should only be called once, and should be registered right after registering your React application with AppRegistry.

You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

ParamTypeDescription
serviceProviderfunctionThe function that must return an async service function.

useTrackPlayerEvents(events: Event[], handler: Handler)​

Hook that fires on the specified events.

You can find a list of events in the events section.

- + \ No newline at end of file diff --git a/docs/3.1/api/functions/player.html b/docs/3.1/api/functions/player.html index 25d92da6c..01d0a1b81 100644 --- a/docs/3.1/api/functions/player.html +++ b/docs/3.1/api/functions/player.html @@ -5,14 +5,14 @@ Player | React Native Track Player - +
Version: 3.1

Player

updateOptions(options)​

Updates the configuration for the components.

All parameters are optional. You also only need to specify the ones you want to update.

These parameters are different than the ones set using setupPlayer(). Parameters other than those listed below will not be applied.

Some parameters are unused depending on platform.

ParamTypeDescriptionAndroidiOSWindows
optionsMetadataOptionsThe options
options.ratingTypeRatingTypeThe rating type✅❌❌
options.forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅❌
options.backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
options.stoppingAppPausesPlaybackbooleanWhether the player will pause playback when the app closes✅❌❌
options.alwaysPauseOnInterruptionbooleanWhether the remote-duck event will be triggered on every interruption✅❌❌
options.likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
options.capabilitiesCapability[]The media controls that will be enabled✅✅✅
options.notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
options.compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
options.iconResource ObjectThe notification icon¹✅❌❌
options.playIconResource ObjectThe play icon¹✅❌❌
options.pauseIconResource ObjectThe pause icon¹✅❌❌
options.stopIconResource ObjectThe stop icon¹✅❌❌
options.previousIconResource ObjectThe previous icon¹✅❌❌
options.nextIconResource ObjectThe next icon¹✅❌❌
options.rewindIconResource ObjectThe jump backward icon¹✅❌❌
options.forwardIconResource ObjectThe jump forward icon¹✅❌❌
options.colornumberThe notification color in an ARGB hex✅❌❌
options.progressUpdateEventIntervalnumberThe interval (in seconds) that the Event.PlaybackProgressUpdated will be fired. undefined by default.✅✅❌

¹ - The custom icons will only work in release builds

play()​

Plays or resumes the current track.

pause()​

Pauses the current track.

seekTo(seconds)​

Seeks to a specified time position in the current track.

ParamTypeDescription
secondsnumberThe position in seconds

setVolume(volume)​

Sets the volume of the player.

ParamTypeDescription
volumenumberThe volume in a range from 0 to 1

getVolume()​

Gets the volume of the player (a number between 0 and 1).

Returns: Promise<number>

setRate(rate)​

Sets the playback rate

ParamTypeDescription
ratenumberThe playback rate where 1 is the regular speed

getRate()​

Gets the playback rate, where 1 is the regular speed.

Returns: Promise<number>

getDuration()​

Gets the duration of the current track in seconds.

Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

You should only trust the result of this function if you included the duration property in the Track Object.

Returns: Promise<number>

getPosition()​

Gets the position of the current track in seconds.

Returns: Promise<number>

getBufferedPosition()​

Gets the buffered position of the current track in seconds.

Returns: Promise<number>

getState()​

Gets the playback State of the player.

Returns: Promise<State>

- + \ No newline at end of file diff --git a/docs/3.1/api/functions/queue.html b/docs/3.1/api/functions/queue.html index cf4fd358d..793e6a70d 100644 --- a/docs/3.1/api/functions/queue.html +++ b/docs/3.1/api/functions/queue.html @@ -5,7 +5,7 @@ Queue | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.1

Queue

add(tracks, insertBeforeIndex)​

Adds one or more tracks to the queue.

Returns: Promise<number | void> - The promise resolves with the first added track index. If no tracks were added it returns void.

ParamTypeDescription
tracksarray of Track Object or a single oneThe tracks that will be added
insertBeforeIndexnumberThe index of the track that will be located immediately after the inserted tracks. Set it to null to add it at the end of the queue

remove(tracks)​

Removes one or more tracks from the queue.

Returns: Promise<void>

ParamTypeDescription
tracksarray of track indexes or a single oneThe tracks that will be removed

skip(index, initialPosition)​

Skips to a track in the queue.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

skipToNext(initialPosition)​

Skips to the next track in the queue.

Returns: Promise<void>

ParamTypeDescription
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

skipToPrevious(initialPosition)​

Skips to the previous track in the queue.

Returns: Promise<void>

ParamTypeDescription
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

reset()​

Resets the player stopping the current track and clearing the queue.

getTrack(index)​

Gets a track object from the queue.

Returns: Promise<Track>

ParamTypeDescription
indexnumberThe track index

getCurrentTrack()​

Gets the index of the current track

Returns: Promise<number>

getQueue()​

Gets the whole queue

Returns: Promise<Track[]>

removeUpcomingTracks()​

Clears any upcoming tracks from the queue.

updateMetadataForTrack(index, metadata)​

Updates the metadata of a track in the queue. If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index
metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

setRepeatMode(mode)​

Sets the repeat mode.

ParamTypeDescription
modeRepeat ModeThe repeat mode

getRepeatMode()​

Gets the repeat mode.

Returns: Repeat Mode

- + \ No newline at end of file diff --git a/docs/3.1/api/hooks.html b/docs/3.1/api/hooks.html index b71100f1d..940b644e4 100644 --- a/docs/3.1/api/hooks.html +++ b/docs/3.1/api/hooks.html @@ -5,13 +5,13 @@ Hooks | React Native Track Player - +
Version: 3.1

Hooks

React v16.8 introduced hooks. If you are using a version of React Native that is before v0.59.0, your React Native version does not support hooks.

useTrackPlayerEvents​

Register an event listener for one or more of the events emitted by the TrackPlayer. The subscription is removed when the component unmounts.

Check out the events section for a full list of supported events.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { useTrackPlayerEvents, Event, State } from 'react-native-track-player';

// Subscribing to the following events inside MyComponent
const events = [
  Event.PlaybackState,
  Event.PlaybackError,
];

const MyComponent = () => {
  const [playerState, setPlayerState] = useState(null)

  useTrackPlayerEvents(events, (event) => {
    if (event.type === Event.PlaybackError) {
      console.warn('An error occured while playing the current track.');
    }
    if (event.type === Event.PlaybackState) {
      setPlayerState(event.state);
    }
  });

  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};

useProgress​

StateTypeDescription
positionnumberThe current position in seconds
bufferednumberThe buffered position in seconds
durationnumberThe duration in seconds

useProgress accepts an interval to set the rate (in miliseconds) to poll the track player's progress. The default value is 1000 or every second.

import React from 'react';
import { Text, View } from 'react-native';
import { useProgress } from 'react-native-track-player';

const MyComponent = () => {
  const { position, buffered, duration } = useProgress()

  return (
    <View>
      <Text>Track progress: {position} seconds out of {duration} total</Text>
      <Text>Buffered progress: {buffered} seconds buffered out of {duration} total</Text>
    </View>
  )
}

usePlaybackState​

Register an event listener for the PlaybackState event emitted by the TrackPlayer. The subscription is removed when the component unmounts.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { usePlaybackState, State } from 'react-native-track-player';

const MyComponent = () => {
  const playerState = usePlaybackState();
  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};
- + \ No newline at end of file diff --git a/docs/3.1/api/objects/feedback.html b/docs/3.1/api/objects/feedback.html index b47c95078..d8eab8097 100644 --- a/docs/3.1/api/objects/feedback.html +++ b/docs/3.1/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
Version: 3.1

Feedback

Controls the rendering of the control center item.

ParamTypeDescription
isActivebooleanMarks wether the option should be marked as active or "done"
titlebooleanThe title to give the action (relevant for iOS)
- + \ No newline at end of file diff --git a/docs/3.1/api/objects/resource.html b/docs/3.1/api/objects/resource.html index af3ab7d54..3fd9e1b9c 100644 --- a/docs/3.1/api/objects/resource.html +++ b/docs/3.1/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
Version: 3.1

Resource

Resource objects are the result of require/import for files.

For more information about Resource Objects, read the Images section of the React Native documentation

- + \ No newline at end of file diff --git a/docs/3.1/api/objects/track.html b/docs/3.1/api/objects/track.html index 4059a8d70..70c6d6f90 100644 --- a/docs/3.1/api/objects/track.html +++ b/docs/3.1/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
Version: 3.1

Track

Tracks in the player queue are plain javascript objects as described below.

Only the url, title and artist properties are required for basic playback

ParamTypeDescription
idstringThe track id
urlstring or Resource ObjectThe media URL
typestringStream type. One of dash, hls, smoothstreaming or default
userAgentstringThe user agent HTTP header
contentTypestringMime type of the media file
durationnumberThe duration in seconds
titlestringThe track title
artiststringThe track artist
albumstringThe track album
descriptionstringThe track description
genrestringThe track genre
datestringThe track release date in RFC 3339
ratingDepends on the rating typeThe track rating value
artworkstring or Resource ObjectThe artwork url
pitchAlgorithmPitch AlgorithmThe pitch algorithm
headersobjectAn object containing all the headers to use in the HTTP request
isLiveStreambooleanUsed by iOS to present live stream option in control center
- + \ No newline at end of file diff --git a/docs/3.1/basics/background-mode.html b/docs/3.1/basics/background-mode.html index 62a0f74ab..914a0e018 100644 --- a/docs/3.1/basics/background-mode.html +++ b/docs/3.1/basics/background-mode.html @@ -5,13 +5,13 @@ Background Mode | React Native Track Player - +
Version: 3.1

Background Mode

React Native Track Player supports playing audio while your app is in the background on all supported platforms.

Android​

Background audio playback works right out of the box. By default, the audio will continue to play, not only when the app is suspended in the background, but also after the app is closed by the user. If that is not the desired behavior and you want the audio to stop playing when the app is closed, you can disable it with the stoppingAppPausesPlayback property in updateOptions. In this case, the audio will still play while the app is open in the background.:

TrackPlayer.updateOptions({
    stoppingAppPausesPlayback: true
});

Please note that while your app is in background, your UI might be unmounted by React Native. Event listeners added in the playback service will continue to receive events.

Notification​

The notification will be visible as long as the playback service runs. Your app will be opened when it is clicked. You can implement a custom initialization (e.g.: opening directly the player UI) by using the Linking API looking for the trackplayer://notification.click URI.

iOS​

To allow background audio playback on iOS, you need to activate the 'Audio, Airplay and Picture in Picture' background mode in Xcode. Without activating it, the audio will only play when the app is in the foreground.

Xcode Background Capability

iOS Simulator​

As of iOS Simulator version 11, Apple has removed support for Control Center and Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

Windows​

To allow background audio playback on Windows, you need to add the background capability in the app manifest, as documented by Microsoft

<Capabilities>
    <uap3:Capability Name="backgroundMediaPlayback"/>
</Capabilities>
- + \ No newline at end of file diff --git a/docs/3.1/basics/getting-started.html b/docs/3.1/basics/getting-started.html index 3ca605290..b94cb6441 100644 --- a/docs/3.1/basics/getting-started.html +++ b/docs/3.1/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -25,7 +25,7 @@ platform specific functionalities like Android Auto.

You can change options multiple times. You do not need to specify all the options, just the ones you want to change.

For more information about the properties you can set, check the documentation.

Example​

import TrackPlayer, { Capability } from 'react-native-track-player';

TrackPlayer.updateOptions({
    // Media controls capabilities
    capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
    ],

    // Capabilities that will show up when the notification is in the compact form on Android
    compactCapabilities: [Capability.Play, Capability.Pause],

    // Icons for the notification on Android (if you don't like the default ones)
    playIcon: require('./play-icon.png'),
    pauseIcon: require('./pause-icon.png'),
    stopIcon: require('./stop-icon.png'),
    previousIcon: require('./previous-icon.png'),
    nextIcon: require('./next-icon.png'),
    icon: require('./notification-icon.png')
});
- + \ No newline at end of file diff --git a/docs/3.1/basics/installation.html b/docs/3.1/basics/installation.html index 6fe51036a..7f04cf644 100644 --- a/docs/3.1/basics/installation.html +++ b/docs/3.1/basics/installation.html @@ -5,7 +5,7 @@ Installation | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.1

Installation

Stable​

npm install --save react-native-track-player

Unstable / Nightly​

If for some reason you require an update that has not yet been officially released you can install the nightly version which is an automatic release of main published to npm every 24hrs.

npm install --save react-native-track-player@nightly

iOS Setup​

iOS requires a few extra steps that are not required for Android/Windows.

Enable Swift Modules​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can be easily by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Pod Install​

You'll need to run a pod install in order to install the native iOS dependencies

cd ios && pod install

Expo​

You can now use React Native Track Player with Expo.

Start by creating a custom development client for your Expo app and then install React Native Track Player.

Here is the configuration required for audio playback in background:

- + \ No newline at end of file diff --git a/docs/3.1/basics/platform-support.html b/docs/3.1/basics/platform-support.html index 1d70b4fd5..d5bcc1816 100644 --- a/docs/3.1/basics/platform-support.html +++ b/docs/3.1/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
Version: 3.1

Platform Support

Audio Sources​

FeatureAndroidiOSWindows
App bundle¹✅✅✅
Network✅✅✅
File System²✅✅✅

¹: Use require or import

²: Prefix the file path with file:///

Stream Types​

FeatureAndroidiOSWindows
Regular Streams✅✅✅
DASH✅❌✅
HLS✅✅✅
SmoothStreaming✅❌❌

Casting​

FeatureAndroidiOSWindows
Google Cast¹✅❌❌
Miracast/DLNA❌❌❌
AirPlay❌❌❌

¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

Miscellaneous​

FeatureAndroidiOSWindows
Media Controls✅✅✅
Caching✅❌❌
Background Mode¹✅✅✅

¹: Read more in Background Mode

Functions​

FunctionAndroidiOSWindows
setupPlayer✅✅✅
updateOptions✅✅✅
registerPlaybackService✅✅✅
addEventListener✅✅✅
play✅✅✅
pause✅✅✅
reset✅✅✅
setVolume✅✅✅
getVolume✅✅✅
setRate✅✅✅
getRate✅✅✅
seekTo✅✅✅
getPosition✅✅✅
getBufferedPosition✅✅✅
getDuration✅✅✅
getState✅✅✅
getQueue✅✅✅
getCurrentTrack✅✅✅
getTrack✅✅✅
add✅✅✅
remove✅✅✅
skip✅✅✅
skipToPrevious✅✅✅
skipToNext✅✅✅
removeUpcomingTracks✅✅✅

Events​

EventAndroidiOSWindows
remote-play✅✅✅
remote-play-id✅❌❌
remote-play-search✅❌❌
remote-pause✅✅✅
remote-stop✅✅✅
remote-skip✅❌❌
remote-next✅✅✅
remote-previous✅✅✅
remote-seek✅✅✅
remote-set-rating✅❌❌
remote-jump-forward✅✅✅
remote-jump-backward✅✅✅
remote-duck✅✅❌
playback-state✅✅✅
playback-track-changed✅✅✅
playback-queue-ended✅✅✅
playback-error✅✅✅
playback-metadata-received✅✅❌
- + \ No newline at end of file diff --git a/docs/3.1/basics/playback-service.html b/docs/3.1/basics/playback-service.html index a449b3fe1..c4a0238c6 100644 --- a/docs/3.1/basics/playback-service.html +++ b/docs/3.1/basics/playback-service.html @@ -5,13 +5,13 @@ Playback Service | React Native Track Player - +
Version: 3.1

Playback Service

The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

Remote Events​

Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

If you create a listener to a remote event like Event.RemotePause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

Example​

import { PlaybackService } from './src/services';

// This needs to go right after you register the main component of your app
// AppRegistry.registerComponent(...)
TrackPlayer.registerPlaybackService(() => PlaybackService);
// src/services/PlaybackService.ts
import { Event } from 'react-native-track-player';

export const PlaybackService = async function() {

    TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());

    TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

    // ...

};
- + \ No newline at end of file diff --git a/docs/3.1/core-team.html b/docs/3.1/core-team.html index 9e7f7f29c..340e0714f 100644 --- a/docs/3.1/core-team.html +++ b/docs/3.1/core-team.html @@ -5,13 +5,13 @@ Core Team ✨ | React Native Track Player - +
- + \ No newline at end of file diff --git a/docs/3.1/guides/amazon-fire-support.html b/docs/3.1/guides/amazon-fire-support.html index e5eae3c42..231a8465a 100644 --- a/docs/3.1/guides/amazon-fire-support.html +++ b/docs/3.1/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
Version: 3.1

Amazon FireOS Support

Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

Setup​

In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

Edit app/build.gradle​

Add productFlavors to your build file:

android {
  flavorDimensions "store"
  productFlavors {
    google {
      dimension "store"
    }
    amazon {
      dimension "store"
    }
  }
  ...
}

Override the exoplayer library, and version, by modifying the dependencies:

dependencies {
  compile (project(':react-native-track-player')) {
    exclude group: 'com.google.android.exoplayer'
  }
  googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
  amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
  ...
}

Build Using Variants​

To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

"scripts": {
  "android-google": "react-native run-android --variant=googleDebug",
  "android-amazon": "react-native run-android --variant=amazonDebug",
  "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
  "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
  ...
}
- + \ No newline at end of file diff --git a/docs/3.1/guides/multitrack-progress.html b/docs/3.1/guides/multitrack-progress.html index 225cf04df..3fd966343 100644 --- a/docs/3.1/guides/multitrack-progress.html +++ b/docs/3.1/guides/multitrack-progress.html @@ -5,7 +5,7 @@ Multitrack Progress | React Native Track Player - + @@ -38,7 +38,7 @@ playback service and update our zustand store:

// src/services/PlaybackService.ts
import TrackPlayer, { Event } from 'react-native-track-player';
import { useProgressStateStore } from '../store';

// create a local reference for the `setProgress` function
const setProgress = useProgressStateStore.getState().setProgress;

export const PlaybackService = async function() {
  TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async () => {
    // get the position and currently playing track.
    const position = TrackPlayer.getPosition();
    const track = TrackPlayer.getCurrentTrack();
    // write progress to the zustand store
    setProgress(track.id, position);
  });
};

⚠️ make sure you've configured your progressUpdateEventInterval in the TrackPlayer.setupPlayer call.

3. Reactively Update Progress​

Finally, we just need to read from the store whenever we display our track list item:

// src/components/TrackListItem.tsx
import type { Track } from 'react-native-track-player';
import { useTrackProgress } from '../hooks/useTrackProgress';

export interface TrackListItemProps {}

export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
  const progress = useTrackProgress(track.id);
  return (
    <Text>Progress: {progress}</Text>
  );
};

🎊 voilà

- + \ No newline at end of file diff --git a/docs/3.1/guides/offline-playback.html b/docs/3.1/guides/offline-playback.html index a794f4900..5fe591eb3 100644 --- a/docs/3.1/guides/offline-playback.html +++ b/docs/3.1/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

Hybrid Offline/Network​

To do this you'll first need to install a package like:

The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

- + \ No newline at end of file diff --git a/docs/3.1/guides/saving-progress.html b/docs/3.1/guides/saving-progress.html index 724e86b04..ad76c6ee5 100644 --- a/docs/3.1/guides/saving-progress.html +++ b/docs/3.1/guides/saving-progress.html @@ -5,7 +5,7 @@ Saving Progress | React Native Track Player - + @@ -27,7 +27,7 @@ Playback Service, based on the Event.PlaybackProgressUpdated event. These events fire all the time, including when your app is playing back remotely.

- + \ No newline at end of file diff --git a/docs/3.1/guides/sleeptimers.html b/docs/3.1/guides/sleeptimers.html index 2443dd4a5..cfb30ada1 100644 --- a/docs/3.1/guides/sleeptimers.html +++ b/docs/3.1/guides/sleeptimers.html @@ -5,7 +5,7 @@ Sleeptimers | React Native Track Player - + @@ -15,7 +15,7 @@ to understand the concept of "remote" playback and why coupling playback events to the UI is a bad idea.

Once you've understood that concept, this concept is nearly identical. You would leverage the same Event.PlaybackProgressUpdated event in this scenario too.

Here's how you would use an event to implement a sleep timer:

  1. The user configures a sleep timer in the UI.
  2. Persist the time they configure in a store as a timestamp.
  3. Each time the progress event fires you check your persisted sleep timer timestamp.
    • IF sleeptime !== null && sleeptime <= now THEN pause.
- + \ No newline at end of file diff --git a/docs/3.1/intro.html b/docs/3.1/intro.html index e54254c69..bd65abf28 100644 --- a/docs/3.1/intro.html +++ b/docs/3.1/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.1

Intro

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

Features​

  • Lightweight - Optimized to use the least amount of resources according to your needs
  • Feels native - As everything is built together, it follows the same design principles as real music apps do
  • Multi-platform - Supports Android, iOS and Windows
  • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
  • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
  • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
  • Caching support - Cache media files to play them again without an internet connection
  • Background support - Keep playing audio even after the app is in background
  • Fully Customizable - Even the notification icons are customizable!
  • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
  • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

Example​

If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

import TrackPlayer, { RepeatMode } from 'react-native-track-player';

// Creates the player
const setup = async () => {
  await TrackPlayer.setupPlayer({});

  await TrackPlayer.add({
    url: require('track.mp3'),
    title: 'Track Title',
    artist: 'Track Artist',
    artwork: require('track.png')
  });

  TrackPlayer.setRepeatMode(RepeatMode.Queue);
};
- + \ No newline at end of file diff --git a/docs/3.1/sponsors.html b/docs/3.1/sponsors.html index 65dddf022..c427131ac 100644 --- a/docs/3.1/sponsors.html +++ b/docs/3.1/sponsors.html @@ -5,13 +5,13 @@ Sponsors ❤️ | React Native Track Player - +
Version: 3.1

Sponsors ❤️

Thanks to our backers and sponsors for their generous support!

Backers​

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors​

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

- + \ No newline at end of file diff --git a/docs/3.1/troubleshooting.html b/docs/3.1/troubleshooting.html index 65f397b9d..a25be57fe 100644 --- a/docs/3.1/troubleshooting.html +++ b/docs/3.1/troubleshooting.html @@ -5,13 +5,13 @@ Troubleshooting | React Native Track Player - +
Version: 3.1

Troubleshooting

iOS: (Enable Swift) library not found for -lswiftCoreAudio for architecture x86_64​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can easily be done by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Android: CIRCULAR REFERENCE:com.android.tools.r8.ApiLevelException: Default interface methods are only supported starting with Android N (--min-api 24)​

Since version 1.0.0, we began using a few Java 8 features in the project to reduce the code size.

To fix the issue, add the following options to your android/app/build.gradle file:

android {
    ...
+   compileOptions {
+       sourceCompatibility JavaVersion.VERSION_1_8
+       targetCompatibility JavaVersion.VERSION_1_8
+   }
    ...
}

Android: com.facebook.react.common.JavascriptException: No task registered for key TrackPlayer​

The playback service requires a headless task to be registered. You have to register it with registerPlaybackService.

Android: Error: Attribute XXX from [androidx.core:core:XXX] is also present at [com.android.support:support-compat:XXX]​

This error occurs when you're mixing both AndroidX and the Support Library in the same project.

You have to either upgrade everything to AndroidX or downgrade everything to the support library.

  • For react-native-track-player, the last version to run the support library is 1.1.4 and the first version to run AndroidX is 1.2.0.
  • For react-native, the last version to run the support library is 0.59 and the first version to run AndroidX is 0.60.

You can also use jetifier to convert all of the native code to use only one of them.

Android: Cleartext HTTP traffic not permitted​

Since API 28, Android disables traffic without TLS. To fix the issue you have to use https or enable clear text traffic.

- + \ No newline at end of file diff --git a/docs/3.1/v2-migration.html b/docs/3.1/v2-migration.html index 438308e03..45669f3f0 100644 --- a/docs/3.1/v2-migration.html +++ b/docs/3.1/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
Version: 3.1

Migrating from v1 to v2

All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

We recommend using Typescript to have the system alert you of issues.

When migrating from v1 to v2, the following has changed:

// Methods

- async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
+ async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

- async function remove(tracks: string | string[]): Promise<void> {
+ async function remove(tracks: number | number[]): Promise<void> {

- async function skip(trackId: string): Promise<void> {
+ function skip(trackIndex: number): Promise<void> {

- async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
+ async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

- async function getTrack(trackId: string): Promise<Track> {
+ async function getTrack(trackIndex: number): Promise<Track> {

- async function getCurrentTrack(): Promise<string> {
+ async function getCurrentTrack(): Promise<number> {

// Imports

import TrackPlayer, {
-  STATE_XXX,
-  CAPABILITY_XXX,
-  PITCH_ALGORITHM_XXX,
-  RATING_XXX,
+  State,
+  Capability,
+  PitchAlgorithm,
+  RatingType,
+  Event,
+  RepeatMode
} from 'react-native-track-player'

// Hooks

- useTrackPlayerProgress
+ useProgress

// Event Listeners
// Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

+ usePlaybackState
+ useTrackPlayerEvents
+ useProgress
- + \ No newline at end of file diff --git a/docs/3.1/v3-migration.html b/docs/3.1/v3-migration.html index deadc1723..26f786095 100644 --- a/docs/3.1/v3-migration.html +++ b/docs/3.1/v3-migration.html @@ -5,7 +5,7 @@ Migrating from v2 to v3 | React Native Track Player - + @@ -17,7 +17,7 @@ can remove your track-player.json file if you have one. You still need to ensure that the correct type is specified on your Track object.

- track-player.json

Minimum Compile/Target SDK​

You also need to have a minimum compile & target SDK of 31 (Android 12)

// android/build.gradle
...
    compileSdkVersion = 31
    targetSdkVersion = 31
...
- + \ No newline at end of file diff --git a/docs/3.2/api/constants/app-killed-playback-behavior.html b/docs/3.2/api/constants/app-killed-playback-behavior.html index d752ca24a..1d5f06265 100644 --- a/docs/3.2/api/constants/app-killed-playback-behavior.html +++ b/docs/3.2/api/constants/app-killed-playback-behavior.html @@ -5,7 +5,7 @@ App Killed Playback Behavior (android-only) | React Native Track Player - + @@ -15,7 +15,7 @@ from recents. The notification remains and can be used to resume playback.

StopPlaybackAndRemoveNotification​

This option will stop playing audio in the background when the app is removed from recents. The notification is removed and can't be used to resume playback. Users would need to open the app again to start playing audio.

- + \ No newline at end of file diff --git a/docs/3.2/api/constants/capability.html b/docs/3.2/api/constants/capability.html index 52277ffa0..2dfbf6e2a 100644 --- a/docs/3.2/api/constants/capability.html +++ b/docs/3.2/api/constants/capability.html @@ -5,13 +5,13 @@ Capability | React Native Track Player - +
Version: 3.2

Capability

All Capability types are made available through the named export Capability:

import { Capability } from 'react-native-track-player';
NameDescription
PlayCapability indicating the ability to play
PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
PauseCapability indicating the ability to pause
StopCapability indicating the ability to stop (on iOS available only for tracks where .isLiveStream is true)
SeekToCapability indicating the ability to seek to a position in the timeline
SkipCapability indicating the ability to skip to any song in the queue
SkipToNextCapability indicating the ability to skip to the next track
SkipToPreviousCapability indicating the ability to skip to the previous track
SetRatingCapability indicating the ability to set the rating value based on the rating type
JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
Like(ios-only) Capability indicating the ability to like from control center
Dislike(ios-only) Capability indicating the ability to dislike from control center
Bookmark(ios-only) Capability indicating the ability to bookmark from control center
- + \ No newline at end of file diff --git a/docs/3.2/api/constants/ios-category-mode.html b/docs/3.2/api/constants/ios-category-mode.html index 36c2f550e..2e1dba4cb 100644 --- a/docs/3.2/api/constants/ios-category-mode.html +++ b/docs/3.2/api/constants/ios-category-mode.html @@ -5,7 +5,7 @@ iOS Category Mode (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ input or output.

See the Apple Docs

MoviePlayback​

A mode that indicates that your app is playing back movie content.

See the Apple Docs

SpokenAudio​

A mode used for continuous spoken audio to pause the audio when another app plays a short audio prompt.

See the Apple Docs

VideoChat​

A mode that indicates that your app is engaging in online video conferencing.

See the Apple Docs

VideoRecording​

A mode that indicates that your app is recording a movie.

See the Apple Docs

VoiceChat​

A mode that indicates that your app is performing two-way voice communication, such as using Voice over Internet Protocol (VoIP).

See the Apple Docs

VoicePrompt​

A mode that indicates that your app plays audio using text-to-speech.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.2/api/constants/ios-category-options.html b/docs/3.2/api/constants/ios-category-options.html index da2bc1f37..92dcbe895 100644 --- a/docs/3.2/api/constants/ios-category-options.html +++ b/docs/3.2/api/constants/ios-category-options.html @@ -5,7 +5,7 @@ iOS Category Options (ios-only) | React Native Track Player - + @@ -18,7 +18,7 @@ to Bluetooth devices that support the Advanced Audio Distribution Profile (A2DP).

See the Apple Docs

AllowAirPlay​

An option that determines whether you can stream audio from this session to AirPlay devices.

See the Apple Docs

DefaultToSpeaker​

An option that determines whether audio from the session defaults to the built-in speaker instead of the receiver.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.2/api/constants/ios-category.html b/docs/3.2/api/constants/ios-category.html index ac2068799..786fb88de 100644 --- a/docs/3.2/api/constants/ios-category.html +++ b/docs/3.2/api/constants/ios-category.html @@ -5,7 +5,7 @@ iOS Category (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ Voice over Internet Protocol (VoIP) app.

See the Apple Docs

MultiRoute​

The category for routing distinct streams of audio data to different output devices at the same time.

See the Apple Docs

Ambient​

The category for an app in which sound playback is nonprimary — that is, your app also works with the sound turned off.

See the Apple Docs

SoloAmbient​

The default audio session category.

See the Apple Docs

Record​

The category for recording audio while also silencing playback audio.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/3.2/api/constants/pitch-algorithm.html b/docs/3.2/api/constants/pitch-algorithm.html index 9aeedd868..561731866 100644 --- a/docs/3.2/api/constants/pitch-algorithm.html +++ b/docs/3.2/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
Version: 3.2

Pitch Algorithm (ios-only)

All PitchAlgorithm types are made available through the named export PitchAlgorithm:

import { PitchAlgorithm } from 'react-native-track-player';
NameDescription
LinearAn algorithm suitable for general use.
MusicAn algorithm suitable for music.
VoiceAn algorithm suitable for voice.
- + \ No newline at end of file diff --git a/docs/3.2/api/constants/rating.html b/docs/3.2/api/constants/rating.html index 08d947e90..114216a08 100644 --- a/docs/3.2/api/constants/rating.html +++ b/docs/3.2/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
Version: 3.2

Rating

All RatingType types are made available through the named export RatingType:

import { RatingType } from 'react-native-track-player';
NameDescription
HeartRating type indicating "with heart" or "without heart", its value is a boolean.
ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
PercentageRating type indicating percentage, its value is a number.
- + \ No newline at end of file diff --git a/docs/3.2/api/constants/repeat-mode.html b/docs/3.2/api/constants/repeat-mode.html index f88659d63..d6196d94f 100644 --- a/docs/3.2/api/constants/repeat-mode.html +++ b/docs/3.2/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
Version: 3.2

Repeat Mode

All RepeatMode types are made available through the named export RepeatMode:

import { RepeatMode } from 'react-native-track-player';
NameDescription
OffDoesn't repeat.
TrackLoops the current track.
QueueRepeats the whole queue.
- + \ No newline at end of file diff --git a/docs/3.2/api/constants/state.html b/docs/3.2/api/constants/state.html index 55f1a2992..78bcadca4 100644 --- a/docs/3.2/api/constants/state.html +++ b/docs/3.2/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
Version: 3.2

State

All State types are made available through the named export State:

import { State } from 'react-native-track-player';
NameDescription
NoneState indicating that no media is currently loaded
ReadyState indicating that the player is ready to start playing
PlayingState indicating that the player is currently playing
PausedState indicating that the player is currently paused
StoppedState indicating that the player is currently stopped
BufferingState indicating that the player is currently buffering (in "play" state)
ConnectingState indicating that the player is currently buffering (in "pause" state)
- + \ No newline at end of file diff --git a/docs/3.2/api/events.html b/docs/3.2/api/events.html index e14ae185b..565e4664c 100644 --- a/docs/3.2/api/events.html +++ b/docs/3.2/api/events.html @@ -5,14 +5,14 @@ Events | React Native Track Player - +
Version: 3.2

Events

All event types are made available through the named export Event:

import { Event } from 'react-native-track-player';

Player​

PlaybackState​

Fired when the state of the player changes.

ParamTypeDescription
stateStateThe new state

PlaybackTrackChanged​

Fired when a track is changed.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds
nextTracknumberThe next track index. Might be null

PlaybackQueueEnded​

Fired when the queue reaches the end.

ParamTypeDescription
tracknumberThe previous track index. Might be null
positionnumberThe previous track position in seconds

PlaybackMetadataReceived​

Fired when the current track receives metadata encoded in. (e.g. ID3 tags, Icy Metadata, Vorbis Comments or QuickTime metadata).

ParamTypeDescription
sourcestringThe metadata source (id3, icy, icy-headers, vorbis-comment, quicktime)
titlestringThe track title. Might be null
urlstringThe track url. Might be null
artiststringThe track artist. Might be null
albumstringThe track album. Might be null
datestringThe track date. Might be null
genrestringThe track genre. Might be null

PlaybackProgressUpdated​

⚠️ Note: This event is only emitted if you specify a non-zero progressUpdateEventInterval value in your player options.

Fired at the progressUpdateEventInterval if the player is playing and if a progressUpdateEventInterval has been specified.

ParamTypeDescription
positionnumberSee getPosition
durationnumberSee getDuration
buffernumberSee getBufferedPosition
tracknumberThe current index in the queue of the track.

PlaybackError​

Fired when an error occurs.

ParamTypeDescription
codestringThe error code
messagestringThe error message

Media Controls​

RemotePlay​

Fired when the user presses the play button. Only fired if the Capability.Play is allowed.

RemotePlayId​

Fired when the user selects a track from an external device. Required for Android Auto support. Only fired if the Capability.PlayFromId is allowed.

ParamTypeDescription
idstringThe track id

RemotePlaySearch​

Fired when the user searches for a track (usually voice search). Required for Android Auto support. Only fired if the Capability.PlayFromSearch is allowed.

Every parameter except query is optional and may not be provided. In the case where query is empty, feel free to select any track to play.

ParamTypeDescription
querystringThe search query
focusstringThe focus of the search. One of artist, album, playlist or genre
titlestringThe track title
artiststringThe track artist
albumstringThe track album
genrestringThe track genre
playliststringThe track playlist

RemotePause​

Fired when the user presses the pause button. Only fired if the Capability.Pause is allowed or if there's a change in outputs (e.g.: headphone disconnected).

RemoteStop​

Fired when the user presses the stop button. Only fired if the Capability.Stop is allowed.

RemoteSkip​

Fired when the user skips to a track in the queue. Only fired if the Capability.Skip is allowed.

ParamTypeDescription
indexnumberThe track index

RemoteNext​

Fired when the user presses the next track button. Only fired if the Capability.SkipToNext is allowed.

RemotePrevious​

Fired when the user presses the previous track button. Only fired if the Capability.SkipToPrevious is allowed.

RemoteSeek​

Fired when the user changes the position of the timeline. Only fired if the Capability.SeekTo is allowed.

ParamTypeDescription
positionnumberThe position to seek to in seconds

RemoteSetRating​

Fired when the user changes the rating for the track. Only fired if the Capability.SetRating is allowed.

ParamTypeDescription
ratingDepends on the Rating TypeThe rating that was set

RemoteJumpForward​

Fired when the user presses the jump forward button. Only fired if the Capability.JumpForward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump forward. It's usually the forwardJumpInterval set in the options.

RemoteJumpBackward​

Fired when the user presses the jump backward button. Only fired if the Capability.JumpBackward is allowed.

ParamTypeDescription
intervalnumberThe number of seconds to jump backward. It's usually the backwardJumpInterval set in the options.

RemoteLike (iOS only)​

Fired when the user presses the like button in the now playing center. Only fired if the likeOptions is set in updateOptions.

RemoteDislike (iOS only)​

Fired when the user presses the dislike button in the now playing center. Only fired if the dislikeOptions is set in updateOptions.

RemoteBookmark (iOS only)​

Fired when the user presses the bookmark button in the now playing center. Only fired if the bookmarkOptions is set in updateOptions.

RemoteDuck​

Subscribing to this event to handle interruptions ensures that your app’s audio continues behaving gracefully when a phone call arrives, a clock or calendar alarm sounds, or another app plays audio.

On Android, this event is fired when the device needs the player to pause or stop for an interruption and again when the interruption has passed and playback may resume. On iOS this event is fired after playback was already interrupted (meaning pausing playback is unnecessary) and again when playback may resume or to notify that the interruption was permanent.

On Android, the volume may also be lowered on an transient interruption without triggering this event. If you want to receive those interruptions, set the alwaysPauseOnInterruption option to true.

  • When the event is triggered with paused set to true, on Android the player should pause playback. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is not set to true, the player may resume playback.
ParamTypeDescription
pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.

Implementation examples can be found in the example project.

- + \ No newline at end of file diff --git a/docs/3.2/api/functions/lifecycle.html b/docs/3.2/api/functions/lifecycle.html index 4b21143f0..11f8f0899 100644 --- a/docs/3.2/api/functions/lifecycle.html +++ b/docs/3.2/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
Version: 3.2

Lifecycle

setupPlayer(options: PlayerOptions)​

Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

You should always call this function (even without any options set) before using the player to make sure everything is initialized.

If the player is already initialized, the promise will resolve instantly.

Returns: Promise

ParamTypeDescriptionDefaultAndroidiOSWindows
optionsPlayerOptionsThe options
options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()playback❌✅❌
options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅❌❌

registerPlaybackService(serviceProvider)​

Register the playback service. The service will run as long as the player runs.

This function should only be called once, and should be registered right after registering your React application with AppRegistry.

You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

ParamTypeDescription
serviceProviderfunctionThe function that must return an async service function.

useTrackPlayerEvents(events: Event[], handler: Handler)​

Hook that fires on the specified events.

You can find a list of events in the events section.

- + \ No newline at end of file diff --git a/docs/3.2/api/functions/player.html b/docs/3.2/api/functions/player.html index 5982878ed..8945e93b0 100644 --- a/docs/3.2/api/functions/player.html +++ b/docs/3.2/api/functions/player.html @@ -5,7 +5,7 @@ Player | React Native Track Player - + @@ -14,7 +14,7 @@ the configuration for the components.

⚠️ These parameters are different than the ones set using setupPlayer(). Parameters other than those listed below will not be applied.

play()​

Plays or resumes the current track.

pause()​

Pauses the current track.

seekTo(seconds)​

Seeks to a specified time position in the current track.

ParamTypeDescription
secondsnumberThe position in seconds

setVolume(volume)​

Sets the volume of the player.

ParamTypeDescription
volumenumberThe volume in a range from 0 to 1

getVolume()​

Gets the volume of the player (a number between 0 and 1).

Returns: Promise<number>

setRate(rate)​

Sets the playback rate

ParamTypeDescription
ratenumberThe playback rate where 1 is the regular speed

getRate()​

Gets the playback rate, where 1 is the regular speed.

Returns: Promise<number>

getDuration()​

Gets the duration of the current track in seconds.

Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

You should only trust the result of this function if you included the duration property in the Track Object.

Returns: Promise<number>

getPosition()​

Gets the position of the current track in seconds.

Returns: Promise<number>

getBufferedPosition()​

Gets the buffered position of the current track in seconds.

Returns: Promise<number>

getState()​

Gets the playback State of the player.

Returns: Promise<State>

- + \ No newline at end of file diff --git a/docs/3.2/api/functions/queue.html b/docs/3.2/api/functions/queue.html index 685fad776..0fc9a7685 100644 --- a/docs/3.2/api/functions/queue.html +++ b/docs/3.2/api/functions/queue.html @@ -5,7 +5,7 @@ Queue | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.2

Queue

add(tracks, insertBeforeIndex)​

Adds one or more tracks to the queue.

Returns: Promise<number | void> - The promise resolves with the first added track index. If no tracks were added it returns void.

ParamTypeDescription
tracksarray of Track Object or a single oneThe tracks that will be added
insertBeforeIndexnumberThe index of the track that will be located immediately after the inserted tracks. Set it to null to add it at the end of the queue

remove(tracks)​

Removes one or more tracks from the queue.

Returns: Promise<void>

ParamTypeDescription
tracksarray of track indexes or a single oneThe tracks that will be removed

skip(index, initialPosition)​

Skips to a track in the queue.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

skipToNext(initialPosition)​

Skips to the next track in the queue.

Returns: Promise<void>

ParamTypeDescription
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

skipToPrevious(initialPosition)​

Skips to the previous track in the queue.

Returns: Promise<void>

ParamTypeDescription
initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

reset()​

Resets the player stopping the current track and clearing the queue.

getTrack(index)​

Gets a track object from the queue.

Returns: Promise<Track>

ParamTypeDescription
indexnumberThe track index

getCurrentTrack()​

Gets the index of the current track

Returns: Promise<number>

getQueue()​

Gets the whole queue

Returns: Promise<Track[]>

removeUpcomingTracks()​

Clears any upcoming tracks from the queue.

updateMetadataForTrack(index, metadata)​

Updates the metadata of a track in the queue. If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

Returns: Promise<void>

ParamTypeDescription
indexnumberThe track index
metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

setRepeatMode(mode)​

Sets the repeat mode.

ParamTypeDescription
modeRepeat ModeThe repeat mode

getRepeatMode()​

Gets the repeat mode.

Returns: Repeat Mode

- + \ No newline at end of file diff --git a/docs/3.2/api/hooks.html b/docs/3.2/api/hooks.html index fb2c4cca0..62bc8a55d 100644 --- a/docs/3.2/api/hooks.html +++ b/docs/3.2/api/hooks.html @@ -5,13 +5,13 @@ Hooks | React Native Track Player - +
Version: 3.2

Hooks

React v16.8 introduced hooks. If you are using a version of React Native that is before v0.59.0, your React Native version does not support hooks.

useTrackPlayerEvents​

Register an event listener for one or more of the events emitted by the TrackPlayer. The subscription is removed when the component unmounts.

Check out the events section for a full list of supported events.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { useTrackPlayerEvents, Event, State } from 'react-native-track-player';

// Subscribing to the following events inside MyComponent
const events = [
  Event.PlaybackState,
  Event.PlaybackError,
];

const MyComponent = () => {
  const [playerState, setPlayerState] = useState(null)

  useTrackPlayerEvents(events, (event) => {
    if (event.type === Event.PlaybackError) {
      console.warn('An error occured while playing the current track.');
    }
    if (event.type === Event.PlaybackState) {
      setPlayerState(event.state);
    }
  });

  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};

useProgress​

StateTypeDescription
positionnumberThe current position in seconds
bufferednumberThe buffered position in seconds
durationnumberThe duration in seconds

useProgress accepts an interval to set the rate (in miliseconds) to poll the track player's progress. The default value is 1000 or every second.

import React from 'react';
import { Text, View } from 'react-native';
import { useProgress } from 'react-native-track-player';

const MyComponent = () => {
  const { position, buffered, duration } = useProgress()

  return (
    <View>
      <Text>Track progress: {position} seconds out of {duration} total</Text>
      <Text>Buffered progress: {buffered} seconds buffered out of {duration} total</Text>
    </View>
  )
}

usePlaybackState​

Register an event listener for the PlaybackState event emitted by the TrackPlayer. The subscription is removed when the component unmounts.

import React, { useState } from 'react';
import { Text, View } from 'react-native';
import { usePlaybackState, State } from 'react-native-track-player';

const MyComponent = () => {
  const playerState = usePlaybackState();
  const isPlaying = playerState === State.Playing;

  return (
    <View>
      <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
    </View>
  );
};
- + \ No newline at end of file diff --git a/docs/3.2/api/objects/android-options.html b/docs/3.2/api/objects/android-options.html index 7eef6fe57..756aeca95 100644 --- a/docs/3.2/api/objects/android-options.html +++ b/docs/3.2/api/objects/android-options.html @@ -5,13 +5,13 @@ AndroidOptions | React Native Track Player - +
Version: 3.2

AndroidOptions

Options available for the android player. All options are optional.

ParamTypeDefaultDescription
appKilledPlaybackBehaviorAppKilledPlaybackBehaviorContinuePlaybackDefine how the audio playback should behave after removing the app from recents (killing it).
- + \ No newline at end of file diff --git a/docs/3.2/api/objects/feedback.html b/docs/3.2/api/objects/feedback.html index 9e8f8acfb..287aa2104 100644 --- a/docs/3.2/api/objects/feedback.html +++ b/docs/3.2/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
Version: 3.2

Feedback

Controls the rendering of the control center item.

ParamTypeDescription
isActivebooleanMarks wether the option should be marked as active or "done"
titlebooleanThe title to give the action (relevant for iOS)
- + \ No newline at end of file diff --git a/docs/3.2/api/objects/metadata-options.html b/docs/3.2/api/objects/metadata-options.html index aa16be94d..9417285eb 100644 --- a/docs/3.2/api/objects/metadata-options.html +++ b/docs/3.2/api/objects/metadata-options.html @@ -5,13 +5,13 @@ MetadataOptions | React Native Track Player - +
Version: 3.2

MetadataOptions

All parameters are optional. You also only need to specify the ones you want to update.

ParamTypeDescriptionAndroidiOSWindows
ratingTypeRatingTypeThe rating type✅❌❌
forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅❌
backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
androidAndroidOptionsWhether the player will pause playback when the app closes✅❌❌
alwaysPauseOnInterruptionbooleanWhether the remote-duck event will be triggered on every interruption✅❌❌
likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
capabilitiesCapability[]The media controls that will be enabled✅✅✅
notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
iconResource ObjectThe notification icon¹✅❌❌
playIconResource ObjectThe play icon¹✅❌❌
pauseIconResource ObjectThe pause icon¹✅❌❌
stopIconResource ObjectThe stop icon¹✅❌❌
previousIconResource ObjectThe previous icon¹✅❌❌
nextIconResource ObjectThe next icon¹✅❌❌
rewindIconResource ObjectThe jump backward icon¹✅❌❌
forwardIconResource ObjectThe jump forward icon¹✅❌❌
colornumberThe notification color in an ARGB hex✅❌❌
progressUpdateEventIntervalnumberThe interval (in seconds) that the Event.PlaybackProgressUpdated will be fired. undefined by default.✅✅❌

¹ - The custom icons will only work in release builds

- + \ No newline at end of file diff --git a/docs/3.2/api/objects/player-options.html b/docs/3.2/api/objects/player-options.html index dd54e7b60..3adbd47da 100644 --- a/docs/3.2/api/objects/player-options.html +++ b/docs/3.2/api/objects/player-options.html @@ -5,13 +5,13 @@ PlayerOptions | React Native Track Player - +
Version: 3.2

PlayerOptions

All parameters are optional. You also only need to specify the ones you want to update.

ParamTypeDescriptionAndroidiOS
minBuffernumberMinimum time in seconds that needs to be buffered.✅✅
maxBuffernumberMaximum time in seconds that needs to be buffered.✅✅
backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.✅✅
playBuffernumberMinimum time in seconds that needs to be buffered to start playing.✅✅
maxCacheSizenumberMaximum cache size in kilobytes.✅✅
iosCategoryIOSCategoryAn IOSCategory. Sets on play().❌✅
iosCategoryModeIOSCategoryModeThe audio session mode, together with the audio session category, indicates to the system how you intend to use audio in your app. You can use a mode to configure the audio system for specific use cases such as video recording, voice or video chat, or audio analysis. Sets on play().❌✅
iosCategoryOptionsIOSCategoryOptions[]An array of IOSCategoryOptions. Sets on play().❌✅
waitForBufferbooleanIndicates whether the player should automatically delay playback in order to minimize stalling. Defaults to true. @deprecated This option has been nominated for removal in a future version of RNTP. If you have this set to true, you can safely remove this from the options. If you are setting this to false and have a reason for that, please post a comment in the following discussion: https://github.com/doublesymmetry/react-native-track-player/pull/1695 and describe why you are doing so.✅✅
autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification. Defaults to true.✅✅
- + \ No newline at end of file diff --git a/docs/3.2/api/objects/resource.html b/docs/3.2/api/objects/resource.html index 5c1c10e33..ec194e6ef 100644 --- a/docs/3.2/api/objects/resource.html +++ b/docs/3.2/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
Version: 3.2

Resource

Resource objects are the result of require/import for files.

For more information about Resource Objects, read the Images section of the React Native documentation

- + \ No newline at end of file diff --git a/docs/3.2/api/objects/track.html b/docs/3.2/api/objects/track.html index 61057c78a..6d7abf118 100644 --- a/docs/3.2/api/objects/track.html +++ b/docs/3.2/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
Version: 3.2

Track

Tracks in the player queue are plain javascript objects as described below.

Only the url, title and artist properties are required for basic playback

ParamTypeDescription
idstringThe track id
urlstring or Resource ObjectThe media URL
typestringStream type. One of dash, hls, smoothstreaming or default
userAgentstringThe user agent HTTP header
contentTypestringMime type of the media file
durationnumberThe duration in seconds
titlestringThe track title
artiststringThe track artist
albumstringThe track album
descriptionstringThe track description
genrestringThe track genre
datestringThe track release date in RFC 3339
ratingDepends on the rating typeThe track rating value
artworkstring or Resource ObjectThe artwork url
pitchAlgorithmPitch AlgorithmThe pitch algorithm
headersobjectAn object containing all the headers to use in the HTTP request
isLiveStreambooleanUsed by iOS to present live stream option in control center
- + \ No newline at end of file diff --git a/docs/3.2/basics/background-mode.html b/docs/3.2/basics/background-mode.html index a455b63b1..c31f03d70 100644 --- a/docs/3.2/basics/background-mode.html +++ b/docs/3.2/basics/background-mode.html @@ -5,7 +5,7 @@ Background Mode | React Native Track Player - + @@ -28,7 +28,7 @@ controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

Windows​

To allow background audio playback on Windows, you need to add the background capability in the app manifest, as documented by Microsoft

<Capabilities>
    <uap3:Capability Name="backgroundMediaPlayback"/>
</Capabilities>
- + \ No newline at end of file diff --git a/docs/3.2/basics/getting-started.html b/docs/3.2/basics/getting-started.html index b0011e02f..524f76028 100644 --- a/docs/3.2/basics/getting-started.html +++ b/docs/3.2/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -25,7 +25,7 @@ platform specific functionalities like Android Auto.

You can change options multiple times. You do not need to specify all the options, just the ones you want to change.

For more information about the properties you can set, check the documentation.

Example​

import TrackPlayer, { Capability } from 'react-native-track-player';

TrackPlayer.updateOptions({
    // Media controls capabilities
    capabilities: [
        Capability.Play,
        Capability.Pause,
        Capability.SkipToNext,
        Capability.SkipToPrevious,
        Capability.Stop,
    ],

    // Capabilities that will show up when the notification is in the compact form on Android
    compactCapabilities: [Capability.Play, Capability.Pause],

    // Icons for the notification on Android (if you don't like the default ones)
    playIcon: require('./play-icon.png'),
    pauseIcon: require('./pause-icon.png'),
    stopIcon: require('./stop-icon.png'),
    previousIcon: require('./previous-icon.png'),
    nextIcon: require('./next-icon.png'),
    icon: require('./notification-icon.png')
});
- + \ No newline at end of file diff --git a/docs/3.2/basics/installation.html b/docs/3.2/basics/installation.html index 136e0609d..57117fce6 100644 --- a/docs/3.2/basics/installation.html +++ b/docs/3.2/basics/installation.html @@ -5,7 +5,7 @@ Installation | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.2

Installation

Stable​

npm install --save react-native-track-player

Unstable / Nightly​

If for some reason you require an update that has not yet been officially released you can install the nightly version which is an automatic release of main published to npm every 24hrs.

npm install --save react-native-track-player@nightly

iOS Setup​

iOS requires a few extra steps that are not required for Android/Windows.

Enable Swift Modules​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can be easily by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Pod Install​

You'll need to run a pod install in order to install the native iOS dependencies

cd ios && pod install

Expo​

You can now use React Native Track Player with Expo.

Start by creating a custom development client for your Expo app and then install React Native Track Player.

Here is the configuration required for audio playback in background:

- + \ No newline at end of file diff --git a/docs/3.2/basics/platform-support.html b/docs/3.2/basics/platform-support.html index 8ab7facff..b7bc5f9a4 100644 --- a/docs/3.2/basics/platform-support.html +++ b/docs/3.2/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
Version: 3.2

Platform Support

Audio Sources​

FeatureAndroidiOSWindows
App bundle¹✅✅✅
Network✅✅✅
File System²✅✅✅

¹: Use require or import

²: Prefix the file path with file:///

Stream Types​

FeatureAndroidiOSWindows
Regular Streams✅✅✅
DASH✅❌✅
HLS✅✅✅
SmoothStreaming✅❌❌

Casting​

FeatureAndroidiOSWindows
Google Cast¹✅❌❌
Miracast/DLNA❌❌❌
AirPlay❌❌❌

¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

Miscellaneous​

FeatureAndroidiOSWindows
Media Controls✅✅✅
Caching✅❌❌
Background Mode¹✅✅✅

¹: Read more in Background Mode

Functions​

FunctionAndroidiOSWindows
setupPlayer✅✅✅
updateOptions✅✅✅
registerPlaybackService✅✅✅
addEventListener✅✅✅
play✅✅✅
pause✅✅✅
reset✅✅✅
setVolume✅✅✅
getVolume✅✅✅
setRate✅✅✅
getRate✅✅✅
seekTo✅✅✅
getPosition✅✅✅
getBufferedPosition✅✅✅
getDuration✅✅✅
getState✅✅✅
getQueue✅✅✅
getCurrentTrack✅✅✅
getTrack✅✅✅
add✅✅✅
remove✅✅✅
skip✅✅✅
skipToPrevious✅✅✅
skipToNext✅✅✅
removeUpcomingTracks✅✅✅

Events​

EventAndroidiOSWindows
remote-play✅✅✅
remote-play-id✅❌❌
remote-play-search✅❌❌
remote-pause✅✅✅
remote-stop✅✅✅
remote-skip✅❌❌
remote-next✅✅✅
remote-previous✅✅✅
remote-seek✅✅✅
remote-set-rating✅❌❌
remote-jump-forward✅✅✅
remote-jump-backward✅✅✅
remote-duck✅✅❌
playback-state✅✅✅
playback-track-changed✅✅✅
playback-queue-ended✅✅✅
playback-error✅✅✅
playback-metadata-received✅✅❌
- + \ No newline at end of file diff --git a/docs/3.2/basics/playback-service.html b/docs/3.2/basics/playback-service.html index 25f804a25..252bd5dec 100644 --- a/docs/3.2/basics/playback-service.html +++ b/docs/3.2/basics/playback-service.html @@ -5,13 +5,13 @@ Playback Service | React Native Track Player - +
Version: 3.2

Playback Service

The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

Remote Events​

Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

If you create a listener to a remote event like Event.RemotePause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

Example​

import { PlaybackService } from './src/services';

// This needs to go right after you register the main component of your app
// AppRegistry.registerComponent(...)
TrackPlayer.registerPlaybackService(() => PlaybackService);
// src/services/PlaybackService.ts
import { Event } from 'react-native-track-player';

export const PlaybackService = async function() {

    TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());

    TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

    // ...

};
- + \ No newline at end of file diff --git a/docs/3.2/core-team.html b/docs/3.2/core-team.html index 2a81d2ae1..0429b4913 100644 --- a/docs/3.2/core-team.html +++ b/docs/3.2/core-team.html @@ -5,13 +5,13 @@ Core Team ✨ | React Native Track Player - +
- + \ No newline at end of file diff --git a/docs/3.2/guides/amazon-fire-support.html b/docs/3.2/guides/amazon-fire-support.html index 67c43bc37..3a5b66826 100644 --- a/docs/3.2/guides/amazon-fire-support.html +++ b/docs/3.2/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
Version: 3.2

Amazon FireOS Support

Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

Setup​

In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

Edit app/build.gradle​

Add productFlavors to your build file:

android {
  flavorDimensions "store"
  productFlavors {
    google {
      dimension "store"
    }
    amazon {
      dimension "store"
    }
  }
  ...
}

Override the exoplayer library, and version, by modifying the dependencies:

dependencies {
  compile (project(':react-native-track-player')) {
    exclude group: 'com.google.android.exoplayer'
  }
  googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
  amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
  ...
}

Build Using Variants​

To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

"scripts": {
  "android-google": "react-native run-android --variant=googleDebug",
  "android-amazon": "react-native run-android --variant=amazonDebug",
  "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
  "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
  ...
}
- + \ No newline at end of file diff --git a/docs/3.2/guides/multitrack-progress.html b/docs/3.2/guides/multitrack-progress.html index d04501a16..cb2826d68 100644 --- a/docs/3.2/guides/multitrack-progress.html +++ b/docs/3.2/guides/multitrack-progress.html @@ -5,7 +5,7 @@ Multitrack Progress | React Native Track Player - + @@ -38,7 +38,7 @@ playback service and update our zustand store:

// src/services/PlaybackService.ts
import TrackPlayer, { Event } from 'react-native-track-player';
import { useProgressStateStore } from '../store';

// create a local reference for the `setProgress` function
const setProgress = useProgressStateStore.getState().setProgress;

export const PlaybackService = async function() {
  TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async () => {
    // get the position and currently playing track.
    const position = TrackPlayer.getPosition();
    const track = TrackPlayer.getCurrentTrack();
    // write progress to the zustand store
    setProgress(track.id, position);
  });
};

⚠️ make sure you've configured your progressUpdateEventInterval in the TrackPlayer.updateOptions call.

3. Reactively Update Progress​

Finally, we just need to read from the store whenever we display our track list item:

// src/components/TrackListItem.tsx
import type { Track } from 'react-native-track-player';
import { useTrackProgress } from '../hooks/useTrackProgress';

export interface TrackListItemProps {}

export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
  const progress = useTrackProgress(track.id);
  return (
    <Text>Progress: {progress}</Text>
  );
};

🎊 voilà

- + \ No newline at end of file diff --git a/docs/3.2/guides/offline-playback.html b/docs/3.2/guides/offline-playback.html index b611d7177..49384371e 100644 --- a/docs/3.2/guides/offline-playback.html +++ b/docs/3.2/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

Hybrid Offline/Network​

To do this you'll first need to install a package like:

The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

- + \ No newline at end of file diff --git a/docs/3.2/guides/saving-progress.html b/docs/3.2/guides/saving-progress.html index ea52d1c88..0df9b638c 100644 --- a/docs/3.2/guides/saving-progress.html +++ b/docs/3.2/guides/saving-progress.html @@ -5,7 +5,7 @@ Saving Progress | React Native Track Player - + @@ -27,7 +27,7 @@ Playback Service, based on the Event.PlaybackProgressUpdated event. These events fire all the time, including when your app is playing back remotely.

- + \ No newline at end of file diff --git a/docs/3.2/guides/sleeptimers.html b/docs/3.2/guides/sleeptimers.html index 68e07ba4b..8f7a13140 100644 --- a/docs/3.2/guides/sleeptimers.html +++ b/docs/3.2/guides/sleeptimers.html @@ -5,7 +5,7 @@ Sleeptimers | React Native Track Player - + @@ -15,7 +15,7 @@ to understand the concept of "remote" playback and why coupling playback events to the UI is a bad idea.

Once you've understood that concept, this concept is nearly identical. You would leverage the same Event.PlaybackProgressUpdated event in this scenario too.

Here's how you would use an event to implement a sleep timer:

  1. The user configures a sleep timer in the UI.
  2. Persist the time they configure in a store as a timestamp.
  3. Each time the progress event fires you check your persisted sleep timer timestamp.
    • IF sleeptime !== null && sleeptime <= now THEN pause.
- + \ No newline at end of file diff --git a/docs/3.2/intro.html b/docs/3.2/intro.html index a6ee52146..feaf5885c 100644 --- a/docs/3.2/intro.html +++ b/docs/3.2/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
Version: 3.2

Intro

A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

Features​

  • Lightweight - Optimized to use the least amount of resources according to your needs
  • Feels native - As everything is built together, it follows the same design principles as real music apps do
  • Multi-platform - Supports Android, iOS and Windows
  • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
  • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
  • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
  • Caching support - Cache media files to play them again without an internet connection
  • Background support - Keep playing audio even after the app is in background
  • Fully Customizable - Even the notification icons are customizable!
  • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
  • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

Example​

If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

import TrackPlayer, { RepeatMode } from 'react-native-track-player';

// Creates the player
const setup = async () => {
  await TrackPlayer.setupPlayer({});

  await TrackPlayer.add({
    url: require('track.mp3'),
    title: 'Track Title',
    artist: 'Track Artist',
    artwork: require('track.png')
  });

  TrackPlayer.setRepeatMode(RepeatMode.Queue);
};
- + \ No newline at end of file diff --git a/docs/3.2/sponsors.html b/docs/3.2/sponsors.html index edcbfc783..8825640b0 100644 --- a/docs/3.2/sponsors.html +++ b/docs/3.2/sponsors.html @@ -5,13 +5,13 @@ Sponsors ❤️ | React Native Track Player - +
Version: 3.2

Sponsors ❤️

Thanks to our backers and sponsors for their generous support!

Backers​

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors​

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

- + \ No newline at end of file diff --git a/docs/3.2/troubleshooting.html b/docs/3.2/troubleshooting.html index 46c8d9612..c0a0c36c5 100644 --- a/docs/3.2/troubleshooting.html +++ b/docs/3.2/troubleshooting.html @@ -5,13 +5,13 @@ Troubleshooting | React Native Track Player - +
Version: 3.2

Troubleshooting

iOS: (Enable Swift) library not found for -lswiftCoreAudio for architecture x86_64​

Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can easily be done by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

Importing Swift

Android: CIRCULAR REFERENCE:com.android.tools.r8.ApiLevelException: Default interface methods are only supported starting with Android N (--min-api 24)​

Since version 1.0.0, we began using a few Java 8 features in the project to reduce the code size.

To fix the issue, add the following options to your android/app/build.gradle file:

android {
    ...
+   compileOptions {
+       sourceCompatibility JavaVersion.VERSION_1_8
+       targetCompatibility JavaVersion.VERSION_1_8
+   }
    ...
}

Android: com.facebook.react.common.JavascriptException: No task registered for key TrackPlayer​

The playback service requires a headless task to be registered. You have to register it with registerPlaybackService.

Android: Error: Attribute XXX from [androidx.core:core:XXX] is also present at [com.android.support:support-compat:XXX]​

This error occurs when you're mixing both AndroidX and the Support Library in the same project.

You have to either upgrade everything to AndroidX or downgrade everything to the support library.

  • For react-native-track-player, the last version to run the support library is 1.1.4 and the first version to run AndroidX is 1.2.0.
  • For react-native, the last version to run the support library is 0.59 and the first version to run AndroidX is 0.60.

You can also use jetifier to convert all of the native code to use only one of them.

Android: Cleartext HTTP traffic not permitted​

Since API 28, Android disables traffic without TLS. To fix the issue you have to use https or enable clear text traffic.

- + \ No newline at end of file diff --git a/docs/3.2/v2-migration.html b/docs/3.2/v2-migration.html index 34a51377a..1bf548459 100644 --- a/docs/3.2/v2-migration.html +++ b/docs/3.2/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
Version: 3.2

Migrating from v1 to v2

All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

We recommend using Typescript to have the system alert you of issues.

When migrating from v1 to v2, the following has changed:

// Methods

- async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
+ async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

- async function remove(tracks: string | string[]): Promise<void> {
+ async function remove(tracks: number | number[]): Promise<void> {

- async function skip(trackId: string): Promise<void> {
+ function skip(trackIndex: number): Promise<void> {

- async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
+ async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

- async function getTrack(trackId: string): Promise<Track> {
+ async function getTrack(trackIndex: number): Promise<Track> {

- async function getCurrentTrack(): Promise<string> {
+ async function getCurrentTrack(): Promise<number> {

// Imports

import TrackPlayer, {
-  STATE_XXX,
-  CAPABILITY_XXX,
-  PITCH_ALGORITHM_XXX,
-  RATING_XXX,
+  State,
+  Capability,
+  PitchAlgorithm,
+  RatingType,
+  Event,
+  RepeatMode
} from 'react-native-track-player'

// Hooks

- useTrackPlayerProgress
+ useProgress

// Event Listeners
// Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

+ usePlaybackState
+ useTrackPlayerEvents
+ useProgress
- + \ No newline at end of file diff --git a/docs/3.2/v3-migration.html b/docs/3.2/v3-migration.html index 7a98e8bc0..88b82fb3c 100644 --- a/docs/3.2/v3-migration.html +++ b/docs/3.2/v3-migration.html @@ -5,7 +5,7 @@ Migrating from v2 to v3 | React Native Track Player - + @@ -17,7 +17,7 @@ can remove your track-player.json file if you have one. You still need to ensure that the correct type is specified on your Track object.

- track-player.json

Minimum Compile/Target SDK​

You also need to have a minimum compile & target SDK of 31 (Android 12)

// android/build.gradle
...
    compileSdkVersion = 31
    targetSdkVersion = 31
...
- + \ No newline at end of file diff --git a/docs/3.2/v3.1.0-migration.html b/docs/3.2/v3.1.0-migration.html index f2d796540..f79d68b9a 100644 --- a/docs/3.2/v3.1.0-migration.html +++ b/docs/3.2/v3.1.0-migration.html @@ -5,13 +5,13 @@ Migrating from v3.1.0 to v3.2.0 | React Native Track Player - +
Version: 3.2

Migrating from v3.1.0 to v3.2.0

stoppingAppPausesPlayback is deprecated​

await TrackPlayer.updateOptions({
+      android: {
+        appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback
+      },
      // This flag is now deprecated. Please use the above to define playback mode.
-      stoppingAppPausesPlayback: true,
}
- + \ No newline at end of file diff --git a/docs/4.0/api/constants/app-killed-playback-behavior.html b/docs/4.0/api/constants/app-killed-playback-behavior.html index 31ee281c5..6608a7b58 100644 --- a/docs/4.0/api/constants/app-killed-playback-behavior.html +++ b/docs/4.0/api/constants/app-killed-playback-behavior.html @@ -5,7 +5,7 @@ App Killed Playback Behavior (android-only) | React Native Track Player - + @@ -15,7 +15,7 @@ from recents. The notification remains and can be used to resume playback.

StopPlaybackAndRemoveNotification​

This option will stop playing audio in the background when the app is removed from recents. The notification is removed and can't be used to resume playback. Users would need to open the app again to start playing audio.

- + \ No newline at end of file diff --git a/docs/4.0/api/constants/capability.html b/docs/4.0/api/constants/capability.html index 72998eb13..16bc4a6b2 100644 --- a/docs/4.0/api/constants/capability.html +++ b/docs/4.0/api/constants/capability.html @@ -5,13 +5,13 @@ Capability | React Native Track Player - +
Version: 4.0

Capability

All Capability types are made available through the named export Capability:

import { Capability } from 'react-native-track-player';
NameDescription
PlayCapability indicating the ability to play
PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
PauseCapability indicating the ability to pause
StopCapability indicating the ability to stop (on iOS available only for tracks where .isLiveStream is true)
SeekToCapability indicating the ability to seek to a position in the timeline
SkipCapability indicating the ability to skip to any song in the queue
SkipToNextCapability indicating the ability to skip to the next track
SkipToPreviousCapability indicating the ability to skip to the previous track
SetRatingCapability indicating the ability to set the rating value based on the rating type
JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
Like(ios-only) Capability indicating the ability to like from control center
Dislike(ios-only) Capability indicating the ability to dislike from control center
Bookmark(ios-only) Capability indicating the ability to bookmark from control center
- + \ No newline at end of file diff --git a/docs/4.0/api/constants/ios-category-mode.html b/docs/4.0/api/constants/ios-category-mode.html index e7f57dfdf..6e0a8cf35 100644 --- a/docs/4.0/api/constants/ios-category-mode.html +++ b/docs/4.0/api/constants/ios-category-mode.html @@ -5,7 +5,7 @@ iOS Category Mode (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ input or output.

See the Apple Docs

MoviePlayback​

A mode that indicates that your app is playing back movie content.

See the Apple Docs

SpokenAudio​

A mode used for continuous spoken audio to pause the audio when another app plays a short audio prompt.

See the Apple Docs

VideoChat​

A mode that indicates that your app is engaging in online video conferencing.

See the Apple Docs

VideoRecording​

A mode that indicates that your app is recording a movie.

See the Apple Docs

VoiceChat​

A mode that indicates that your app is performing two-way voice communication, such as using Voice over Internet Protocol (VoIP).

See the Apple Docs

VoicePrompt​

A mode that indicates that your app plays audio using text-to-speech.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/4.0/api/constants/ios-category-options.html b/docs/4.0/api/constants/ios-category-options.html index b614b207f..c7b855886 100644 --- a/docs/4.0/api/constants/ios-category-options.html +++ b/docs/4.0/api/constants/ios-category-options.html @@ -5,7 +5,7 @@ iOS Category Options (ios-only) | React Native Track Player - + @@ -18,7 +18,7 @@ to Bluetooth devices that support the Advanced Audio Distribution Profile (A2DP).

See the Apple Docs

AllowAirPlay​

An option that determines whether you can stream audio from this session to AirPlay devices.

See the Apple Docs

DefaultToSpeaker​

An option that determines whether audio from the session defaults to the built-in speaker instead of the receiver.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/4.0/api/constants/ios-category.html b/docs/4.0/api/constants/ios-category.html index 7727051aa..ec6414505 100644 --- a/docs/4.0/api/constants/ios-category.html +++ b/docs/4.0/api/constants/ios-category.html @@ -5,7 +5,7 @@ iOS Category (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ Voice over Internet Protocol (VoIP) app.

See the Apple Docs

MultiRoute​

The category for routing distinct streams of audio data to different output devices at the same time.

See the Apple Docs

Ambient​

The category for an app in which sound playback is nonprimary — that is, your app also works with the sound turned off.

See the Apple Docs

SoloAmbient​

The default audio session category.

See the Apple Docs

Record​

The category for recording audio while also silencing playback audio.

See the Apple Docs

- + \ No newline at end of file diff --git a/docs/4.0/api/constants/pitch-algorithm.html b/docs/4.0/api/constants/pitch-algorithm.html index 89b159f5f..3d0af4565 100644 --- a/docs/4.0/api/constants/pitch-algorithm.html +++ b/docs/4.0/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
Version: 4.0

Pitch Algorithm (ios-only)

All PitchAlgorithm types are made available through the named export PitchAlgorithm:

import { PitchAlgorithm } from 'react-native-track-player';
NameDescription
LinearAn algorithm suitable for general use.
MusicAn algorithm suitable for music.
VoiceAn algorithm suitable for voice.
- + \ No newline at end of file diff --git a/docs/4.0/api/constants/rating.html b/docs/4.0/api/constants/rating.html index 7b70be45e..74d7772bc 100644 --- a/docs/4.0/api/constants/rating.html +++ b/docs/4.0/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
Version: 4.0

Rating

All RatingType types are made available through the named export RatingType:

import { RatingType } from 'react-native-track-player';
NameDescription
HeartRating type indicating "with heart" or "without heart", its value is a boolean.
ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
PercentageRating type indicating percentage, its value is a number.
- + \ No newline at end of file diff --git a/docs/4.0/api/constants/repeat-mode.html b/docs/4.0/api/constants/repeat-mode.html index 5d06ee758..fbe212995 100644 --- a/docs/4.0/api/constants/repeat-mode.html +++ b/docs/4.0/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
Version: 4.0

Repeat Mode

All RepeatMode types are made available through the named export RepeatMode:

import { RepeatMode } from 'react-native-track-player';
NameDescription
OffDoesn't repeat.
TrackLoops the current track.
QueueRepeats the whole queue.
- + \ No newline at end of file diff --git a/docs/4.0/api/constants/state.html b/docs/4.0/api/constants/state.html index ee414a398..1bddbe889 100644 --- a/docs/4.0/api/constants/state.html +++ b/docs/4.0/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
Version: 4.0

State

All State types are made available through the named export State:

import { State } from 'react-native-track-player';
NameDescription
NoneState indicating that no media is currently loaded
ReadyState indicates that the player is paused, but ready to start playing
PlayingState indicating that the player is currently playing
PausedState indicating that the player is currently paused
StoppedState indicating that the player is currently stopped
EndedState indicates playback stopped due to the end of the queue being reached
BufferingState indicating that the player is currently buffering (no matter whether playback is paused or not)
LoadingState indicating the initial loading phase of a track
ErrorState indicating that the player experienced a playback error causing the audio to stop playing (or not start playing). When in State.Error, calling play() reloads the current track and seeks to its last known time.
Connecting⚠️ Deprecated. Please use State.Loading instead. State indicating that the player is currently buffering (in "pause" state)
- + \ No newline at end of file diff --git a/docs/4.0/api/events.html b/docs/4.0/api/events.html index de0d16e0d..7526d4dc6 100644 --- a/docs/4.0/api/events.html +++ b/docs/4.0/api/events.html @@ -5,7 +5,7 @@ Events | React Native Track Player - + @@ -19,7 +19,7 @@ should be paused. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is set to false, the player may resume playback.
    • ParamTypeDescription
    pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
    permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.

    Metadata​

    AudioCommonMetadataReceived​

    Fired when the current track receives metadata encoded in - static metadata not tied to a time. Usually received at start.

    Received data will be AudioCommonMetadataReceivedEvent.

    AudioTimedMetadataReceived​

    Fired when the current track receives metadata encoded in - dynamic metadata tied to a time. Events may be emitted over time.

    Received data will be AudioMetadataReceivedEvent.

    AudioChapterMetadataReceived (iOS only)​

    Fired when the current track receives metadata encoded in - chapter overview data. Usually received at start.

    Received data will be AudioMetadataReceivedEvent.

    - + \ No newline at end of file diff --git a/docs/4.0/api/functions/lifecycle.html b/docs/4.0/api/functions/lifecycle.html index 4fea1d071..43e817653 100644 --- a/docs/4.0/api/functions/lifecycle.html +++ b/docs/4.0/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
    Version: 4.0

    Lifecycle

    setupPlayer(options: PlayerOptions)​

    Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

    These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

    You should always call this function (even without any options set) before using the player to make sure everything is initialized. Do not call this more than once in the lifetime of your app.

    Note that on Android this method must only be called while the app is in the foreground, otherwise it will throw an error with code 'android_cannot_setup_player_in_background'. In this case you can wait for the app to be in the foreground and try again.

    Returns: Promise

    ParamTypeDescriptionDefaultAndroidiOSWindows
    optionsPlayerOptionsThe options
    options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
    options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
    options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
    options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
    options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
    options.androidAudioContentTypeAndroidAudioContentTypeThe audio content type indicates to the android system how you intend to use audio in your app.AndroidAudioContentType.Music✅❌❌
    options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()IOSCategory.Playback❌✅❌
    options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
    options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
    options.autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions.false✅✅❌
    options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅✅❌

    registerPlaybackService(serviceProvider)​

    Register the playback service. The service will run as long as the player runs.

    This function should only be called once, and should be registered right after registering your React application with AppRegistry.

    You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

    ParamTypeDescription
    serviceProviderfunctionThe function that must return an async service function.

    useTrackPlayerEvents(events: Event[], handler: Handler)​

    Hook that fires on the specified events.

    You can find a list of events in the events section.

    - + \ No newline at end of file diff --git a/docs/4.0/api/functions/player.html b/docs/4.0/api/functions/player.html index 3cc78e779..f9f69b60c 100644 --- a/docs/4.0/api/functions/player.html +++ b/docs/4.0/api/functions/player.html @@ -5,7 +5,7 @@ Player | React Native Track Player - + @@ -19,7 +19,7 @@ and TrackPlayer.setPlayWhenReady(true) is the equivalent of TrackPlayer.play().

    ParamTypeDescription
    playWhenReadybooleanA boolean representing if you want playWhenReady set or not.

    ⚠️ getState()​

    ⚠️ Deprecated

    Gets the playback State of the player.

    Returns: Promise<State>

    ⚠️ getDuration()​

    ⚠️ Deprecated

    Gets the duration of the current track in seconds.

    Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

    You should only trust the result of this function if you included the duration property in the Track Object.

    Returns: Promise<number>

    ⚠️ getPosition()​

    ⚠️ Deprecated

    Gets the position of the current track in seconds.

    Returns: Promise<number>

    ⚠️ getBufferedPosition()​

    ⚠️ Deprecated

    Gets the buffered position of the current track in seconds.

    Returns: Promise<number>

    - + \ No newline at end of file diff --git a/docs/4.0/api/functions/queue.html b/docs/4.0/api/functions/queue.html index c7ed7c889..76c82a467 100644 --- a/docs/4.0/api/functions/queue.html +++ b/docs/4.0/api/functions/queue.html @@ -5,7 +5,7 @@ Queue | React Native Track Player - + @@ -15,7 +15,7 @@ If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

    Returns: Promise<void>

    ParamTypeDescription
    indexnumberThe track index
    metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

    setRepeatMode(mode)​

    Sets the repeat mode.

    ParamTypeDescription
    modeRepeat ModeThe repeat mode

    getRepeatMode()​

    Gets the repeat mode.

    Returns: Repeat Mode

    ⚠️ getCurrentTrack()​

    ⚠️ Deprecated: To get the active track index use getActiveTrackIndex() instead or use getActiveTrack() to get the active track object.

    Gets the index of the current track, or null if no track loaded

    Returns: Promise<number | null>

    - + \ No newline at end of file diff --git a/docs/4.0/api/hooks.html b/docs/4.0/api/hooks.html index a8dbadac3..5d7da678d 100644 --- a/docs/4.0/api/hooks.html +++ b/docs/4.0/api/hooks.html @@ -5,7 +5,7 @@ Hooks | React Native Track Player - + @@ -14,7 +14,7 @@ The hook will initially return { state: undefined } while it is awaiting the initial state of the player.

    import React, { useState } from 'react';
    import { Text, View } from 'react-native';
    import { usePlaybackState, State } from 'react-native-track-player';

    const MyComponent = () => {
      const playerState = usePlaybackState();
      const isPlaying = playerState === State.Playing;

      return (
        <View>
          <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
        </View>
      );
    };

    usePlayWhenReady​

    A hook which returns the up to date state of TrackPlayer.getPlayWhenReady().

    useActiveTrack​

    A hook which keeps track of the currently active track using TrackPlayer.getActiveTrack() and Event.PlaybackActiveTrackChanged.

    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/android-options.html b/docs/4.0/api/objects/android-options.html index 00ae9e1eb..7d1faab0b 100644 --- a/docs/4.0/api/objects/android-options.html +++ b/docs/4.0/api/objects/android-options.html @@ -5,13 +5,13 @@ AndroidOptions | React Native Track Player - +
    Version: 4.0

    AndroidOptions

    Options available for the android player. All options are optional.

    ParamTypeDefaultDescription
    appKilledPlaybackBehaviorAppKilledPlaybackBehaviorContinuePlaybackDefine how the audio playback should behave after removing the app from recents (killing it).
    alwaysPauseOnInterruptionbooleanfalseWhether the remote-duck event will be triggered on every interruption
    stopForegroundGracePeriodnumber5Time in seconds to wait once the player should transition to not considering the service as in the foreground. If playback resumes within this grace period, the service remains in the foreground state.
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/feedback.html b/docs/4.0/api/objects/feedback.html index 137d5d7f1..f9d89cfe1 100644 --- a/docs/4.0/api/objects/feedback.html +++ b/docs/4.0/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
    Version: 4.0

    Feedback

    Controls the rendering of the control center item.

    ParamTypeDescription
    isActivebooleanMarks wether the option should be marked as active or "done"
    titlebooleanThe title to give the action (relevant for iOS)
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/metadata-options.html b/docs/4.0/api/objects/metadata-options.html index 0a25e8abe..e64ed97f9 100644 --- a/docs/4.0/api/objects/metadata-options.html +++ b/docs/4.0/api/objects/metadata-options.html @@ -5,13 +5,13 @@ ⚠️ MetadataOptions | React Native Track Player - +
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/metadata.html b/docs/4.0/api/objects/metadata.html index 9929c879b..26771646e 100644 --- a/docs/4.0/api/objects/metadata.html +++ b/docs/4.0/api/objects/metadata.html @@ -5,13 +5,13 @@ AudioMetadataReceivedEvent | React Native Track Player - +
    Version: 4.0

    AudioMetadataReceivedEvent

    An object representing the timed or chapter metadata received for a track.

    ParamTypeDescription
    metadataAudioMetadata[]The metadata received

    AudioCommonMetadataReceivedEvent

    An object representing the common metadata received for a track.

    ParamTypeDescription
    metadataAudioCommonMetadataThe metadata received

    AudioCommonMetadata

    An object representing the common metadata received for a track.

    ParamTypeDescription
    titlestringThe track title. Might be undefined
    artiststringThe track artist. Might be undefined
    albumTitlestringThe track album. Might be undefined
    subtitlestringThe track subtitle. Might be undefined
    descriptionstringThe track description. Might be undefined
    artworkUristringThe track artwork uri. Might be undefined
    trackNumberstringThe track number. Might be undefined
    composerstringThe track composer. Might be undefined
    conductorstringThe track conductor. Might be undefined
    genrestringThe track genre. Might be undefined
    compilationstringThe track compilation. Might be undefined
    stationstringThe track station. Might be undefined
    mediaTypestringThe track media type. Might be undefined
    creationDatestringThe track creation date. Might be undefined
    creationYearstringThe track creation year. Might be undefined

    AudioMetadata

    An extension of AudioCommonMetadataReceivedEvent that includes the raw metadata.

    ParamTypeDescription
    rawRawEntry[]The raw metadata that was used to populate. May contain other non common keys. May be empty

    RawEntry

    An object representing a raw metadata entry.

    ParamTypeDescription
    commonKeystringThe common key. Might be undefined
    keySpacestringThe key space. Might be undefined
    timenumberThe time. Might be undefined
    valueunknownThe value. Might be undefined
    keystringThe key. Might be undefined
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/playback-error-event.html b/docs/4.0/api/objects/playback-error-event.html index 56a6dac5c..89d179019 100644 --- a/docs/4.0/api/objects/playback-error-event.html +++ b/docs/4.0/api/objects/playback-error-event.html @@ -5,14 +5,14 @@ PlaybackErrorEvent | React Native Track Player - +
    Version: 4.0

    PlaybackErrorEvent

    An object denoting a playback error encountered during loading or playback of a track.

    PropertyTypeDescription
    codestringThe code values are strings prefixed with android_ on Android and ios_ on iOS.
    messagestringThe error message emitted by the native player.
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/playback-state.html b/docs/4.0/api/objects/playback-state.html index 0f3c6e1e8..21e71ce6a 100644 --- a/docs/4.0/api/objects/playback-state.html +++ b/docs/4.0/api/objects/playback-state.html @@ -5,13 +5,13 @@ PlaybackState | React Native Track Player - +
    Version: 4.0

    PlaybackState

    An object representing the playback state of the player.

    PropertyTypeDescription
    stateStateThe current state of the player.
    errorPlaybackErrorEvent | undefinedIf the state is type Error a PlaybackErrorEvent will be present. Else undefined.
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/player-options.html b/docs/4.0/api/objects/player-options.html index 308c4810a..d90b9b8a2 100644 --- a/docs/4.0/api/objects/player-options.html +++ b/docs/4.0/api/objects/player-options.html @@ -5,13 +5,13 @@ PlayerOptions | React Native Track Player - +
    Version: 4.0

    PlayerOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOS
    minBuffernumberMinimum duration of media that the player will attempt to buffer in seconds.✅✅
    maxBuffernumberMaximum duration of media that the player will attempt to buffer in seconds.✅❌
    backBuffernumberDuration in seconds that should be kept in the buffer behind the current playhead time.✅❌
    playBuffernumberDuration of media in seconds that must be buffered for playback to start or resume following a user action such as a seek.✅❌
    maxCacheSizenumberMaximum cache size in kilobytes.✅❌
    iosCategoryIOSCategoryAn IOSCategory. Sets on play().❌✅
    iosCategoryModeIOSCategoryModeThe audio session mode, together with the audio session category, indicates to the system how you intend to use audio in your app. You can use a mode to configure the audio system for specific use cases such as video recording, voice or video chat, or audio analysis. Sets on play().❌✅
    iosCategoryOptionsIOSCategoryOptions[]An array of IOSCategoryOptions. Sets on play().❌✅
    waitForBufferbooleanIndicates whether the player should automatically delay playback in order to minimize stalling. Defaults to true. @deprecated This option has been nominated for removal in a future version of RNTP. If you have this set to true, you can safely remove this from the options. If you are setting this to false and have a reason for that, please post a comment in the following discussion: https://github.com/doublesymmetry/react-native-track-player/pull/1695 and describe why you are doing so.✅✅
    autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification. Defaults to true.✅✅
    autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions. Defaults to false.✅✅
    androidAudioContentTypebooleanThe audio content type indicates to the android system how you intend to use audio in your app. With autoHandleInterruptions: true and androidAudioContentType: AndroidAudioContentType.Speech, the audio will be paused during short interruptions, such as when a message arrives. Otherwise the playback volume is reduced while the notification is playing. Defaults to AndroidAudioContentType.Music✅❌
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/progress.html b/docs/4.0/api/objects/progress.html index cf3fa73c6..d84ad40ae 100644 --- a/docs/4.0/api/objects/progress.html +++ b/docs/4.0/api/objects/progress.html @@ -5,13 +5,13 @@ Progress | React Native Track Player - +
    Version: 4.0

    Progress

    An object representing the various aspects of the active track.

    PropertyTypeDescription
    positionnumberThe playback position of the active track in seconds.
    durationnumberThe duration of the active track in seconds.
    bufferednumberThe buffered position of the active track in seconds.
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/resource.html b/docs/4.0/api/objects/resource.html index a50961db5..13ab868f4 100644 --- a/docs/4.0/api/objects/resource.html +++ b/docs/4.0/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
    Version: 4.0

    Resource

    Resource objects are the result of require/import for files.

    For more information about Resource Objects, read the Images section of the React Native documentation

    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/track.html b/docs/4.0/api/objects/track.html index bbc5ad777..5931f826b 100644 --- a/docs/4.0/api/objects/track.html +++ b/docs/4.0/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
    Version: 4.0

    Track

    Tracks in the player queue are plain javascript objects as described below.

    Only the url, title and artist properties are required for basic playback

    ParamTypeDescription
    idstringThe track id
    urlstring or Resource ObjectThe media URL
    typestringStream type. One of dash, hls, smoothstreaming or default
    userAgentstringThe user agent HTTP header
    contentTypestringMime type of the media file
    durationnumberThe duration in seconds
    titlestringThe track title
    artiststringThe track artist
    albumstringThe track album
    descriptionstringThe track description
    genrestringThe track genre
    datestringThe track release date in RFC 3339
    ratingDepends on the rating typeThe track rating value
    artworkstring or Resource ObjectThe artwork url
    pitchAlgorithmPitch AlgorithmThe pitch algorithm
    headersobjectAn object containing all the headers to use in the HTTP request
    isLiveStreambooleanUsed by iOS to present live stream option in control center
    - + \ No newline at end of file diff --git a/docs/4.0/api/objects/update-options.html b/docs/4.0/api/objects/update-options.html index 9783f2cd2..0af81a521 100644 --- a/docs/4.0/api/objects/update-options.html +++ b/docs/4.0/api/objects/update-options.html @@ -5,13 +5,13 @@ UpdateOptions | React Native Track Player - +
    Version: 4.0

    UpdateOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOSWindows
    ratingTypeRatingTypeThe rating type✅❌❌
    forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅❌
    backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
    androidAndroidOptionsWhether the player will pause playback when the app closes✅❌❌
    likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    capabilitiesCapability[]The media controls that will be enabled✅✅✅
    notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
    compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
    iconResource ObjectThe notification icon¹✅❌❌
    playIconResource ObjectThe play icon¹✅❌❌
    pauseIconResource ObjectThe pause icon¹✅❌❌
    stopIconResource ObjectThe stop icon¹✅❌❌
    previousIconResource ObjectThe previous icon¹✅❌❌
    nextIconResource ObjectThe next icon¹✅❌❌
    rewindIconResource ObjectThe jump backward icon¹✅❌❌
    forwardIconResource ObjectThe jump forward icon¹✅❌❌
    colornumberThe notification color in an ARGB hex✅❌❌
    progressUpdateEventIntervalnumberThe interval (in seconds) that the Event.PlaybackProgressUpdated will be fired. undefined by default.✅✅❌

    ¹ - The custom icons will only work in release builds

    - + \ No newline at end of file diff --git a/docs/4.0/basics/background-mode.html b/docs/4.0/basics/background-mode.html index 61ecb5820..3b5552fe6 100644 --- a/docs/4.0/basics/background-mode.html +++ b/docs/4.0/basics/background-mode.html @@ -5,7 +5,7 @@ Background Mode | React Native Track Player - + @@ -28,7 +28,7 @@ controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

    Windows​

    To allow background audio playback on Windows, you need to add the background capability in the app manifest, as documented by Microsoft

    <Capabilities>
        <uap3:Capability Name="backgroundMediaPlayback"/>
    </Capabilities>
    - + \ No newline at end of file diff --git a/docs/4.0/basics/getting-started.html b/docs/4.0/basics/getting-started.html index b93392439..9a4628874 100644 --- a/docs/4.0/basics/getting-started.html +++ b/docs/4.0/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -25,7 +25,7 @@ platform specific functionalities like Android Auto.

    You can change options multiple times. You do not need to specify all the options, just the ones you want to change.

    For more information about the properties you can set, check the documentation.

    Example​

    import TrackPlayer, { Capability } from 'react-native-track-player';

    TrackPlayer.updateOptions({
        // Media controls capabilities
        capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious,
            Capability.Stop,
        ],

        // Capabilities that will show up when the notification is in the compact form on Android
        compactCapabilities: [Capability.Play, Capability.Pause],

        // Icons for the notification on Android (if you don't like the default ones)
        playIcon: require('./play-icon.png'),
        pauseIcon: require('./pause-icon.png'),
        stopIcon: require('./stop-icon.png'),
        previousIcon: require('./previous-icon.png'),
        nextIcon: require('./next-icon.png'),
        icon: require('./notification-icon.png')
    });
    - + \ No newline at end of file diff --git a/docs/4.0/basics/installation.html b/docs/4.0/basics/installation.html index 8bbe7bd25..dd0b95f7c 100644 --- a/docs/4.0/basics/installation.html +++ b/docs/4.0/basics/installation.html @@ -5,7 +5,7 @@ Installation | React Native Track Player - + @@ -13,7 +13,7 @@
    Version: 4.0

    Installation

    Stable​

    npm install --save react-native-track-player

    Unstable / Nightly​

    If for some reason you require an update that has not yet been officially released you can install the nightly version which is an automatic release of main published to npm every 24hrs.

    npm install --save react-native-track-player@nightly

    iOS Setup​

    iOS requires a few extra steps that are not required for Android/Windows.

    Enable Swift Modules​

    Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can be easily by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

    Importing Swift

    Pod Install​

    You'll need to run a pod install in order to install the native iOS dependencies

    cd ios && pod install

    Expo​

    You can now use React Native Track Player with Expo.

    Please be aware that while many people are using React Native Track Player with Expo successfully, the current maintainers of this project do not use Expo and their ability to resolve issues involving Expo is limited.

    To get started, create a custom development client for your Expo app and then install React Native Track Player.

    Here is the configuration required for audio playback in background:

    - + \ No newline at end of file diff --git a/docs/4.0/basics/platform-support.html b/docs/4.0/basics/platform-support.html index b60ea3e51..889278b7d 100644 --- a/docs/4.0/basics/platform-support.html +++ b/docs/4.0/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
    Version: 4.0

    Platform Support

    Audio Sources​

    FeatureAndroidiOSWindows
    App bundle¹✅✅✅
    Network✅✅✅
    File System²✅✅✅

    ¹: Use require or import

    ²: Prefix the file path with file:///

    Stream Types​

    FeatureAndroidiOSWindows
    Regular Streams✅✅✅
    DASH✅❌✅
    HLS✅✅✅
    SmoothStreaming✅❌❌

    Casting​

    FeatureAndroidiOSWindows
    Google Cast¹✅❌❌
    Miracast/DLNA❌❌❌
    AirPlay❌❌❌

    ¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

    Miscellaneous​

    FeatureAndroidiOSWindows
    Media Controls✅✅✅
    Caching✅❌❌
    Background Mode¹✅✅✅

    ¹: Read more in Background Mode

    Functions​

    FunctionAndroidiOSWindows
    setupPlayer✅✅✅
    updateOptions✅✅✅
    registerPlaybackService✅✅✅
    addEventListener✅✅✅
    play✅✅✅
    pause✅✅✅
    reset✅✅✅
    setVolume✅✅✅
    getVolume✅✅✅
    setRate✅✅✅
    getRate✅✅✅
    seekTo✅✅✅
    getPosition✅✅✅
    getBufferedPosition✅✅✅
    getDuration✅✅✅
    getState✅✅✅
    getQueue✅✅✅
    getCurrentTrack✅✅✅
    getTrack✅✅✅
    add✅✅✅
    remove✅✅✅
    skip✅✅✅
    skipToPrevious✅✅✅
    skipToNext✅✅✅
    removeUpcomingTracks✅✅✅

    Events​

    EventAndroidiOSWindows
    remote-play✅✅✅
    remote-play-id✅❌❌
    remote-play-search✅❌❌
    remote-pause✅✅✅
    remote-stop✅✅✅
    remote-skip✅❌❌
    remote-next✅✅✅
    remote-previous✅✅✅
    remote-seek✅✅✅
    remote-set-rating✅❌❌
    remote-jump-forward✅✅✅
    remote-jump-backward✅✅✅
    remote-duck✅✅❌
    playback-state✅✅✅
    playback-track-changed✅✅✅
    playback-queue-ended✅✅✅
    playback-error✅✅✅
    playback-metadata-received✅✅❌
    - + \ No newline at end of file diff --git a/docs/4.0/basics/playback-service.html b/docs/4.0/basics/playback-service.html index 67c26100b..0ee75f0db 100644 --- a/docs/4.0/basics/playback-service.html +++ b/docs/4.0/basics/playback-service.html @@ -5,13 +5,13 @@ Playback Service | React Native Track Player - +
    Version: 4.0

    Playback Service

    The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

    Remote Events​

    Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

    If you create a listener to a remote event like Event.RemotePause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

    Example​

    import { PlaybackService } from './src/services';

    // This needs to go right after you register the main component of your app
    // AppRegistry.registerComponent(...)
    TrackPlayer.registerPlaybackService(() => PlaybackService);
    // src/services/PlaybackService.ts
    import { Event } from 'react-native-track-player';

    export const PlaybackService = async function() {

        TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());

        TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

        // ...

    };
    - + \ No newline at end of file diff --git a/docs/4.0/guides/amazon-fire-support.html b/docs/4.0/guides/amazon-fire-support.html index ca2b073df..66f535b60 100644 --- a/docs/4.0/guides/amazon-fire-support.html +++ b/docs/4.0/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
    Version: 4.0

    Amazon FireOS Support

    Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

    Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

    Setup​

    In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

    You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

    Edit app/build.gradle​

    Add productFlavors to your build file:

    android {
      flavorDimensions "store"
      productFlavors {
        google {
          dimension "store"
        }
        amazon {
          dimension "store"
        }
      }
      ...
    }

    Override the exoplayer library, and version, by modifying the dependencies:

    dependencies {
      compile (project(':react-native-track-player')) {
        exclude group: 'com.google.android.exoplayer'
      }
      googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
      amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
      ...
    }

    Build Using Variants​

    To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

    Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

    "scripts": {
      "android-google": "react-native run-android --variant=googleDebug",
      "android-amazon": "react-native run-android --variant=amazonDebug",
      "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
      "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
      ...
    }
    - + \ No newline at end of file diff --git a/docs/4.0/guides/multitrack-progress.html b/docs/4.0/guides/multitrack-progress.html index 107c7e71e..bd588ba88 100644 --- a/docs/4.0/guides/multitrack-progress.html +++ b/docs/4.0/guides/multitrack-progress.html @@ -5,7 +5,7 @@ Multitrack Progress | React Native Track Player - + @@ -38,7 +38,7 @@ playback service and update our zustand store:

    // src/services/PlaybackService.ts
    import TrackPlayer, { Event } from 'react-native-track-player';
    import { useProgressStateStore } from '../store';

    // create a local reference for the `setProgress` function
    const setProgress = useProgressStateStore.getState().setProgress;

    export const PlaybackService = async function() {
      TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async ({ position, track }) => {
        // get the track to fetch your unique ID property (if applicable)
        const track = await TrackPlayer.getTrack(track);
        // write progress to the zustand store
        setProgress(track.id, position);
      });
    };

    ⚠️ make sure you've configured your progressUpdateEventInterval in the TrackPlayer.updateOptions call.

    3. Reactively Update Progress​

    Finally, we just need to read from the store whenever we display our track list item:

    // src/components/TrackListItem.tsx
    import type { Track } from 'react-native-track-player';
    import { useTrackProgress } from '../hooks/useTrackProgress';

    export interface TrackListItemProps {}

    export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
      const progress = useTrackProgress(track.id);
      return (
        <Text>Progress: {progress}</Text>
      );
    };

    🎊 voilà

    - + \ No newline at end of file diff --git a/docs/4.0/guides/offline-playback.html b/docs/4.0/guides/offline-playback.html index f77ea0f4b..c5fa8250f 100644 --- a/docs/4.0/guides/offline-playback.html +++ b/docs/4.0/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

    Hybrid Offline/Network​

    To do this you'll first need to install a package like:

    The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

    - + \ No newline at end of file diff --git a/docs/4.0/guides/play-button.html b/docs/4.0/guides/play-button.html index 780abb2d3..fd5f7a50b 100644 --- a/docs/4.0/guides/play-button.html +++ b/docs/4.0/guides/play-button.html @@ -5,13 +5,13 @@ Play Buttons | React Native Track Player - +
    Version: 4.0

    Play Buttons

    UI often needs to display a Play button that changes between three states:

    1. Play
    2. Pause
    3. Spinner (e.g. if playback is being attempted, but sound is paused due to buffering)

    Implementing this correctly will take a bit of care. For instance, usePlaybackState can return State.Buffering even if playback is currently paused. usePlayWhenReady is one way to check if the player is attempting to play, but can return true even if PlaybackState is State.Error or State.Ended.

    To determine how to render a Play button in its three states correctly, do the following:

    • Render the button as a spinner if playWhenReady and state === State.Loading || state === State.Buffering
    • Else render the button as being in the Playing state if playWhenReady && !(state === State.Error || state === State.Buffering)
    • Otherwise render the button as being in the Paused state

    To help with this logic, the API has two utilities:

    1. The useIsPlaying() hook. This returns {playing: boolean | undefined, bufferingDuringPlay: boolean | undefined}, which you can consult to render your play button correctly. You should render a spinner if bufferingDuringPlay === true; otherwise render according to playing. Values are undefined if the player isn't yet in a state where they can be determined.
    2. The async isPlaying() function, which returns the same result as useIsPlaying(), but can be used outside of React components (i.e. without hooks). Note that you can't easily just instead call getPlaybackState() to determine the same answer, unless you've accounted for the issues mentioned above.
    - + \ No newline at end of file diff --git a/docs/4.0/guides/saving-progress.html b/docs/4.0/guides/saving-progress.html index 69981ccbf..f0a2a1227 100644 --- a/docs/4.0/guides/saving-progress.html +++ b/docs/4.0/guides/saving-progress.html @@ -5,7 +5,7 @@ Saving Progress | React Native Track Player - + @@ -27,7 +27,7 @@ Playback Service, based on the Event.PlaybackProgressUpdated event. These events fire all the time, including when your app is playing back remotely.

    - + \ No newline at end of file diff --git a/docs/4.0/guides/sleeptimers.html b/docs/4.0/guides/sleeptimers.html index a9a64b918..994e7b964 100644 --- a/docs/4.0/guides/sleeptimers.html +++ b/docs/4.0/guides/sleeptimers.html @@ -5,7 +5,7 @@ Sleeptimers | React Native Track Player - + @@ -15,7 +15,7 @@ to understand the concept of "remote" playback and why coupling playback events to the UI is a bad idea.

    Once you've understood that concept, this concept is nearly identical. You would leverage the same Event.PlaybackProgressUpdated event in this scenario too.

    Here's how you would use an event to implement a sleep timer:

    1. The user configures a sleep timer in the UI.
    2. Persist the time they configure in a store as a timestamp.
    3. Each time the progress event fires you check your persisted sleep timer timestamp.
      • IF sleeptime !== null && sleeptime <= now THEN pause.
    - + \ No newline at end of file diff --git a/docs/4.0/intro.html b/docs/4.0/intro.html index 48c5390d0..911c69333 100644 --- a/docs/4.0/intro.html +++ b/docs/4.0/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
    Version: 4.0

    Intro

    A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

    Features​

    • Lightweight - Optimized to use the least amount of resources according to your needs
    • Feels native - As everything is built together, it follows the same design principles as real music apps do
    • Multi-platform - Supports Android, iOS and Windows
    • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
    • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
    • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
    • Caching support - Cache media files to play them again without an internet connection
    • Background support - Keep playing audio even after the app is in background
    • Fully Customizable - Even the notification icons are customizable!
    • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
    • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

    Example​

    If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

    import TrackPlayer, { RepeatMode } from 'react-native-track-player';

    // Creates the player
    const setup = async () => {
      await TrackPlayer.setupPlayer({});

      await TrackPlayer.add({
        url: require('track.mp3'),
        title: 'Track Title',
        artist: 'Track Artist',
        artwork: require('track.png')
      });

      TrackPlayer.setRepeatMode(RepeatMode.Queue);
    };
    - + \ No newline at end of file diff --git a/docs/4.0/troubleshooting.html b/docs/4.0/troubleshooting.html index f7ca867d6..6f3d6f302 100644 --- a/docs/4.0/troubleshooting.html +++ b/docs/4.0/troubleshooting.html @@ -5,13 +5,13 @@ Troubleshooting | React Native Track Player - +
    Version: 4.0

    Troubleshooting

    iOS: (Enable Swift) library not found for -lswiftCoreAudio for architecture x86_64​

    Because the iOS module uses Swift, if the user is using a standard react-native application they'll need to add support for Swift in the project. This can easily be done by adding a swift file to the Xcode project -- could be called dummy.swift and saying yes when prompted if you'd like to generate a bridging header.

    Importing Swift

    Android: CIRCULAR REFERENCE:com.android.tools.r8.ApiLevelException: Default interface methods are only supported starting with Android N (--min-api 24)​

    Since version 1.0.0, we began using a few Java 8 features in the project to reduce the code size.

    To fix the issue, add the following options to your android/app/build.gradle file:

    android {
        ...
    +   compileOptions {
    +       sourceCompatibility JavaVersion.VERSION_1_8
    +       targetCompatibility JavaVersion.VERSION_1_8
    +   }
        ...
    }

    Android: com.facebook.react.common.JavascriptException: No task registered for key TrackPlayer​

    The playback service requires a headless task to be registered. You have to register it with registerPlaybackService.

    Android: Error: Attribute XXX from [androidx.core:core:XXX] is also present at [com.android.support:support-compat:XXX]​

    This error occurs when you're mixing both AndroidX and the Support Library in the same project.

    You have to either upgrade everything to AndroidX or downgrade everything to the support library.

    • For react-native-track-player, the last version to run the support library is 1.1.4 and the first version to run AndroidX is 1.2.0.
    • For react-native, the last version to run the support library is 0.59 and the first version to run AndroidX is 0.60.

    You can also use jetifier to convert all of the native code to use only one of them.

    Android: Cleartext HTTP traffic not permitted​

    Since API 28, Android disables traffic without TLS. To fix the issue you have to use https or enable clear text traffic.

    - + \ No newline at end of file diff --git a/docs/4.0/v2-migration.html b/docs/4.0/v2-migration.html index 06610f6b4..32f00ced3 100644 --- a/docs/4.0/v2-migration.html +++ b/docs/4.0/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
    Version: 4.0

    Migrating from v1 to v2

    All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

    We recommend using Typescript to have the system alert you of issues.

    When migrating from v1 to v2, the following has changed:

    // Methods

    - async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
    + async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

    - async function remove(tracks: string | string[]): Promise<void> {
    + async function remove(tracks: number | number[]): Promise<void> {

    - async function skip(trackId: string): Promise<void> {
    + function skip(trackIndex: number): Promise<void> {

    - async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
    + async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

    - async function getTrack(trackId: string): Promise<Track> {
    + async function getTrack(trackIndex: number): Promise<Track> {

    - async function getCurrentTrack(): Promise<string> {
    + async function getCurrentTrack(): Promise<number> {

    // Imports

    import TrackPlayer, {
    -  STATE_XXX,
    -  CAPABILITY_XXX,
    -  PITCH_ALGORITHM_XXX,
    -  RATING_XXX,
    +  State,
    +  Capability,
    +  PitchAlgorithm,
    +  RatingType,
    +  Event,
    +  RepeatMode
    } from 'react-native-track-player'

    // Hooks

    - useTrackPlayerProgress
    + useProgress

    // Event Listeners
    // Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

    + usePlaybackState
    + useTrackPlayerEvents
    + useProgress
    - + \ No newline at end of file diff --git a/docs/4.0/v3-migration.html b/docs/4.0/v3-migration.html index 2adfa0e2b..e72570355 100644 --- a/docs/4.0/v3-migration.html +++ b/docs/4.0/v3-migration.html @@ -5,7 +5,7 @@ Migrating from v2 to v3 | React Native Track Player - + @@ -17,7 +17,7 @@ can remove your track-player.json file if you have one. You still need to ensure that the correct type is specified on your Track object.

    - track-player.json

    Minimum Compile/Target SDK​

    You also need to have a minimum compile & target SDK of 31 (Android 12)

    // android/build.gradle
    ...
        compileSdkVersion = 31
        targetSdkVersion = 31
    ...
    - + \ No newline at end of file diff --git a/docs/4.0/v3.1.0-migration.html b/docs/4.0/v3.1.0-migration.html index 364980861..dfe88f6d2 100644 --- a/docs/4.0/v3.1.0-migration.html +++ b/docs/4.0/v3.1.0-migration.html @@ -5,13 +5,13 @@ Migrating from v3.1.0 to v3.2.0 | React Native Track Player - +
    Version: 4.0

    Migrating from v3.1.0 to v3.2.0

    stoppingAppPausesPlayback is deprecated​

    await TrackPlayer.updateOptions({
    +      android: {
    +        appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback
    +      },
          // This flag is now deprecated. Please use the above to define playback mode.
    -      stoppingAppPausesPlayback: true,
    }

    compileSdkVersion 33​

    The upgrade to v3.2.0 requires a minimum compileSdkVersion of 33:

    -        compileSdkVersion = 31
    +        compileSdkVersion = 33
    - + \ No newline at end of file diff --git a/docs/4.0/v4-migration.html b/docs/4.0/v4-migration.html index ec9ac7a94..c4ac540f6 100644 --- a/docs/4.0/v4-migration.html +++ b/docs/4.0/v4-migration.html @@ -5,7 +5,7 @@ Migrating from v3.2 to v4 | React Native Track Player - + @@ -14,7 +14,7 @@ reorganized, and so you may need to adjust your imports accordingly. If you've been importing everything directly (ex. import ... from 'react-native-track-player';) then you don't need to do anything.
  • The PlaybackStateEvent interface has been renamed to PlaybackState
    • - + \ No newline at end of file diff --git a/docs/api/constants/app-killed-playback-behavior.html b/docs/api/constants/app-killed-playback-behavior.html index 9d774115c..459385b7d 100644 --- a/docs/api/constants/app-killed-playback-behavior.html +++ b/docs/api/constants/app-killed-playback-behavior.html @@ -5,7 +5,7 @@ App Killed Playback Behavior (android-only) | React Native Track Player - + @@ -15,7 +15,7 @@ from recents. The notification remains and can be used to resume playback.

    StopPlaybackAndRemoveNotification​

    This option will stop playing audio in the background when the app is removed from recents. The notification is removed and can't be used to resume playback. Users would need to open the app again to start playing audio.

    - + \ No newline at end of file diff --git a/docs/api/constants/capability.html b/docs/api/constants/capability.html index fbbe2691c..a7d28775a 100644 --- a/docs/api/constants/capability.html +++ b/docs/api/constants/capability.html @@ -5,13 +5,13 @@ Capability | React Native Track Player - +
    Version: 4.1

    Capability

    All Capability types are made available through the named export Capability:

    import { Capability } from 'react-native-track-player';
    NameDescription
    PlayCapability indicating the ability to play
    PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
    PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
    PauseCapability indicating the ability to pause
    StopCapability indicating the ability to stop (on iOS available only for tracks where .isLiveStream is true)
    SeekToCapability indicating the ability to seek to a position in the timeline
    SkipCapability indicating the ability to skip to any song in the queue
    SkipToNextCapability indicating the ability to skip to the next track
    SkipToPreviousCapability indicating the ability to skip to the previous track
    SetRatingCapability indicating the ability to set the rating value based on the rating type
    JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
    JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
    Like(ios-only) Capability indicating the ability to like from control center
    Dislike(ios-only) Capability indicating the ability to dislike from control center
    Bookmark(ios-only) Capability indicating the ability to bookmark from control center
    - + \ No newline at end of file diff --git a/docs/api/constants/ios-category-mode.html b/docs/api/constants/ios-category-mode.html index 368a2dda3..b82e61591 100644 --- a/docs/api/constants/ios-category-mode.html +++ b/docs/api/constants/ios-category-mode.html @@ -5,7 +5,7 @@ iOS Category Mode (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ input or output.

    See the Apple Docs

    MoviePlayback​

    A mode that indicates that your app is playing back movie content.

    See the Apple Docs

    SpokenAudio​

    A mode used for continuous spoken audio to pause the audio when another app plays a short audio prompt.

    See the Apple Docs

    VideoChat​

    A mode that indicates that your app is engaging in online video conferencing.

    See the Apple Docs

    VideoRecording​

    A mode that indicates that your app is recording a movie.

    See the Apple Docs

    VoiceChat​

    A mode that indicates that your app is performing two-way voice communication, such as using Voice over Internet Protocol (VoIP).

    See the Apple Docs

    VoicePrompt​

    A mode that indicates that your app plays audio using text-to-speech.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/api/constants/ios-category-options.html b/docs/api/constants/ios-category-options.html index ce88d792f..0fc6da122 100644 --- a/docs/api/constants/ios-category-options.html +++ b/docs/api/constants/ios-category-options.html @@ -5,7 +5,7 @@ iOS Category Options (ios-only) | React Native Track Player - + @@ -18,7 +18,7 @@ to Bluetooth devices that support the Advanced Audio Distribution Profile (A2DP).

    See the Apple Docs

    AllowAirPlay​

    An option that determines whether you can stream audio from this session to AirPlay devices.

    See the Apple Docs

    DefaultToSpeaker​

    An option that determines whether audio from the session defaults to the built-in speaker instead of the receiver.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/api/constants/ios-category.html b/docs/api/constants/ios-category.html index fce05657f..0b653fdd8 100644 --- a/docs/api/constants/ios-category.html +++ b/docs/api/constants/ios-category.html @@ -5,7 +5,7 @@ iOS Category (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ Voice over Internet Protocol (VoIP) app.

    See the Apple Docs

    MultiRoute​

    The category for routing distinct streams of audio data to different output devices at the same time.

    See the Apple Docs

    Ambient​

    The category for an app in which sound playback is nonprimary — that is, your app also works with the sound turned off.

    See the Apple Docs

    SoloAmbient​

    The default audio session category.

    See the Apple Docs

    Record​

    The category for recording audio while also silencing playback audio.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/api/constants/pitch-algorithm.html b/docs/api/constants/pitch-algorithm.html index b4f2c75b6..58b311453 100644 --- a/docs/api/constants/pitch-algorithm.html +++ b/docs/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
    Version: 4.1

    Pitch Algorithm (ios-only)

    All PitchAlgorithm types are made available through the named export PitchAlgorithm:

    import { PitchAlgorithm } from 'react-native-track-player';
    NameDescription
    LinearAn algorithm suitable for general use.
    MusicAn algorithm suitable for music.
    VoiceAn algorithm suitable for voice.
    - + \ No newline at end of file diff --git a/docs/api/constants/rating.html b/docs/api/constants/rating.html index ef18a91a7..95b339ddb 100644 --- a/docs/api/constants/rating.html +++ b/docs/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
    Version: 4.1

    Rating

    All RatingType types are made available through the named export RatingType:

    import { RatingType } from 'react-native-track-player';
    NameDescription
    HeartRating type indicating "with heart" or "without heart", its value is a boolean.
    ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
    ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
    FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
    FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
    PercentageRating type indicating percentage, its value is a number.
    - + \ No newline at end of file diff --git a/docs/api/constants/repeat-mode.html b/docs/api/constants/repeat-mode.html index f9f7cc200..0e40841ef 100644 --- a/docs/api/constants/repeat-mode.html +++ b/docs/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
    Version: 4.1

    Repeat Mode

    All RepeatMode types are made available through the named export RepeatMode:

    import { RepeatMode } from 'react-native-track-player';
    NameDescription
    OffDoesn't repeat.
    TrackLoops the current track.
    QueueRepeats the whole queue.
    - + \ No newline at end of file diff --git a/docs/api/constants/state.html b/docs/api/constants/state.html index 0d3e735f1..97d24800c 100644 --- a/docs/api/constants/state.html +++ b/docs/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
    Version: 4.1

    State

    All State types are made available through the named export State:

    import { State } from 'react-native-track-player';
    NameDescription
    NoneState indicating that no media is currently loaded
    ReadyState indicates that the player is paused, but ready to start playing
    PlayingState indicating that the player is currently playing
    PausedState indicating that the player is currently paused
    StoppedState indicating that the player is currently stopped
    EndedState indicates playback stopped due to the end of the queue being reached
    BufferingState indicating that the player is currently buffering (no matter whether playback is paused or not)
    LoadingState indicating the initial loading phase of a track
    ErrorState indicating that the player experienced a playback error causing the audio to stop playing (or not start playing). When in State.Error, calling play() reloads the current track and seeks to its last known time.
    Connecting⚠️ Deprecated. Please use State.Loading instead. State indicating that the player is currently buffering (in "pause" state)
    - + \ No newline at end of file diff --git a/docs/api/events.html b/docs/api/events.html index fa9d971ab..5915f0fa7 100644 --- a/docs/api/events.html +++ b/docs/api/events.html @@ -5,7 +5,7 @@ Events | React Native Track Player - + @@ -19,7 +19,7 @@ should be paused. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is set to false, the player may resume playback.
    • ParamTypeDescription
    pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
    permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.

    Metadata​

    AudioCommonMetadataReceived​

    Fired when the current track receives metadata encoded in - static metadata not tied to a time. Usually received at start.

    Received data will be AudioCommonMetadataReceivedEvent.

    AudioTimedMetadataReceived​

    Fired when the current track receives metadata encoded in - dynamic metadata tied to a time. Events may be emitted over time.

    Received data will be AudioMetadataReceivedEvent.

    AudioChapterMetadataReceived (iOS only)​

    Fired when the current track receives metadata encoded in - chapter overview data. Usually received at start.

    Received data will be AudioMetadataReceivedEvent.

    - + \ No newline at end of file diff --git a/docs/api/functions/lifecycle.html b/docs/api/functions/lifecycle.html index a5ba2b448..08db1c328 100644 --- a/docs/api/functions/lifecycle.html +++ b/docs/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
    Version: 4.1

    Lifecycle

    setupPlayer(options: PlayerOptions)​

    Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

    These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

    You should always call this function (even without any options set) before using the player to make sure everything is initialized. Do not call this more than once in the lifetime of your app.

    Note that on Android this method must only be called while the app is in the foreground, otherwise it will throw an error with code 'android_cannot_setup_player_in_background'. In this case you can wait for the app to be in the foreground and try again.

    Returns: Promise

    ParamTypeDescriptionDefaultAndroidiOSWeb
    optionsPlayerOptionsThe options
    options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
    options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
    options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
    options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
    options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
    options.androidAudioContentTypeAndroidAudioContentTypeThe audio content type indicates to the android system how you intend to use audio in your app.AndroidAudioContentType.Music✅❌❌
    options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()IOSCategory.Playback❌✅❌
    options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
    options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
    options.autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions.false✅✅❌
    options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅✅❌

    registerPlaybackService(serviceProvider)​

    Register the playback service. The service will run as long as the player runs.

    This function should only be called once, and should be registered right after registering your React application with AppRegistry.

    You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

    ParamTypeDescription
    serviceProviderfunctionThe function that must return an async service function.

    useTrackPlayerEvents(events: Event[], handler: Handler)​

    Hook that fires on the specified events.

    You can find a list of events in the events section.

    - + \ No newline at end of file diff --git a/docs/api/functions/player.html b/docs/api/functions/player.html index d7966dd0e..c928fddb0 100644 --- a/docs/api/functions/player.html +++ b/docs/api/functions/player.html @@ -5,7 +5,7 @@ Player | React Native Track Player - + @@ -19,7 +19,7 @@ and TrackPlayer.setPlayWhenReady(true) is the equivalent of TrackPlayer.play().

    ParamTypeDescription
    playWhenReadybooleanA boolean representing if you want playWhenReady set or not.

    ⚠️ getState()​

    ⚠️ Deprecated

    Gets the playback State of the player.

    Returns: Promise<State>

    ⚠️ getDuration()​

    ⚠️ Deprecated

    Gets the duration of the current track in seconds.

    Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

    You should only trust the result of this function if you included the duration property in the Track Object.

    Returns: Promise<number>

    ⚠️ getPosition()​

    ⚠️ Deprecated

    Gets the position of the current track in seconds.

    Returns: Promise<number>

    ⚠️ getBufferedPosition()​

    ⚠️ Deprecated

    Gets the buffered position of the current track in seconds.

    Returns: Promise<number>

    - + \ No newline at end of file diff --git a/docs/api/functions/queue.html b/docs/api/functions/queue.html index 0bcb972c6..107cabc61 100644 --- a/docs/api/functions/queue.html +++ b/docs/api/functions/queue.html @@ -5,7 +5,7 @@ Queue | React Native Track Player - + @@ -15,7 +15,7 @@ If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

    Returns: Promise<void>

    ParamTypeDescription
    indexnumberThe track index
    metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

    setRepeatMode(mode)​

    Sets the repeat mode.

    ParamTypeDescription
    modeRepeat ModeThe repeat mode

    getRepeatMode()​

    Gets the repeat mode.

    Returns: Repeat Mode

    ⚠️ getCurrentTrack()​

    ⚠️ Deprecated: To get the active track index use getActiveTrackIndex() instead or use getActiveTrack() to get the active track object.

    Gets the index of the current track, or null if no track loaded

    Returns: Promise<number | null>

    - + \ No newline at end of file diff --git a/docs/api/hooks.html b/docs/api/hooks.html index cfca9fa98..e6cc0e061 100644 --- a/docs/api/hooks.html +++ b/docs/api/hooks.html @@ -5,7 +5,7 @@ Hooks | React Native Track Player - + @@ -14,7 +14,7 @@ The hook will initially return { state: undefined } while it is awaiting the initial state of the player.

    import React, { useState } from 'react';
    import { Text, View } from 'react-native';
    import { usePlaybackState, State } from 'react-native-track-player';

    const MyComponent = () => {
      const playerState = usePlaybackState();
      const isPlaying = playerState === State.Playing;

      return (
        <View>
          <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
        </View>
      );
    };

    usePlayWhenReady​

    A hook which returns the up to date state of TrackPlayer.getPlayWhenReady().

    useActiveTrack​

    A hook which keeps track of the currently active track using TrackPlayer.getActiveTrack() and Event.PlaybackActiveTrackChanged.

    - + \ No newline at end of file diff --git a/docs/api/objects/android-options.html b/docs/api/objects/android-options.html index 62bc5c8fc..8aed18ef0 100644 --- a/docs/api/objects/android-options.html +++ b/docs/api/objects/android-options.html @@ -5,13 +5,13 @@ AndroidOptions | React Native Track Player - +
    Version: 4.1

    AndroidOptions

    Options available for the android player. All options are optional.

    ParamTypeDefaultDescription
    appKilledPlaybackBehaviorAppKilledPlaybackBehaviorContinuePlaybackDefine how the audio playback should behave after removing the app from recents (killing it).
    alwaysPauseOnInterruptionbooleanfalseWhether the remote-duck event will be triggered on every interruption
    stopForegroundGracePeriodnumber5Time in seconds to wait once the player should transition to not considering the service as in the foreground. If playback resumes within this grace period, the service remains in the foreground state.
    - + \ No newline at end of file diff --git a/docs/api/objects/feedback.html b/docs/api/objects/feedback.html index d28a5a866..dcb6cc5c0 100644 --- a/docs/api/objects/feedback.html +++ b/docs/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
    Version: 4.1

    Feedback

    Controls the rendering of the control center item.

    ParamTypeDescription
    isActivebooleanMarks wether the option should be marked as active or "done"
    titlebooleanThe title to give the action (relevant for iOS)
    - + \ No newline at end of file diff --git a/docs/api/objects/metadata-options.html b/docs/api/objects/metadata-options.html index 1cdb8b7d3..a2d419026 100644 --- a/docs/api/objects/metadata-options.html +++ b/docs/api/objects/metadata-options.html @@ -5,13 +5,13 @@ ⚠️ MetadataOptions | React Native Track Player - +
    - + \ No newline at end of file diff --git a/docs/api/objects/metadata.html b/docs/api/objects/metadata.html index 3c3f779ab..b2e92d57f 100644 --- a/docs/api/objects/metadata.html +++ b/docs/api/objects/metadata.html @@ -5,13 +5,13 @@ AudioMetadataReceivedEvent | React Native Track Player - +
    Version: 4.1

    AudioMetadataReceivedEvent

    An object representing the timed or chapter metadata received for a track.

    ParamTypeDescription
    metadataAudioMetadata[]The metadata received

    AudioCommonMetadataReceivedEvent

    An object representing the common metadata received for a track.

    ParamTypeDescription
    metadataAudioCommonMetadataThe metadata received

    AudioCommonMetadata

    An object representing the common metadata received for a track.

    ParamTypeDescription
    titlestringThe track title. Might be undefined
    artiststringThe track artist. Might be undefined
    albumTitlestringThe track album. Might be undefined
    subtitlestringThe track subtitle. Might be undefined
    descriptionstringThe track description. Might be undefined
    artworkUristringThe track artwork uri. Might be undefined
    trackNumberstringThe track number. Might be undefined
    composerstringThe track composer. Might be undefined
    conductorstringThe track conductor. Might be undefined
    genrestringThe track genre. Might be undefined
    compilationstringThe track compilation. Might be undefined
    stationstringThe track station. Might be undefined
    mediaTypestringThe track media type. Might be undefined
    creationDatestringThe track creation date. Might be undefined
    creationYearstringThe track creation year. Might be undefined

    AudioMetadata

    An extension of AudioCommonMetadataReceivedEvent that includes the raw metadata.

    ParamTypeDescription
    rawRawEntry[]The raw metadata that was used to populate. May contain other non common keys. May be empty

    RawEntry

    An object representing a raw metadata entry.

    ParamTypeDescription
    commonKeystringThe common key. Might be undefined
    keySpacestringThe key space. Might be undefined
    timenumberThe time. Might be undefined
    valueunknownThe value. Might be undefined
    keystringThe key. Might be undefined
    - + \ No newline at end of file diff --git a/docs/api/objects/playback-error-event.html b/docs/api/objects/playback-error-event.html index e580427b1..8a2ee1c51 100644 --- a/docs/api/objects/playback-error-event.html +++ b/docs/api/objects/playback-error-event.html @@ -5,14 +5,14 @@ PlaybackErrorEvent | React Native Track Player - +
    Version: 4.1

    PlaybackErrorEvent

    An object denoting a playback error encountered during loading or playback of a track.

    PropertyTypeDescription
    codestringThe code values are strings prefixed with android_ on Android and ios_ on iOS.
    messagestringThe error message emitted by the native player.
    - + \ No newline at end of file diff --git a/docs/api/objects/playback-state.html b/docs/api/objects/playback-state.html index 42ca23a19..ce5454ae0 100644 --- a/docs/api/objects/playback-state.html +++ b/docs/api/objects/playback-state.html @@ -5,13 +5,13 @@ PlaybackState | React Native Track Player - +
    Version: 4.1

    PlaybackState

    An object representing the playback state of the player.

    PropertyTypeDescription
    stateStateThe current state of the player.
    errorPlaybackErrorEvent | undefinedIf the state is type Error a PlaybackErrorEvent will be present. Else undefined.
    - + \ No newline at end of file diff --git a/docs/api/objects/player-options.html b/docs/api/objects/player-options.html index 845e778de..42984f8ce 100644 --- a/docs/api/objects/player-options.html +++ b/docs/api/objects/player-options.html @@ -5,13 +5,13 @@ PlayerOptions | React Native Track Player - +
    Version: 4.1

    PlayerOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOS
    minBuffernumberMinimum duration of media that the player will attempt to buffer in seconds.✅✅
    maxBuffernumberMaximum duration of media that the player will attempt to buffer in seconds.✅❌
    backBuffernumberDuration in seconds that should be kept in the buffer behind the current playhead time.✅❌
    playBuffernumberDuration of media in seconds that must be buffered for playback to start or resume following a user action such as a seek.✅❌
    maxCacheSizenumberMaximum cache size in kilobytes.✅❌
    iosCategoryIOSCategoryAn IOSCategory. Sets on play().❌✅
    iosCategoryModeIOSCategoryModeThe audio session mode, together with the audio session category, indicates to the system how you intend to use audio in your app. You can use a mode to configure the audio system for specific use cases such as video recording, voice or video chat, or audio analysis. Sets on play().❌✅
    iosCategoryOptionsIOSCategoryOptions[]An array of IOSCategoryOptions. Sets on play().❌✅
    waitForBufferbooleanIndicates whether the player should automatically delay playback in order to minimize stalling. Defaults to true. @deprecated This option has been nominated for removal in a future version of RNTP. If you have this set to true, you can safely remove this from the options. If you are setting this to false and have a reason for that, please post a comment in the following discussion: https://github.com/doublesymmetry/react-native-track-player/pull/1695 and describe why you are doing so.✅✅
    autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification. Defaults to true.✅✅
    autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions. Defaults to false.✅✅
    androidAudioContentTypebooleanThe audio content type indicates to the android system how you intend to use audio in your app. With autoHandleInterruptions: true and androidAudioContentType: AndroidAudioContentType.Speech, the audio will be paused during short interruptions, such as when a message arrives. Otherwise the playback volume is reduced while the notification is playing. Defaults to AndroidAudioContentType.Music✅❌
    - + \ No newline at end of file diff --git a/docs/api/objects/progress.html b/docs/api/objects/progress.html index bc5d2e384..2fce25e46 100644 --- a/docs/api/objects/progress.html +++ b/docs/api/objects/progress.html @@ -5,13 +5,13 @@ Progress | React Native Track Player - +
    Version: 4.1

    Progress

    An object representing the various aspects of the active track.

    PropertyTypeDescription
    positionnumberThe playback position of the active track in seconds.
    durationnumberThe duration of the active track in seconds.
    bufferednumberThe buffered position of the active track in seconds.
    - + \ No newline at end of file diff --git a/docs/api/objects/resource.html b/docs/api/objects/resource.html index 26f79502b..c9556d8f4 100644 --- a/docs/api/objects/resource.html +++ b/docs/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
    Version: 4.1

    Resource

    Resource objects are the result of require/import for files.

    For more information about Resource Objects, read the Images section of the React Native documentation

    - + \ No newline at end of file diff --git a/docs/api/objects/track.html b/docs/api/objects/track.html index 1cacc90c0..b46efaa96 100644 --- a/docs/api/objects/track.html +++ b/docs/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
    Version: 4.1

    Track

    Tracks in the player queue are plain javascript objects as described below.

    Only the url, title and artist properties are required for basic playback

    ParamTypeDescription
    idstringThe track id
    urlstring or Resource ObjectThe media URL
    typestringStream type. One of dash, hls, smoothstreaming or default
    userAgentstringThe user agent HTTP header
    contentTypestringMime type of the media file
    durationnumberThe duration in seconds
    titlestringThe track title
    artiststringThe track artist
    albumstringThe track album
    descriptionstringThe track description
    genrestringThe track genre
    datestringThe track release date in RFC 3339
    ratingDepends on the rating typeThe track rating value
    artworkstring or Resource ObjectThe artwork url
    pitchAlgorithmPitch AlgorithmThe pitch algorithm
    headersobjectAn object containing all the headers to use in the HTTP request
    isLiveStreambooleanUsed by iOS to present live stream option in control center
    - + \ No newline at end of file diff --git a/docs/api/objects/update-options.html b/docs/api/objects/update-options.html index 6844257f4..1fe6c7f5f 100644 --- a/docs/api/objects/update-options.html +++ b/docs/api/objects/update-options.html @@ -5,13 +5,13 @@ UpdateOptions | React Native Track Player - +
    Version: 4.1

    UpdateOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOSWeb
    ratingTypeRatingTypeThe rating type✅❌❌
    forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅✅
    backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
    androidAndroidOptionsWhether the player will pause playback when the app closes✅❌❌
    likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    capabilitiesCapability[]The media controls that will be enabled✅✅❌
    notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
    compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
    iconResource ObjectThe notification icon¹✅❌❌
    playIconResource ObjectThe play icon¹✅❌❌
    pauseIconResource ObjectThe pause icon¹✅❌❌
    stopIconResource ObjectThe stop icon¹✅❌❌
    previousIconResource ObjectThe previous icon¹✅❌❌
    nextIconResource ObjectThe next icon¹✅❌❌
    rewindIconResource ObjectThe jump backward icon¹✅❌❌
    forwardIconResource ObjectThe jump forward icon¹✅❌❌
    colornumberThe notification color in an ARGB hex✅❌❌
    progressUpdateEventIntervalnumberThe interval (in seconds) that the Event.PlaybackProgressUpdated will be fired. undefined by default.✅✅✅

    ¹ - The custom icons will only work in release builds

    - + \ No newline at end of file diff --git a/docs/basics/background-mode.html b/docs/basics/background-mode.html index b770837d1..e300a3e37 100644 --- a/docs/basics/background-mode.html +++ b/docs/basics/background-mode.html @@ -5,7 +5,7 @@ Background Mode | React Native Track Player - + @@ -27,7 +27,7 @@ Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

    - + \ No newline at end of file diff --git a/docs/basics/getting-started.html b/docs/basics/getting-started.html index 3a6817b0e..bd77f5b3a 100644 --- a/docs/basics/getting-started.html +++ b/docs/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -25,7 +25,7 @@ platform specific functionalities like Android Auto.

    You can change options multiple times. You do not need to specify all the options, just the ones you want to change.

    For more information about the properties you can set, check the documentation.

    Example​

    import TrackPlayer, { Capability } from 'react-native-track-player';

    TrackPlayer.updateOptions({
        // Media controls capabilities
        capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious,
            Capability.Stop,
        ],

        // Capabilities that will show up when the notification is in the compact form on Android
        compactCapabilities: [Capability.Play, Capability.Pause],

        // Icons for the notification on Android (if you don't like the default ones)
        playIcon: require('./play-icon.png'),
        pauseIcon: require('./pause-icon.png'),
        stopIcon: require('./stop-icon.png'),
        previousIcon: require('./previous-icon.png'),
        nextIcon: require('./next-icon.png'),
        icon: require('./notification-icon.png')
    });
    - + \ No newline at end of file diff --git a/docs/basics/installation.html b/docs/basics/installation.html index e20ade824..d216c4f16 100644 --- a/docs/basics/installation.html +++ b/docs/basics/installation.html @@ -5,7 +5,7 @@ Installation | React Native Track Player - + @@ -16,7 +16,7 @@ which is an optional peer dependency of the RNTP. If you want to deploy the web platform you'll need to install shaka-player directly in your project:

    npm install --save shaka-player

    You may need to enable transmuxing support if you're using HLS streams with MPEG2-TS content.

    npm install --save mux.js

    Expo​

    You can now use React Native Track Player with Expo.

    Please be aware that while many people are using React Native Track Player with Expo successfully, the current maintainers of this project do not use Expo and their ability to resolve issues involving Expo is limited.

    To get started, create a custom development client for your Expo app and then install React Native Track Player.

    Here is the configuration required for audio playback in background:

    - + \ No newline at end of file diff --git a/docs/basics/platform-support.html b/docs/basics/platform-support.html index 2a0626172..65e574d87 100644 --- a/docs/basics/platform-support.html +++ b/docs/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
    Version: 4.1

    Platform Support

    Audio Sources​

    FeatureAndroidiOSWeb
    App bundle¹✅✅✅
    Network✅✅✅
    File System²✅✅❌

    ¹: Use require or import

    ²: Prefix the file path with file:///

    Stream Types​

    FeatureAndroidiOSWeb
    Regular Streams✅✅✅
    DASH✅❌✅
    HLS✅✅✅
    SmoothStreaming✅❌❌

    Casting​

    FeatureAndroidiOSWeb
    Google Cast¹✅❌❌
    Miracast/DLNA❌❌❌
    AirPlay❌❌❌

    ¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

    Miscellaneous​

    FeatureAndroidiOSWeb
    Media Controls✅✅❌
    Caching✅❌❌
    Background Mode¹✅✅❌

    ¹: Read more in Background Mode

    Functions​

    FunctionAndroidiOSWeb
    setupPlayer✅✅✅
    updateOptions✅✅✅
    registerPlaybackService✅✅✅
    addEventListener✅✅✅
    play✅✅✅
    pause✅✅✅
    reset✅✅✅
    setVolume✅✅✅
    getVolume✅✅✅
    setRate✅✅✅
    getRate✅✅✅
    seekTo✅✅✅
    getPosition✅✅✅
    getBufferedPosition✅✅✅
    getDuration✅✅✅
    getState✅✅✅
    getQueue✅✅✅
    getCurrentTrack✅✅✅
    getTrack✅✅✅
    add✅✅✅
    remove✅✅✅
    skip✅✅✅
    skipToPrevious✅✅✅
    skipToNext✅✅✅
    removeUpcomingTracks✅✅✅

    Events​

    EventAndroidiOSWeb
    remote-play✅✅❌
    remote-play-id✅❌❌
    remote-play-search✅❌❌
    remote-pause✅✅❌
    remote-stop✅✅❌
    remote-skip✅❌❌
    remote-next✅✅❌
    remote-previous✅✅❌
    remote-seek✅✅❌
    remote-set-rating✅❌❌
    remote-jump-forward✅✅❌
    remote-jump-backward✅✅❌
    remote-duck✅✅❌
    playback-state✅✅✅
    playback-track-changed✅✅✅
    playback-queue-ended✅✅✅
    playback-error✅✅✅
    playback-metadata-received✅✅❌
    - + \ No newline at end of file diff --git a/docs/basics/playback-service.html b/docs/basics/playback-service.html index 526affdc3..027afb3fb 100644 --- a/docs/basics/playback-service.html +++ b/docs/basics/playback-service.html @@ -5,14 +5,14 @@ Playback Service | React Native Track Player - +
    Version: 4.1

    Playback Service

    The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

    Remote Events​

    Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

    If you create a listener to a remote event like Event.RemotePause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

    Example​

    import { PlaybackService } from './src/services';

    // This needs to go right after you register the main component of your app
    // AppRegistry.registerComponent(...)
    TrackPlayer.registerPlaybackService(() => PlaybackService);
    // src/services/PlaybackService.ts
    import { Event } from 'react-native-track-player';

    export const PlaybackService = async function() {

        TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());

        TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

        // ...

    };

    Custom Media Controls Notification id & name​

    react-native-track-player is using media controls. As a result, it creates a notification channel.

    To customize it, put the example below inside your project folder.

    Example​

    <!-- YOUR_PROJECT_DIR/android/app/src/main/res/values/strings.xml -->
    <resources>
        <!-- rtnp channel id -->
        <string name="rntp_temporary_channel_id">temporary_channel</string>
        <!-- rtnp channel name -->
        <string name="rntp_temporary_channel_name">temporary_channel</string>
        <!-- playback_channel_name used by KotlinAudio in rntp -->
        <string name="playback_channel_name">Music Player</string>
    </resources>
    - + \ No newline at end of file diff --git a/docs/guides/amazon-fire-support.html b/docs/guides/amazon-fire-support.html index 7a8df2092..e94d92382 100644 --- a/docs/guides/amazon-fire-support.html +++ b/docs/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
    Version: 4.1

    Amazon FireOS Support

    Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

    Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

    Setup​

    In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

    You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

    Edit app/build.gradle​

    Add productFlavors to your build file:

    android {
      flavorDimensions "store"
      productFlavors {
        google {
          dimension "store"
        }
        amazon {
          dimension "store"
        }
      }
      ...
    }

    Override the exoplayer library, and version, by modifying the dependencies:

    dependencies {
      compile (project(':react-native-track-player')) {
        exclude group: 'com.google.android.exoplayer'
      }
      googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
      amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
      ...
    }

    Build Using Variants​

    To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

    Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

    "scripts": {
      "android-google": "react-native run-android --variant=googleDebug",
      "android-amazon": "react-native run-android --variant=amazonDebug",
      "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
      "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
      ...
    }
    - + \ No newline at end of file diff --git a/docs/guides/multitrack-progress.html b/docs/guides/multitrack-progress.html index a1d2b0d0b..f72426340 100644 --- a/docs/guides/multitrack-progress.html +++ b/docs/guides/multitrack-progress.html @@ -5,7 +5,7 @@ Multitrack Progress | React Native Track Player - + @@ -38,7 +38,7 @@ playback service and update our zustand store:

    // src/services/PlaybackService.ts
    import TrackPlayer, { Event } from 'react-native-track-player';
    import { useProgressStateStore } from '../store';

    // create a local reference for the `setProgress` function
    const setProgress = useProgressStateStore.getState().setProgress;

    export const PlaybackService = async function() {
      TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async ({ position, track }) => {
        // get the track to fetch your unique ID property (if applicable)
        const track = await TrackPlayer.getTrack(track);
        // write progress to the zustand store
        setProgress(track.id, position);
      });
    };

    ⚠️ make sure you've configured your progressUpdateEventInterval in the TrackPlayer.updateOptions call.

    3. Reactively Update Progress​

    Finally, we just need to read from the store whenever we display our track list item:

    // src/components/TrackListItem.tsx
    import type { Track } from 'react-native-track-player';
    import { useTrackProgress } from '../hooks/useTrackProgress';

    export interface TrackListItemProps {}

    export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
      const progress = useTrackProgress(track.id);
      return (
        <Text>Progress: {progress}</Text>
      );
    };

    🎊 voilà

    - + \ No newline at end of file diff --git a/docs/guides/offline-playback.html b/docs/guides/offline-playback.html index 7060f759b..677664683 100644 --- a/docs/guides/offline-playback.html +++ b/docs/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

    Hybrid Offline/Network​

    To do this you'll first need to install a package like:

    The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

    - + \ No newline at end of file diff --git a/docs/guides/play-button.html b/docs/guides/play-button.html index df13a2c6f..e554b4a7b 100644 --- a/docs/guides/play-button.html +++ b/docs/guides/play-button.html @@ -5,13 +5,13 @@ Play Buttons | React Native Track Player - +
    Version: 4.1

    Play Buttons

    UI often needs to display a Play button that changes between three states:

    1. Play
    2. Pause
    3. Spinner (e.g. if playback is being attempted, but sound is paused due to buffering)

    Implementing this correctly will take a bit of care. For instance, usePlaybackState can return State.Buffering even if playback is currently paused. usePlayWhenReady is one way to check if the player is attempting to play, but can return true even if PlaybackState is State.Error or State.Ended.

    To determine how to render a Play button in its three states correctly, do the following:

    • Render the button as a spinner if playWhenReady and state === State.Loading || state === State.Buffering
    • Else render the button as being in the Playing state if playWhenReady && !(state === State.Error || state === State.Buffering)
    • Otherwise render the button as being in the Paused state

    To help with this logic, the API has two utilities:

    1. The useIsPlaying() hook. This returns {playing: boolean | undefined, bufferingDuringPlay: boolean | undefined}, which you can consult to render your play button correctly. You should render a spinner if bufferingDuringPlay === true; otherwise render according to playing. Values are undefined if the player isn't yet in a state where they can be determined.
    2. The async isPlaying() function, which returns the same result as useIsPlaying(), but can be used outside of React components (i.e. without hooks). Note that you can't easily just instead call getPlaybackState() to determine the same answer, unless you've accounted for the issues mentioned above.
    - + \ No newline at end of file diff --git a/docs/guides/saving-progress.html b/docs/guides/saving-progress.html index 8de2af315..57ddbba18 100644 --- a/docs/guides/saving-progress.html +++ b/docs/guides/saving-progress.html @@ -5,7 +5,7 @@ Saving Progress | React Native Track Player - + @@ -27,7 +27,7 @@ Playback Service, based on the Event.PlaybackProgressUpdated event. These events fire all the time, including when your app is playing back remotely.

    - + \ No newline at end of file diff --git a/docs/guides/sleeptimers.html b/docs/guides/sleeptimers.html index c96fdd334..ee05f8381 100644 --- a/docs/guides/sleeptimers.html +++ b/docs/guides/sleeptimers.html @@ -5,7 +5,7 @@ Sleeptimers | React Native Track Player - + @@ -15,7 +15,7 @@ to understand the concept of "remote" playback and why coupling playback events to the UI is a bad idea.

    Once you've understood that concept, this concept is nearly identical. You would leverage the same Event.PlaybackProgressUpdated event in this scenario too.

    Here's how you would use an event to implement a sleep timer:

    1. The user configures a sleep timer in the UI.
    2. Persist the time they configure in a store as a timestamp.
    3. Each time the progress event fires you check your persisted sleep timer timestamp.
      • IF sleeptime !== null && sleeptime <= now THEN pause.
    - + \ No newline at end of file diff --git a/docs/intro.html b/docs/intro.html index 24251aa5d..a6deb33ef 100644 --- a/docs/intro.html +++ b/docs/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
    Version: 4.1

    Intro

    A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

    Features​

    • Lightweight - Optimized to use the least amount of resources according to your needs
    • Feels native - As everything is built together, it follows the same design principles as real music apps do
    • Multi-platform - Supports Android, iOS and Web
    • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
    • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
    • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
    • Caching support - Cache media files to play them again without an internet connection
    • Background support - Keep playing audio even after the app is in background
    • Fully Customizable - Even the notification icons are customizable!
    • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
    • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

    Example​

    If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

    import TrackPlayer, { RepeatMode } from 'react-native-track-player';

    // Creates the player
    const setup = async () => {
      await TrackPlayer.setupPlayer({});

      await TrackPlayer.add({
        url: require('track.mp3'),
        title: 'Track Title',
        artist: 'Track Artist',
        artwork: require('track.png')
      });

      TrackPlayer.setRepeatMode(RepeatMode.Queue);
    };
    - + \ No newline at end of file diff --git a/docs/next/api/constants/app-killed-playback-behavior.html b/docs/next/api/constants/app-killed-playback-behavior.html index af79d87ca..851ed5743 100644 --- a/docs/next/api/constants/app-killed-playback-behavior.html +++ b/docs/next/api/constants/app-killed-playback-behavior.html @@ -5,7 +5,7 @@ App Killed Playback Behavior (android-only) | React Native Track Player - + @@ -15,7 +15,7 @@ from recents. The notification remains and can be used to resume playback.

    StopPlaybackAndRemoveNotification​

    This option will stop playing audio in the background when the app is removed from recents. The notification is removed and can't be used to resume playback. Users would need to open the app again to start playing audio.

    - + \ No newline at end of file diff --git a/docs/next/api/constants/capability.html b/docs/next/api/constants/capability.html index 9a4b425a4..b44b7878c 100644 --- a/docs/next/api/constants/capability.html +++ b/docs/next/api/constants/capability.html @@ -5,13 +5,13 @@ Capability | React Native Track Player - +
    Version: Next

    Capability

    All Capability types are made available through the named export Capability:

    import { Capability } from 'react-native-track-player';
    NameDescription
    PlayCapability indicating the ability to play
    PlayFromIdCapability indicating the ability to play from a track id (Required for Android Auto)
    PlayFromSearchCapability indicating the ability to play from a text/voice search (Required for Android Auto)
    PauseCapability indicating the ability to pause
    StopCapability indicating the ability to stop (on iOS available only for tracks where .isLiveStream is true)
    SeekToCapability indicating the ability to seek to a position in the timeline
    SkipCapability indicating the ability to skip to any song in the queue
    SkipToNextCapability indicating the ability to skip to the next track
    SkipToPreviousCapability indicating the ability to skip to the previous track
    SetRatingCapability indicating the ability to set the rating value based on the rating type
    JumpForwardCapability indicating the ability to jump forward by the amount of seconds specified in the options
    JumpBackwardCapability indicating the ability to jump backward by the amount of seconds specified in the options
    Like(ios-only) Capability indicating the ability to like from control center
    Dislike(ios-only) Capability indicating the ability to dislike from control center
    Bookmark(ios-only) Capability indicating the ability to bookmark from control center
    - + \ No newline at end of file diff --git a/docs/next/api/constants/ios-category-mode.html b/docs/next/api/constants/ios-category-mode.html index 2d5be83b9..62c06f362 100644 --- a/docs/next/api/constants/ios-category-mode.html +++ b/docs/next/api/constants/ios-category-mode.html @@ -5,7 +5,7 @@ iOS Category Mode (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ input or output.

    See the Apple Docs

    MoviePlayback​

    A mode that indicates that your app is playing back movie content.

    See the Apple Docs

    SpokenAudio​

    A mode used for continuous spoken audio to pause the audio when another app plays a short audio prompt.

    See the Apple Docs

    VideoChat​

    A mode that indicates that your app is engaging in online video conferencing.

    See the Apple Docs

    VideoRecording​

    A mode that indicates that your app is recording a movie.

    See the Apple Docs

    VoiceChat​

    A mode that indicates that your app is performing two-way voice communication, such as using Voice over Internet Protocol (VoIP).

    See the Apple Docs

    VoicePrompt​

    A mode that indicates that your app plays audio using text-to-speech.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/next/api/constants/ios-category-options.html b/docs/next/api/constants/ios-category-options.html index 266a20719..22f6b387a 100644 --- a/docs/next/api/constants/ios-category-options.html +++ b/docs/next/api/constants/ios-category-options.html @@ -5,7 +5,7 @@ iOS Category Options (ios-only) | React Native Track Player - + @@ -18,7 +18,7 @@ to Bluetooth devices that support the Advanced Audio Distribution Profile (A2DP).

    See the Apple Docs

    AllowAirPlay​

    An option that determines whether you can stream audio from this session to AirPlay devices.

    See the Apple Docs

    DefaultToSpeaker​

    An option that determines whether audio from the session defaults to the built-in speaker instead of the receiver.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/next/api/constants/ios-category.html b/docs/next/api/constants/ios-category.html index 602b90dfc..5ca66bc6c 100644 --- a/docs/next/api/constants/ios-category.html +++ b/docs/next/api/constants/ios-category.html @@ -5,7 +5,7 @@ iOS Category (ios-only) | React Native Track Player - + @@ -15,7 +15,7 @@ Voice over Internet Protocol (VoIP) app.

    See the Apple Docs

    MultiRoute​

    The category for routing distinct streams of audio data to different output devices at the same time.

    See the Apple Docs

    Ambient​

    The category for an app in which sound playback is nonprimary — that is, your app also works with the sound turned off.

    See the Apple Docs

    SoloAmbient​

    The default audio session category.

    See the Apple Docs

    Record​

    The category for recording audio while also silencing playback audio.

    See the Apple Docs

    - + \ No newline at end of file diff --git a/docs/next/api/constants/pitch-algorithm.html b/docs/next/api/constants/pitch-algorithm.html index 5702cad31..4e9bc92fa 100644 --- a/docs/next/api/constants/pitch-algorithm.html +++ b/docs/next/api/constants/pitch-algorithm.html @@ -5,13 +5,13 @@ Pitch Algorithm (ios-only) | React Native Track Player - +
    Version: Next

    Pitch Algorithm (ios-only)

    All PitchAlgorithm types are made available through the named export PitchAlgorithm:

    import { PitchAlgorithm } from 'react-native-track-player';
    NameDescription
    LinearAn algorithm suitable for general use.
    MusicAn algorithm suitable for music.
    VoiceAn algorithm suitable for voice.
    - + \ No newline at end of file diff --git a/docs/next/api/constants/rating.html b/docs/next/api/constants/rating.html index e0c5bdee8..f7b7bb06e 100644 --- a/docs/next/api/constants/rating.html +++ b/docs/next/api/constants/rating.html @@ -5,13 +5,13 @@ Rating | React Native Track Player - +
    Version: Next

    Rating

    All RatingType types are made available through the named export RatingType:

    import { RatingType } from 'react-native-track-player';
    NameDescription
    HeartRating type indicating "with heart" or "without heart", its value is a boolean.
    ThumbsUpDownRating type indicating "thumbs up" or "thumbs down", its value is a boolean.
    ThreeStarsRating type indicating 0 to 3 stars, its value is a number of stars.
    FourStarsRating type indicating 0 to 4 stars, its value is a number of stars.
    FiveStarsRating type indicating 0 to 5 stars, its value is a number of stars.
    PercentageRating type indicating percentage, its value is a number.
    - + \ No newline at end of file diff --git a/docs/next/api/constants/repeat-mode.html b/docs/next/api/constants/repeat-mode.html index b57dcb2d4..5a531af88 100644 --- a/docs/next/api/constants/repeat-mode.html +++ b/docs/next/api/constants/repeat-mode.html @@ -5,13 +5,13 @@ Repeat Mode | React Native Track Player - +
    Version: Next

    Repeat Mode

    All RepeatMode types are made available through the named export RepeatMode:

    import { RepeatMode } from 'react-native-track-player';
    NameDescription
    OffDoesn't repeat.
    TrackLoops the current track.
    QueueRepeats the whole queue.
    - + \ No newline at end of file diff --git a/docs/next/api/constants/state.html b/docs/next/api/constants/state.html index 15211fdda..20488e9bf 100644 --- a/docs/next/api/constants/state.html +++ b/docs/next/api/constants/state.html @@ -5,13 +5,13 @@ State | React Native Track Player - +
    Version: Next

    State

    All State types are made available through the named export State:

    import { State } from 'react-native-track-player';
    NameDescription
    NoneState indicating that no media is currently loaded
    ReadyState indicates that the player is paused, but ready to start playing
    PlayingState indicating that the player is currently playing
    PausedState indicating that the player is currently paused
    StoppedState indicating that the player is currently stopped
    EndedState indicates playback stopped due to the end of the queue being reached
    BufferingState indicating that the player is currently buffering (no matter whether playback is paused or not)
    LoadingState indicating the initial loading phase of a track
    ErrorState indicating that the player experienced a playback error causing the audio to stop playing (or not start playing). When in State.Error, calling play() reloads the current track and seeks to its last known time.
    Connecting⚠️ Deprecated. Please use State.Loading instead. State indicating that the player is currently buffering (in "pause" state)
    - + \ No newline at end of file diff --git a/docs/next/api/events.html b/docs/next/api/events.html index 9b41d7cd7..128baa027 100644 --- a/docs/next/api/events.html +++ b/docs/next/api/events.html @@ -5,7 +5,7 @@ Events | React Native Track Player - + @@ -19,7 +19,7 @@ should be paused. When permanent is also set to true, on Android the player should stop playback.
  • When the event is triggered and paused is set to false, the player may resume playback.
    • ParamTypeDescription
    pausedbooleanOn Android when true the player should pause playback, when false the player may resume playback. On iOS when true the playback was paused and when false the player may resume playback.
    permanentbooleanWhether the interruption is permanent. On Android the player should stop playback.

    Metadata​

    AudioCommonMetadataReceived​

    Fired when the current track receives metadata encoded in - static metadata not tied to a time. Usually received at start.

    Received data will be AudioCommonMetadataReceivedEvent.

    AudioTimedMetadataReceived​

    Fired when the current track receives metadata encoded in - dynamic metadata tied to a time. Events may be emitted over time.

    Received data will be AudioMetadataReceivedEvent.

    AudioChapterMetadataReceived (iOS only)​

    Fired when the current track receives metadata encoded in - chapter overview data. Usually received at start.

    Received data will be AudioMetadataReceivedEvent.

    - + \ No newline at end of file diff --git a/docs/next/api/functions/lifecycle.html b/docs/next/api/functions/lifecycle.html index 1efc1b801..fbfd5d9aa 100644 --- a/docs/next/api/functions/lifecycle.html +++ b/docs/next/api/functions/lifecycle.html @@ -5,13 +5,13 @@ Lifecycle | React Native Track Player - +
    Version: Next

    Lifecycle

    setupPlayer(options: PlayerOptions)​

    Initializes the player with the specified options. These options do not apply to all platforms, see chart below.

    These options are different than the ones set using updateOptions(). Options other than those listed below will not be applied.

    You should always call this function (even without any options set) before using the player to make sure everything is initialized. Do not call this more than once in the lifetime of your app.

    Note that on Android this method must only be called while the app is in the foreground, otherwise it will throw an error with code 'android_cannot_setup_player_in_background'. In this case you can wait for the app to be in the foreground and try again.

    Returns: Promise

    ParamTypeDescriptionDefaultAndroidiOSWeb
    optionsPlayerOptionsThe options
    options.minBuffernumberMinimum time in seconds that needs to be buffered15 (android), automatic (ios)✅✅❌
    options.maxBuffernumberMaximum time in seconds that needs to be buffered50✅❌❌
    options.playBuffernumberMinimum time in seconds that needs to be buffered to start playing2.5✅❌❌
    options.backBuffernumberTime in seconds that should be kept in the buffer behind the current playhead time.0✅❌❌
    options.maxCacheSizenumberMaximum cache size in kilobytes0✅❌❌
    options.androidAudioContentTypeAndroidAudioContentTypeThe audio content type indicates to the android system how you intend to use audio in your app.AndroidAudioContentType.Music✅❌❌
    options.iosCategoryIOSCategoryAVAudioSession.Category for iOS. Sets on play()IOSCategory.Playback❌✅❌
    options.iosCategoryOptionsIOSCategoryOptions[]AVAudioSession.CategoryOptions for iOS. Sets on play()[]❌✅❌
    options.iosCategoryModeIOSCategoryModeAVAudioSession.Mode for iOS. Sets on play()default❌✅❌
    options.autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions.false✅✅❌
    options.autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification.true✅✅❌

    registerPlaybackService(serviceProvider)​

    Register the playback service. The service will run as long as the player runs.

    This function should only be called once, and should be registered right after registering your React application with AppRegistry.

    You should use the playback service to register the event handlers that must be directly tied to the player, as the playback service might keep running when the app is in background.

    ParamTypeDescription
    serviceProviderfunctionThe function that must return an async service function.

    useTrackPlayerEvents(events: Event[], handler: Handler)​

    Hook that fires on the specified events.

    You can find a list of events in the events section.

    - + \ No newline at end of file diff --git a/docs/next/api/functions/player.html b/docs/next/api/functions/player.html index 852511fa8..3fada08aa 100644 --- a/docs/next/api/functions/player.html +++ b/docs/next/api/functions/player.html @@ -5,7 +5,7 @@ Player | React Native Track Player - + @@ -19,7 +19,7 @@ and TrackPlayer.setPlayWhenReady(true) is the equivalent of TrackPlayer.play().

    ParamTypeDescription
    playWhenReadybooleanA boolean representing if you want playWhenReady set or not.

    ⚠️ getState()​

    ⚠️ Deprecated

    Gets the playback State of the player.

    Returns: Promise<State>

    ⚠️ getDuration()​

    ⚠️ Deprecated

    Gets the duration of the current track in seconds.

    Note: react-native-track-player is a streaming library, which means it slowly buffers the track and doesn't know exactly when it ends. The duration returned by this function is determined through various tricks and may not be exact or may not be available at all.

    You should only trust the result of this function if you included the duration property in the Track Object.

    Returns: Promise<number>

    ⚠️ getPosition()​

    ⚠️ Deprecated

    Gets the position of the current track in seconds.

    Returns: Promise<number>

    ⚠️ getBufferedPosition()​

    ⚠️ Deprecated

    Gets the buffered position of the current track in seconds.

    Returns: Promise<number>

    - + \ No newline at end of file diff --git a/docs/next/api/functions/queue.html b/docs/next/api/functions/queue.html index 8a8be1681..b925d6a1a 100644 --- a/docs/next/api/functions/queue.html +++ b/docs/next/api/functions/queue.html @@ -5,17 +5,17 @@ Queue | React Native Track Player - +
    Version: Next

    Queue

    add(tracks, insertBeforeIndex)​

    Adds one or more tracks to the queue.

    Returns: Promise<number | void> - The promise resolves with the first -added track index. If no tracks were added it returns void.

    ParamTypeDescription
    tracksTrack \| Track[]The Track objects that will be added
    insertBeforeIndexnumberThe index of the track that will be located immediately after the inserted tracks. Set it to null to add it at the end of the queue

    remove(tracks)​

    Removes one or more tracks from the queue. If the current track is removed, the next track will activated. If the current track was the last track in the queue, the first track will be activated.

    Returns: Promise<void>

    ParamTypeDescription
    tracksTrack \| Track[]The Track objects that will be removed

    setQueue(tracks)​

    Clears the current queue and adds the supplied tracks to the now empty queue.

    Returns: Promise<void>

    ParamTypeDescription
    tracksTrack[]An array of Track to replace the current queue with.

    load(track)​

    Replaces the current track with the supplied track or creates a track when the queue is empty.

    ParamTypeDescription
    trackTrackThe Track object that will be loaded

    skip(index, initialPosition)​

    Skips to a track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    indexnumberThe track index
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    skipToNext(initialPosition)​

    Skips to the next track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    skipToPrevious(initialPosition)​

    Skips to the previous track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    move(fromIndex, toIndex)​

    Moves a track from the specified index to another.

    ParamTypeDescription
    fromIndexnumberThe index of the track you'd like to move.
    toIndexnumberThe position you'd like to move the track to.

    reset()​

    Resets the player stopping the current track and clearing the queue.

    getTrack(index)​

    Gets a track object from the queue.

    Returns: Promise<Track>

    ParamTypeDescription
    indexnumberThe track index

    getActiveTrack()​

    Gets the active track object.

    Returns: Promise<Track | undefined>

    getActiveTrackIndex()​

    Gets the index of the current track, or undefined if no track loaded

    Returns: Promise<number | undefined>

    getQueue()​

    Gets the whole queue

    Returns: Promise<Track[]>

    removeUpcomingTracks()​

    Clears any upcoming tracks from the queue.

    updateMetadataForTrack(index, metadata)​

    Updates the metadata of a track in the queue. +added track index. If no tracks were added it returns void.

    ParamTypeDescription
    tracksTrack \| Track[]The Track objects that will be added
    insertBeforeIndexnumberThe index of the track that will be located immediately after the inserted tracks. Set it to null to add it at the end of the queue

    remove(indexes)​

    Removes one or more tracks from the queue by indexes. If the current track is removed, the next track will activated. If the current track was the last track in the queue, the first track will be activated.

    Returns: Promise<void>

    ParamTypeDescription
    indexesnumber \| number[]The index or indices of tracks in the queue that will be removed

    setQueue(tracks)​

    Clears the current queue and adds the supplied tracks to the now empty queue.

    Returns: Promise<void>

    ParamTypeDescription
    tracksTrack[]An array of Track to replace the current queue with.

    load(track)​

    Replaces the current track with the supplied track or creates a track when the queue is empty.

    ParamTypeDescription
    trackTrackThe Track object that will be loaded

    skip(index, initialPosition)​

    Skips to a track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    indexnumberThe track index
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    skipToNext(initialPosition)​

    Skips to the next track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    skipToPrevious(initialPosition)​

    Skips to the previous track in the queue.

    Returns: Promise<void>

    ParamTypeDescription
    initialPositionnumberOptional. Sets the initial playback for the track you're skipping to.

    move(fromIndex, toIndex)​

    Moves a track from the specified index to another.

    ParamTypeDescription
    fromIndexnumberThe index of the track you'd like to move.
    toIndexnumberThe position you'd like to move the track to.

    reset()​

    Resets the player stopping the current track and clearing the queue.

    getTrack(index)​

    Gets a track object from the queue.

    Returns: Promise<Track>

    ParamTypeDescription
    indexnumberThe track index

    getActiveTrack()​

    Gets the active track object.

    Returns: Promise<Track | undefined>

    getActiveTrackIndex()​

    Gets the index of the current track, or undefined if no track loaded

    Returns: Promise<number | undefined>

    getQueue()​

    Gets the whole queue

    Returns: Promise<Track[]>

    removeUpcomingTracks()​

    Clears any upcoming tracks from the queue.

    updateMetadataForTrack(index, metadata)​

    Updates the metadata of a track in the queue. If the current track is updated, the notification and the Now Playing Center will be updated accordingly.

    Returns: Promise<void>

    ParamTypeDescription
    indexnumberThe track index
    metadataobjectA subset of the Track Object with only the artwork, title, artist, album, description, genre, date, rating and duration properties.

    setRepeatMode(mode)​

    Sets the repeat mode.

    ParamTypeDescription
    modeRepeat ModeThe repeat mode

    getRepeatMode()​

    Gets the repeat mode.

    Returns: Repeat Mode

    ⚠️ getCurrentTrack()​

    ⚠️ Deprecated: To get the active track index use getActiveTrackIndex() instead or use -getActiveTrack() to get the active track object.

    Gets the index of the current track, or null if no track loaded

    Returns: Promise<number | null>

    - +getActiveTrack() to get the active track object.

    Gets the index of the current track, or null if no track loaded

    Returns: Promise<number | null>

    + \ No newline at end of file diff --git a/docs/next/api/hooks.html b/docs/next/api/hooks.html index 34a0efb7a..da34b8b8d 100644 --- a/docs/next/api/hooks.html +++ b/docs/next/api/hooks.html @@ -5,7 +5,7 @@ Hooks | React Native Track Player - + @@ -14,7 +14,7 @@ The hook will initially return { state: undefined } while it is awaiting the initial state of the player.

    import React, { useState } from 'react';
    import { Text, View } from 'react-native';
    import { usePlaybackState, State } from 'react-native-track-player';

    const MyComponent = () => {
      const playerState = usePlaybackState();
      const isPlaying = playerState === State.Playing;

      return (
        <View>
          <Text>The TrackPlayer is {isPlaying ? 'playing' : 'not playing'}</Text>
        </View>
      );
    };

    usePlayWhenReady​

    A hook which returns the up to date state of TrackPlayer.getPlayWhenReady().

    useActiveTrack​

    A hook which keeps track of the currently active track using TrackPlayer.getActiveTrack() and Event.PlaybackActiveTrackChanged.

    - + \ No newline at end of file diff --git a/docs/next/api/objects/android-options.html b/docs/next/api/objects/android-options.html index 03605a19a..8147b6b7a 100644 --- a/docs/next/api/objects/android-options.html +++ b/docs/next/api/objects/android-options.html @@ -5,13 +5,13 @@ AndroidOptions | React Native Track Player - +
    Version: Next

    AndroidOptions

    Options available for the android player. All options are optional.

    ParamTypeDefaultDescription
    appKilledPlaybackBehaviorAppKilledPlaybackBehaviorContinuePlaybackDefine how the audio playback should behave after removing the app from recents (killing it).
    alwaysPauseOnInterruptionbooleanfalseWhether the remote-duck event will be triggered on every interruption
    stopForegroundGracePeriodnumber5Time in seconds to wait once the player should transition to not considering the service as in the foreground. If playback resumes within this grace period, the service remains in the foreground state.
    - + \ No newline at end of file diff --git a/docs/next/api/objects/feedback.html b/docs/next/api/objects/feedback.html index b9d533431..9111a616f 100644 --- a/docs/next/api/objects/feedback.html +++ b/docs/next/api/objects/feedback.html @@ -5,13 +5,13 @@ Feedback | React Native Track Player - +
    Version: Next

    Feedback

    Controls the rendering of the control center item.

    ParamTypeDescription
    isActivebooleanMarks wether the option should be marked as active or "done"
    titlebooleanThe title to give the action (relevant for iOS)
    - + \ No newline at end of file diff --git a/docs/next/api/objects/metadata-options.html b/docs/next/api/objects/metadata-options.html index d84ad8102..c2e8d3550 100644 --- a/docs/next/api/objects/metadata-options.html +++ b/docs/next/api/objects/metadata-options.html @@ -5,13 +5,13 @@ ⚠️ MetadataOptions | React Native Track Player - +
    - + \ No newline at end of file diff --git a/docs/next/api/objects/metadata.html b/docs/next/api/objects/metadata.html index 23092a081..b7444dc8c 100644 --- a/docs/next/api/objects/metadata.html +++ b/docs/next/api/objects/metadata.html @@ -5,13 +5,13 @@ AudioMetadataReceivedEvent | React Native Track Player - +
    Version: Next

    AudioMetadataReceivedEvent

    An object representing the timed or chapter metadata received for a track.

    ParamTypeDescription
    metadataAudioMetadata[]The metadata received

    AudioCommonMetadataReceivedEvent

    An object representing the common metadata received for a track.

    ParamTypeDescription
    metadataAudioCommonMetadataThe metadata received

    AudioCommonMetadata

    An object representing the common metadata received for a track.

    ParamTypeDescription
    titlestringThe track title. Might be undefined
    artiststringThe track artist. Might be undefined
    albumTitlestringThe track album. Might be undefined
    subtitlestringThe track subtitle. Might be undefined
    descriptionstringThe track description. Might be undefined
    artworkUristringThe track artwork uri. Might be undefined
    trackNumberstringThe track number. Might be undefined
    composerstringThe track composer. Might be undefined
    conductorstringThe track conductor. Might be undefined
    genrestringThe track genre. Might be undefined
    compilationstringThe track compilation. Might be undefined
    stationstringThe track station. Might be undefined
    mediaTypestringThe track media type. Might be undefined
    creationDatestringThe track creation date. Might be undefined
    creationYearstringThe track creation year. Might be undefined

    AudioMetadata

    An extension of AudioCommonMetadataReceivedEvent that includes the raw metadata.

    ParamTypeDescription
    rawRawEntry[]The raw metadata that was used to populate. May contain other non common keys. May be empty

    RawEntry

    An object representing a raw metadata entry.

    ParamTypeDescription
    commonKeystringThe common key. Might be undefined
    keySpacestringThe key space. Might be undefined
    timenumberThe time. Might be undefined
    valueunknownThe value. Might be undefined
    keystringThe key. Might be undefined
    - + \ No newline at end of file diff --git a/docs/next/api/objects/playback-error-event.html b/docs/next/api/objects/playback-error-event.html index bfb62631e..91658f69f 100644 --- a/docs/next/api/objects/playback-error-event.html +++ b/docs/next/api/objects/playback-error-event.html @@ -5,14 +5,14 @@ PlaybackErrorEvent | React Native Track Player - +
    Version: Next

    PlaybackErrorEvent

    An object denoting a playback error encountered during loading or playback of a track.

    PropertyTypeDescription
    codestringThe code values are strings prefixed with android_ on Android and ios_ on iOS.
    messagestringThe error message emitted by the native player.
    - + \ No newline at end of file diff --git a/docs/next/api/objects/playback-state.html b/docs/next/api/objects/playback-state.html index 2604b023c..6f566fe2c 100644 --- a/docs/next/api/objects/playback-state.html +++ b/docs/next/api/objects/playback-state.html @@ -5,13 +5,13 @@ PlaybackState | React Native Track Player - +
    Version: Next

    PlaybackState

    An object representing the playback state of the player.

    PropertyTypeDescription
    stateStateThe current state of the player.
    errorPlaybackErrorEvent | undefinedIf the state is type Error a PlaybackErrorEvent will be present. Else undefined.
    - + \ No newline at end of file diff --git a/docs/next/api/objects/player-options.html b/docs/next/api/objects/player-options.html index 13883b850..b3e8fd042 100644 --- a/docs/next/api/objects/player-options.html +++ b/docs/next/api/objects/player-options.html @@ -5,13 +5,13 @@ PlayerOptions | React Native Track Player - +
    Version: Next

    PlayerOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOS
    minBuffernumberMinimum duration of media that the player will attempt to buffer in seconds.✅✅
    maxBuffernumberMaximum duration of media that the player will attempt to buffer in seconds.✅❌
    backBuffernumberDuration in seconds that should be kept in the buffer behind the current playhead time.✅❌
    playBuffernumberDuration of media in seconds that must be buffered for playback to start or resume following a user action such as a seek.✅❌
    maxCacheSizenumberMaximum cache size in kilobytes.✅❌
    iosCategoryIOSCategoryAn IOSCategory. Sets on play().❌✅
    iosCategoryModeIOSCategoryModeThe audio session mode, together with the audio session category, indicates to the system how you intend to use audio in your app. You can use a mode to configure the audio system for specific use cases such as video recording, voice or video chat, or audio analysis. Sets on play().❌✅
    iosCategoryOptionsIOSCategoryOptions[]An array of IOSCategoryOptions. Sets on play().❌✅
    waitForBufferbooleanIndicates whether the player should automatically delay playback in order to minimize stalling. Defaults to true. @deprecated This option has been nominated for removal in a future version of RNTP. If you have this set to true, you can safely remove this from the options. If you are setting this to false and have a reason for that, please post a comment in the following discussion: https://github.com/doublesymmetry/react-native-track-player/pull/1695 and describe why you are doing so.✅✅
    autoUpdateMetadatabooleanIndicates whether the player should automatically update now playing metadata data in control center / notification. Defaults to true.✅✅
    autoHandleInterruptionsbooleanIndicates whether the player should automatically handle audio interruptions. Defaults to false.✅✅
    androidAudioContentTypebooleanThe audio content type indicates to the android system how you intend to use audio in your app. With autoHandleInterruptions: true and androidAudioContentType: AndroidAudioContentType.Speech, the audio will be paused during short interruptions, such as when a message arrives. Otherwise the playback volume is reduced while the notification is playing. Defaults to AndroidAudioContentType.Music✅❌
    - + \ No newline at end of file diff --git a/docs/next/api/objects/progress.html b/docs/next/api/objects/progress.html index 26fbb987e..e504389cf 100644 --- a/docs/next/api/objects/progress.html +++ b/docs/next/api/objects/progress.html @@ -5,13 +5,13 @@ Progress | React Native Track Player - +
    Version: Next

    Progress

    An object representing the various aspects of the active track.

    PropertyTypeDescription
    positionnumberThe playback position of the active track in seconds.
    durationnumberThe duration of the active track in seconds.
    bufferednumberThe buffered position of the active track in seconds.
    - + \ No newline at end of file diff --git a/docs/next/api/objects/resource.html b/docs/next/api/objects/resource.html index 9236709fe..11c8b3b03 100644 --- a/docs/next/api/objects/resource.html +++ b/docs/next/api/objects/resource.html @@ -5,13 +5,13 @@ Resource | React Native Track Player - +
    Version: Next

    Resource

    Resource objects are the result of require/import for files.

    For more information about Resource Objects, read the Images section of the React Native documentation

    - + \ No newline at end of file diff --git a/docs/next/api/objects/track.html b/docs/next/api/objects/track.html index 9169b1bae..12df83efa 100644 --- a/docs/next/api/objects/track.html +++ b/docs/next/api/objects/track.html @@ -5,13 +5,13 @@ Track | React Native Track Player - +
    Version: Next

    Track

    Tracks in the player queue are plain javascript objects as described below.

    Only the url, title and artist properties are required for basic playback

    ParamTypeDescription
    idstringThe track id
    urlstring or Resource ObjectThe media URL
    typestringStream type. One of dash, hls, smoothstreaming or default
    userAgentstringThe user agent HTTP header
    contentTypestringMime type of the media file
    durationnumberThe duration in seconds
    titlestringThe track title
    artiststringThe track artist
    albumstringThe track album
    descriptionstringThe track description
    genrestringThe track genre
    datestringThe track release date in RFC 3339
    ratingDepends on the rating typeThe track rating value
    artworkstring or Resource ObjectThe artwork url
    pitchAlgorithmPitch AlgorithmThe pitch algorithm
    headersobjectAn object containing all the headers to use in the HTTP request
    isLiveStreambooleanUsed by iOS to present live stream option in control center
    - + \ No newline at end of file diff --git a/docs/next/api/objects/update-options.html b/docs/next/api/objects/update-options.html index f7c813094..e452c05a4 100644 --- a/docs/next/api/objects/update-options.html +++ b/docs/next/api/objects/update-options.html @@ -5,13 +5,13 @@ UpdateOptions | React Native Track Player - +
    Version: Next

    UpdateOptions

    All parameters are optional. You also only need to specify the ones you want to update.

    ParamTypeDescriptionAndroidiOSWeb
    ratingTypeRatingTypeThe rating type✅❌❌
    forwardJumpIntervalnumberThe interval in seconds for the jump forward buttons (if only one is given then we use that value for both)✅✅✅
    backwardJumpIntervalnumberThe interval in seconds for the jump backward buttons (if only one is given then we use that value for both)✅✅✅
    androidAndroidOptionsWhether the player will pause playback when the app closes✅❌❌
    likeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    dislikeOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    bookmarkOptionsFeedbackOptionsThe media controls that will be enabled❌✅❌
    capabilitiesCapability[]The media controls that will be enabled✅✅❌
    notificationCapabilitiesCapability[]The buttons that it will show in the notification. Defaults to data.capabilities✅❌❌
    compactCapabilitiesCapability[]The buttons that it will show in the compact notification✅❌❌
    iconResource ObjectThe notification icon¹✅❌❌
    playIconResource ObjectThe play icon¹✅❌❌
    pauseIconResource ObjectThe pause icon¹✅❌❌
    stopIconResource ObjectThe stop icon¹✅❌❌
    previousIconResource ObjectThe previous icon¹✅❌❌
    nextIconResource ObjectThe next icon¹✅❌❌
    rewindIconResource ObjectThe jump backward icon¹✅❌❌
    forwardIconResource ObjectThe jump forward icon¹✅❌❌
    colornumberThe notification color in an ARGB hex✅❌❌
    progressUpdateEventIntervalnumberThe interval (in seconds) that the Event.PlaybackProgressUpdated will be fired. undefined by default.✅✅✅

    ¹ - The custom icons will only work in release builds

    - + \ No newline at end of file diff --git a/docs/next/basics/background-mode.html b/docs/next/basics/background-mode.html index 09c8b4daf..6ce14e0f4 100644 --- a/docs/next/basics/background-mode.html +++ b/docs/next/basics/background-mode.html @@ -5,7 +5,7 @@ Background Mode | React Native Track Player - + @@ -27,7 +27,7 @@ Now Playing Info from the simulator. You will not be able to test lock screen controls on recent versions of iOS Simulator. You can either test on real devices, or download older versions of the iOS Simulator.

    - + \ No newline at end of file diff --git a/docs/next/basics/getting-started.html b/docs/next/basics/getting-started.html index 8f490988f..c681dc5b3 100644 --- a/docs/next/basics/getting-started.html +++ b/docs/next/basics/getting-started.html @@ -5,7 +5,7 @@ Getting Started | React Native Track Player - + @@ -17,7 +17,7 @@ changing nature of the playback state. For example, subscribe to the Event.PlaybackTrackChanged event to be notified when the track has changed or subscribe to the Event.PlaybackState event to be notified when the player -buffers, plays, pauses and stops.

    Example​

    import TrackPlayer, { Event } from 'react-native-track-player';

    const PlayerInfo = () => {
        const [trackTitle, setTrackTitle] = useState<string>();

        // do initial setup, set initial trackTitle..

        useTrackPlayerEvents([Event.PlaybackTrackChanged], async event => {
            if (event.type === Event.PlaybackTrackChanged && event.nextTrack != null) {
                const track = await TrackPlayer.getTrack(event.nextTrack);
                const {title} = track || {};
                setTrackTitle(title);
            }
        });

        return (
            <Text>{trackTitle}</Text>
        );
    }

    Progress Updates​

    Music apps often need an automated way to show the progress of a playing track. +buffers, plays, pauses and stops.

    Example​

    import TrackPlayer, { Event } from 'react-native-track-player';

    const PlayerInfo = () => {
        const [trackTitle, setTrackTitle] = useState<string>();

        // do initial setup, set initial trackTitle..

        useTrackPlayerEvents([Event.PlaybackActiveTrackChanged], async event => {
            if (event.type === Event.PlaybackActiveTrackChanged && event.track != null) {
                const {title} = event.track || {};
                setTrackTitle(title);
            }
        });

        return (
            <Text>{trackTitle}</Text>
        );
    }

    Progress Updates​

    Music apps often need an automated way to show the progress of a playing track. For this purpose, we created the hook: useProgress which updates itself automatically.

    Example​

    import TrackPlayer, { useProgress } from 'react-native-track-player';

    const MyPlayerBar = () => {
        const progress = useProgress();

        return (
                // Note: formatTime and ProgressBar are just examples:
                <View>
                    <Text>{formatTime(progress.position)}</Text>
                    <ProgressBar
                        progress={progress.position}
                        buffered={progress.buffered}
                    />
                </View>
            );

    }

    Track Player Options​

    Track Player can be configured using a number of options. Some of these options pertain to the media controls available in the lockscreen / notification and how @@ -25,7 +25,7 @@ platform specific functionalities like Android Auto.

    You can change options multiple times. You do not need to specify all the options, just the ones you want to change.

    For more information about the properties you can set, check the documentation.

    Example​

    import TrackPlayer, { Capability } from 'react-native-track-player';

    TrackPlayer.updateOptions({
        // Media controls capabilities
        capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious,
            Capability.Stop,
        ],

        // Capabilities that will show up when the notification is in the compact form on Android
        compactCapabilities: [Capability.Play, Capability.Pause],

        // Icons for the notification on Android (if you don't like the default ones)
        playIcon: require('./play-icon.png'),
        pauseIcon: require('./pause-icon.png'),
        stopIcon: require('./stop-icon.png'),
        previousIcon: require('./previous-icon.png'),
        nextIcon: require('./next-icon.png'),
        icon: require('./notification-icon.png')
    });
    - + \ No newline at end of file diff --git a/docs/next/basics/installation.html b/docs/next/basics/installation.html index 10de61230..7d225bf39 100644 --- a/docs/next/basics/installation.html +++ b/docs/next/basics/installation.html @@ -5,7 +5,7 @@ Installation | React Native Track Player - + @@ -16,7 +16,7 @@ which is an optional peer dependency of the RNTP. If you want to deploy the web platform you'll need to install shaka-player directly in your project:

    npm install --save shaka-player

    You may need to enable transmuxing support if you're using HLS streams with MPEG2-TS content.

    npm install --save mux.js

    Expo​

    You can now use React Native Track Player with Expo.

    Please be aware that while many people are using React Native Track Player with Expo successfully, the current maintainers of this project do not use Expo and their ability to resolve issues involving Expo is limited.

    To get started, create a custom development client for your Expo app and then install React Native Track Player.

    Here is the configuration required for audio playback in background:

    - + \ No newline at end of file diff --git a/docs/next/basics/platform-support.html b/docs/next/basics/platform-support.html index 2a1483c7d..b3c7d0a60 100644 --- a/docs/next/basics/platform-support.html +++ b/docs/next/basics/platform-support.html @@ -5,13 +5,13 @@ Platform Support | React Native Track Player - +
    Version: Next

    Platform Support

    Audio Sources​

    FeatureAndroidiOSWeb
    App bundle¹✅✅✅
    Network✅✅✅
    File System²✅✅❌

    ¹: Use require or import

    ²: Prefix the file path with file:///

    Stream Types​

    FeatureAndroidiOSWeb
    Regular Streams✅✅✅
    DASH✅❌✅
    HLS✅✅✅
    SmoothStreaming✅❌❌

    Casting​

    FeatureAndroidiOSWeb
    Google Cast¹✅❌❌
    Miracast/DLNA❌❌❌
    AirPlay❌❌❌

    ¹: Google Cast support has been moved to react-native-track-casting (WIP) which can be used in combination with react-native-track-player.

    Miscellaneous​

    FeatureAndroidiOSWeb
    Media Controls✅✅❌
    Caching✅❌❌
    Background Mode¹✅✅❌

    ¹: Read more in Background Mode

    Functions​

    FunctionAndroidiOSWeb
    setupPlayer✅✅✅
    updateOptions✅✅✅
    registerPlaybackService✅✅✅
    addEventListener✅✅✅
    play✅✅✅
    pause✅✅✅
    reset✅✅✅
    setVolume✅✅✅
    getVolume✅✅✅
    setRate✅✅✅
    getRate✅✅✅
    seekTo✅✅✅
    getPosition✅✅✅
    getBufferedPosition✅✅✅
    getDuration✅✅✅
    getState✅✅✅
    getQueue✅✅✅
    getCurrentTrack✅✅✅
    getTrack✅✅✅
    add✅✅✅
    remove✅✅✅
    skip✅✅✅
    skipToPrevious✅✅✅
    skipToNext✅✅✅
    removeUpcomingTracks✅✅✅

    Events​

    EventAndroidiOSWeb
    remote-play✅✅❌
    remote-play-id✅❌❌
    remote-play-search✅❌❌
    remote-pause✅✅❌
    remote-stop✅✅❌
    remote-skip✅❌❌
    remote-next✅✅❌
    remote-previous✅✅❌
    remote-seek✅✅❌
    remote-set-rating✅❌❌
    remote-jump-forward✅✅❌
    remote-jump-backward✅✅❌
    remote-duck✅✅❌
    playback-state✅✅✅
    playback-track-changed✅✅✅
    playback-queue-ended✅✅✅
    playback-error✅✅✅
    playback-metadata-received✅✅❌
    - + \ No newline at end of file diff --git a/docs/next/basics/playback-service.html b/docs/next/basics/playback-service.html index 98292d3c4..fbc520810 100644 --- a/docs/next/basics/playback-service.html +++ b/docs/next/basics/playback-service.html @@ -5,14 +5,14 @@ Playback Service | React Native Track Player - +
    Version: Next

    Playback Service

    The playback service keeps running even when the app is in the background. It will start when the player is set up and will only stop when the player is destroyed. It is a good idea to put any code in there that needs to be directly tied to the player state. For example, if you want to be able to track what is being played for analytics purposes, the playback service would be the place to do so.

    Remote Events​

    Remote events are sent from places outside of our user interface that we can react to. For example if the user presses the pause media control in the IOS lockscreen / Android notification or from their Bluetooth headset, we want to have TrackPlayer pause the audio.

    If you create a listener to a remote event like Event.RemotePause in the context of a React component, there is a chance the UI will be unmounted automatically when the app is in the background, causing it to be missed. For this reason it is best to place remote listeners in the playback service, since it will keep running even when the app is in the background.

    Example​

    import { PlaybackService } from './src/services';

    // This needs to go right after you register the main component of your app
    // AppRegistry.registerComponent(...)
    TrackPlayer.registerPlaybackService(() => PlaybackService);
    // src/services/PlaybackService.ts
    import { Event } from 'react-native-track-player';

    export const PlaybackService = async function() {

        TrackPlayer.addEventListener(Event.RemotePlay, () => TrackPlayer.play());

        TrackPlayer.addEventListener(Event.RemotePause, () => TrackPlayer.pause());

        // ...

    };

    Custom Media Controls Notification id & name​

    react-native-track-player is using media controls. As a result, it creates a notification channel.

    To customize it, put the example below inside your project folder.

    Example​

    <!-- YOUR_PROJECT_DIR/android/app/src/main/res/values/strings.xml -->
    <resources>
        <!-- rtnp channel id -->
        <string name="rntp_temporary_channel_id">temporary_channel</string>
        <!-- rtnp channel name -->
        <string name="rntp_temporary_channel_name">temporary_channel</string>
        <!-- playback_channel_name used by KotlinAudio in rntp -->
        <string name="playback_channel_name">Music Player</string>
    </resources>
    - + \ No newline at end of file diff --git a/docs/next/guides/amazon-fire-support.html b/docs/next/guides/amazon-fire-support.html index fd59583ec..9b1fc579f 100644 --- a/docs/next/guides/amazon-fire-support.html +++ b/docs/next/guides/amazon-fire-support.html @@ -5,13 +5,13 @@ Amazon FireOS Support | React Native Track Player - +
    Version: Next

    Amazon FireOS Support

    Support for Android in react-native-track-player is built on top of the ExoPlayer media player library provided by Google. ExoPlayer does not officially support Amazon's FireOS fork of Android, because it does not pass Android CTS. ExoPlayer seems to work decently on FireOS 5, but it hardly works at all on FireOS 4.

    Thankfully, Amazon maintains a ported version of ExoPlayer that can be used as a direct replacement as long as matching versions are used.

    Setup​

    In order to fully support FireOS, you will need to build separate APKs for Google and Amazon. This can be accomplised using gradle flavors.

    You will need to choose a ExoPlayer version that has been ported by Amazon, and that is close enough to the version that react-native-track-player currently uses, in order to compile. In this example we have chosen to use 2.9.0.

    Edit app/build.gradle​

    Add productFlavors to your build file:

    android {
      flavorDimensions "store"
      productFlavors {
        google {
          dimension "store"
        }
        amazon {
          dimension "store"
        }
      }
      ...
    }

    Override the exoplayer library, and version, by modifying the dependencies:

    dependencies {
      compile (project(':react-native-track-player')) {
        exclude group: 'com.google.android.exoplayer'
      }
      googleImplementation 'com.google.android.exoplayer:exoplayer-core:2.10.1'
      amazonImplementation 'com.amazon.android:exoplayer-core:2.10.1'
      ...
    }

    Build Using Variants​

    To make builds using either Google or Amazon libraries, you will need to specify a build variant when you build.

    Here are some examples of react-native commands using the --variant parameter that can be added as scripts in package.json:

    "scripts": {
      "android-google": "react-native run-android --variant=googleDebug",
      "android-amazon": "react-native run-android --variant=amazonDebug",
      "android-release-google": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=googleRelease",
      "android-release-amazon": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle && react-native run-android --variant=amazonRelease",
      ...
    }
    - + \ No newline at end of file diff --git a/docs/next/guides/multitrack-progress.html b/docs/next/guides/multitrack-progress.html index d29758f55..9d739e9f3 100644 --- a/docs/next/guides/multitrack-progress.html +++ b/docs/next/guides/multitrack-progress.html @@ -5,7 +5,7 @@ Multitrack Progress | React Native Track Player - + @@ -38,7 +38,7 @@ playback service and update our zustand store:

    // src/services/PlaybackService.ts
    import TrackPlayer, { Event } from 'react-native-track-player';
    import { useProgressStateStore } from '../store';

    // create a local reference for the `setProgress` function
    const setProgress = useProgressStateStore.getState().setProgress;

    export const PlaybackService = async function() {
      TrackPlayer.addEventListener(Event.PlaybackProgressUpdated, async ({ position, track }) => {
        // get the track to fetch your unique ID property (if applicable)
        const track = await TrackPlayer.getTrack(track);
        // write progress to the zustand store
        setProgress(track.id, position);
      });
    };

    ⚠️ make sure you've configured your progressUpdateEventInterval in the TrackPlayer.updateOptions call.

    3. Reactively Update Progress​

    Finally, we just need to read from the store whenever we display our track list item:

    // src/components/TrackListItem.tsx
    import type { Track } from 'react-native-track-player';
    import { useTrackProgress } from '../hooks/useTrackProgress';

    export interface TrackListItemProps {}

    export const TrackListItem: React.FC<TrackListItemProps> = (track: Track) => {
      const progress = useTrackProgress(track.id);
      return (
        <Text>Progress: {progress}</Text>
      );
    };

    🎊 voilà

    - + \ No newline at end of file diff --git a/docs/next/guides/offline-playback.html b/docs/next/guides/offline-playback.html index 5db193026..57f1e89cc 100644 --- a/docs/next/guides/offline-playback.html +++ b/docs/next/guides/offline-playback.html @@ -5,7 +5,7 @@ Offline Playback | React Native Track Player - + @@ -22,7 +22,7 @@ the Hybrid Offline/Network approach.

    Hybrid Offline/Network​

    To do this you'll first need to install a package like:

    The typical approach is to then create a download button in your app, which, once clicked, uses one of the above packages to download your audio to a local file. Then voila! Simply play the local file after download.

    - + \ No newline at end of file diff --git a/docs/next/guides/play-button.html b/docs/next/guides/play-button.html index 31a9e3f1e..332f7b777 100644 --- a/docs/next/guides/play-button.html +++ b/docs/next/guides/play-button.html @@ -5,13 +5,13 @@ Play Buttons | React Native Track Player - +
    Version: Next

    Play Buttons

    UI often needs to display a Play button that changes between three states:

    1. Play
    2. Pause
    3. Spinner (e.g. if playback is being attempted, but sound is paused due to buffering)

    Implementing this correctly will take a bit of care. For instance, usePlaybackState can return State.Buffering even if playback is currently paused. usePlayWhenReady is one way to check if the player is attempting to play, but can return true even if PlaybackState is State.Error or State.Ended.

    To determine how to render a Play button in its three states correctly, do the following:

    • Render the button as a spinner if playWhenReady and state === State.Loading || state === State.Buffering
    • Else render the button as being in the Playing state if playWhenReady && !(state === State.Error || state === State.Buffering)
    • Otherwise render the button as being in the Paused state

    To help with this logic, the API has two utilities:

    1. The useIsPlaying() hook. This returns {playing: boolean | undefined, bufferingDuringPlay: boolean | undefined}, which you can consult to render your play button correctly. You should render a spinner if bufferingDuringPlay === true; otherwise render according to playing. Values are undefined if the player isn't yet in a state where they can be determined.
    2. The async isPlaying() function, which returns the same result as useIsPlaying(), but can be used outside of React components (i.e. without hooks). Note that you can't easily just instead call getPlaybackState() to determine the same answer, unless you've accounted for the issues mentioned above.
    - + \ No newline at end of file diff --git a/docs/next/guides/saving-progress.html b/docs/next/guides/saving-progress.html index 226d27942..b383c5500 100644 --- a/docs/next/guides/saving-progress.html +++ b/docs/next/guides/saving-progress.html @@ -5,7 +5,7 @@ Saving Progress | React Native Track Player - + @@ -27,7 +27,7 @@ Playback Service, based on the Event.PlaybackProgressUpdated event. These events fire all the time, including when your app is playing back remotely.

    - + \ No newline at end of file diff --git a/docs/next/guides/sleeptimers.html b/docs/next/guides/sleeptimers.html index ecc5c2b89..11e9f716e 100644 --- a/docs/next/guides/sleeptimers.html +++ b/docs/next/guides/sleeptimers.html @@ -5,7 +5,7 @@ Sleeptimers | React Native Track Player - + @@ -15,7 +15,7 @@ to understand the concept of "remote" playback and why coupling playback events to the UI is a bad idea.

    Once you've understood that concept, this concept is nearly identical. You would leverage the same Event.PlaybackProgressUpdated event in this scenario too.

    Here's how you would use an event to implement a sleep timer:

    1. The user configures a sleep timer in the UI.
    2. Persist the time they configure in a store as a timestamp.
    3. Each time the progress event fires you check your persisted sleep timer timestamp.
      • IF sleeptime !== null && sleeptime <= now THEN pause.
    - + \ No newline at end of file diff --git a/docs/next/intro.html b/docs/next/intro.html index c92d40d4d..cb5ee65dc 100644 --- a/docs/next/intro.html +++ b/docs/next/intro.html @@ -5,7 +5,7 @@ Intro | React Native Track Player - + @@ -13,7 +13,7 @@
    Version: Next

    Intro

    A fully fledged audio module created for music apps. Provides audio playback, external media controls, background mode and more!

    Features​

    • Lightweight - Optimized to use the least amount of resources according to your needs
    • Feels native - As everything is built together, it follows the same design principles as real music apps do
    • Multi-platform - Supports Android, iOS and Web
    • Media Controls support - Provides events for controlling the app from a bluetooth device, the lockscreen, a notification, a smartwatch or even a car
    • Local or network, files or streams - It doesn't matter where the media belongs, we've got you covered
    • Adaptive bitrate streaming support - Support for DASH, HLS or SmoothStreaming
    • Caching support - Cache media files to play them again without an internet connection
    • Background support - Keep playing audio even after the app is in background
    • Fully Customizable - Even the notification icons are customizable!
    • Supports React Hooks 🎣 - Includes React Hooks for common use-cases so you don't have to write them
    • Casting support - Use in combination with react-native-track-casting (WIP) to seamlessly switch to any Google Cast compatible device that supports custom media receivers

    Example​

    If you want to get started with this module, check the Installation & Getting Started page. If you want detailed information about the API, check the API Reference. You can also look at our example project here.

    import TrackPlayer, { RepeatMode } from 'react-native-track-player';

    // Creates the player
    const setup = async () => {
      await TrackPlayer.setupPlayer({});

      await TrackPlayer.add({
        url: require('track.mp3'),
        title: 'Track Title',
        artist: 'Track Artist',
        artwork: require('track.png')
      });

      TrackPlayer.setRepeatMode(RepeatMode.Queue);
    };
    - + \ No newline at end of file diff --git a/docs/next/troubleshooting.html b/docs/next/troubleshooting.html index fcd3332f5..964d2eb56 100644 --- a/docs/next/troubleshooting.html +++ b/docs/next/troubleshooting.html @@ -5,7 +5,7 @@ Troubleshooting | React Native Track Player - + @@ -18,7 +18,7 @@ will be used use to transmux TS content into MP4 on-the-fly, so that the content can be played by the browser.

    NOTE: there are some limitations to mux.js so not all possible content codec's are supported.

    - + \ No newline at end of file diff --git a/docs/next/v2-migration.html b/docs/next/v2-migration.html index b791270c1..2d8a4cb00 100644 --- a/docs/next/v2-migration.html +++ b/docs/next/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
    Version: Next

    Migrating from v1 to v2

    All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

    We recommend using Typescript to have the system alert you of issues.

    When migrating from v1 to v2, the following has changed:

    // Methods

    - async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
    + async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

    - async function remove(tracks: string | string[]): Promise<void> {
    + async function remove(tracks: number | number[]): Promise<void> {

    - async function skip(trackId: string): Promise<void> {
    + function skip(trackIndex: number): Promise<void> {

    - async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
    + async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

    - async function getTrack(trackId: string): Promise<Track> {
    + async function getTrack(trackIndex: number): Promise<Track> {

    - async function getCurrentTrack(): Promise<string> {
    + async function getCurrentTrack(): Promise<number> {

    // Imports

    import TrackPlayer, {
    -  STATE_XXX,
    -  CAPABILITY_XXX,
    -  PITCH_ALGORITHM_XXX,
    -  RATING_XXX,
    +  State,
    +  Capability,
    +  PitchAlgorithm,
    +  RatingType,
    +  Event,
    +  RepeatMode
    } from 'react-native-track-player'

    // Hooks

    - useTrackPlayerProgress
    + useProgress

    // Event Listeners
    // Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

    + usePlaybackState
    + useTrackPlayerEvents
    + useProgress
    - + \ No newline at end of file diff --git a/docs/next/v3-migration.html b/docs/next/v3-migration.html index 2792275c5..c2192d03a 100644 --- a/docs/next/v3-migration.html +++ b/docs/next/v3-migration.html @@ -5,7 +5,7 @@ Migrating from v2 to v3 | React Native Track Player - + @@ -17,7 +17,7 @@ can remove your track-player.json file if you have one. You still need to ensure that the correct type is specified on your Track object.

    - track-player.json

    Minimum Compile/Target SDK​

    You also need to have a minimum compile & target SDK of 31 (Android 12)

    // android/build.gradle
    ...
        compileSdkVersion = 31
        targetSdkVersion = 31
    ...
    - + \ No newline at end of file diff --git a/docs/next/v3.1.0-migration.html b/docs/next/v3.1.0-migration.html index 9ed69c142..747aca59f 100644 --- a/docs/next/v3.1.0-migration.html +++ b/docs/next/v3.1.0-migration.html @@ -5,13 +5,13 @@ Migrating from v3.1.0 to v3.2.0 | React Native Track Player - +
    Version: Next

    Migrating from v3.1.0 to v3.2.0

    stoppingAppPausesPlayback is deprecated​

    await TrackPlayer.updateOptions({
    +      android: {
    +        appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback
    +      },
          // This flag is now deprecated. Please use the above to define playback mode.
    -      stoppingAppPausesPlayback: true,
    }

    compileSdkVersion 33​

    The upgrade to v3.2.0 requires a minimum compileSdkVersion of 33:

    -        compileSdkVersion = 31
    +        compileSdkVersion = 33
    - + \ No newline at end of file diff --git a/docs/next/v4-migration.html b/docs/next/v4-migration.html index eaf1bb29f..ae1d8199c 100644 --- a/docs/next/v4-migration.html +++ b/docs/next/v4-migration.html @@ -5,7 +5,7 @@ Migrating from v3.2 to v4 | React Native Track Player - + @@ -14,7 +14,7 @@ reorganized, and so you may need to adjust your imports accordingly. If you've been importing everything directly (ex. import ... from 'react-native-track-player';) then you don't need to do anything.
  • The PlaybackStateEvent interface has been renamed to PlaybackState
    • - + \ No newline at end of file diff --git a/docs/troubleshooting.html b/docs/troubleshooting.html index c7a7a6d1d..b51098a7b 100644 --- a/docs/troubleshooting.html +++ b/docs/troubleshooting.html @@ -5,7 +5,7 @@ Troubleshooting | React Native Track Player - + @@ -18,7 +18,7 @@ will be used use to transmux TS content into MP4 on-the-fly, so that the content can be played by the browser.

    NOTE: there are some limitations to mux.js so not all possible content codec's are supported.

    - + \ No newline at end of file diff --git a/docs/v2-migration.html b/docs/v2-migration.html index 40ac29cd3..4707be50d 100644 --- a/docs/v2-migration.html +++ b/docs/v2-migration.html @@ -5,13 +5,13 @@ Migrating from v1 to v2 | React Native Track Player - +
    Version: 4.1

    Migrating from v1 to v2

    All queue methods have been updating to work on indexes instead of id's. We want this library to support all kinds of apps -- and moving to be index based will allow us to better support applications who have long/endless queues and in the future to allow us to build a performant API around queue management.

    We recommend using Typescript to have the system alert you of issues.

    When migrating from v1 to v2, the following has changed:

    // Methods

    - async function add(tracks: Track | Track[], insertBeforeId?: string): Promise<void> {
    + async function add(tracks: Track | Track[], insertBeforeIndex?: number): Promise<void> {

    - async function remove(tracks: string | string[]): Promise<void> {
    + async function remove(tracks: number | number[]): Promise<void> {

    - async function skip(trackId: string): Promise<void> {
    + function skip(trackIndex: number): Promise<void> {

    - async function updateMetadataForTrack(trackId: string, metadata: TrackMetadataBase): Promise<void> {
    + async function updateMetadataForTrack(trackIndex: number, metadata: TrackMetadataBase): Promise<void> {

    - async function getTrack(trackId: string): Promise<Track> {
    + async function getTrack(trackIndex: number): Promise<Track> {

    - async function getCurrentTrack(): Promise<string> {
    + async function getCurrentTrack(): Promise<number> {

    // Imports

    import TrackPlayer, {
    -  STATE_XXX,
    -  CAPABILITY_XXX,
    -  PITCH_ALGORITHM_XXX,
    -  RATING_XXX,
    +  State,
    +  Capability,
    +  PitchAlgorithm,
    +  RatingType,
    +  Event,
    +  RepeatMode
    } from 'react-native-track-player'

    // Hooks

    - useTrackPlayerProgress
    + useProgress

    // Event Listeners
    // Refrain from using: TrackPlayer.addEventListener() and instead use the provided hooks

    + usePlaybackState
    + useTrackPlayerEvents
    + useProgress
    - + \ No newline at end of file diff --git a/docs/v3-migration.html b/docs/v3-migration.html index 871cad1f1..8e0184014 100644 --- a/docs/v3-migration.html +++ b/docs/v3-migration.html @@ -5,7 +5,7 @@ Migrating from v2 to v3 | React Native Track Player - + @@ -17,7 +17,7 @@ can remove your track-player.json file if you have one. You still need to ensure that the correct type is specified on your Track object.

    - track-player.json

    Minimum Compile/Target SDK​

    You also need to have a minimum compile & target SDK of 31 (Android 12)

    // android/build.gradle
    ...
        compileSdkVersion = 31
        targetSdkVersion = 31
    ...
    - + \ No newline at end of file diff --git a/docs/v3.1.0-migration.html b/docs/v3.1.0-migration.html index def664bb1..3418aaa12 100644 --- a/docs/v3.1.0-migration.html +++ b/docs/v3.1.0-migration.html @@ -5,13 +5,13 @@ Migrating from v3.1.0 to v3.2.0 | React Native Track Player - +
    Version: 4.1

    Migrating from v3.1.0 to v3.2.0

    stoppingAppPausesPlayback is deprecated​

    await TrackPlayer.updateOptions({
    +      android: {
    +        appKilledPlaybackBehavior: AppKilledPlaybackBehavior.ContinuePlayback
    +      },
          // This flag is now deprecated. Please use the above to define playback mode.
    -      stoppingAppPausesPlayback: true,
    }

    compileSdkVersion 33​

    The upgrade to v3.2.0 requires a minimum compileSdkVersion of 33:

    -        compileSdkVersion = 31
    +        compileSdkVersion = 33
    - + \ No newline at end of file diff --git a/docs/v4-migration.html b/docs/v4-migration.html index 0e7aa42b2..a35f81a8f 100644 --- a/docs/v4-migration.html +++ b/docs/v4-migration.html @@ -5,7 +5,7 @@ Migrating from v3.2 to v4 | React Native Track Player - + @@ -14,7 +14,7 @@ reorganized, and so you may need to adjust your imports accordingly. If you've been importing everything directly (ex. import ... from 'react-native-track-player';) then you don't need to do anything.
  • The PlaybackStateEvent interface has been renamed to PlaybackState
    • - + \ No newline at end of file diff --git a/index.html b/index.html index f25b1cdbc..d6583b7c1 100644 --- a/index.html +++ b/index.html @@ -5,13 +5,13 @@ React Native Track Player | React Native Track Player - +

    React Native Track Player

    A fully fledged audio module created for music apps

    downloadsnpmdiscord
    Get StartedJoin the Community

    Lightweight & Feels Native

    Optimized to use the least amount of resources according to your needs. As everything is built together, it follows the same design principles as real music apps do.

    Robust Building Blocks

    Local or network, files or stream. Adaptive bitrate with DASH, HLS or SmoothStreaming. Background playback. Caching. Media Controls, and more!

    Multi-Platform Support

    Supports Android, iOS and Web.

    - + \ No newline at end of file diff --git a/search.html b/search.html index fbb72d150..b672406c2 100644 --- a/search.html +++ b/search.html @@ -5,13 +5,13 @@ Search the documentation | React Native Track Player - +

    Search the documentation

    - + \ No newline at end of file