Introducción - Introduction

Español

Una aplicación que representa un reprodutor de música con música interna de la aplicación y un enlace a un mp3 online.

English

An application that represents a music player with internal application music and a link to an online mp3.

Preguntas - Questions ?

Español

1. ¿Está listo mi reproductor?

2. ¿Se han añadido pistas a la cola de reproducción?

3. ¿Estoy escuchando el evento del reproductor?

English

1. Is my player ready?

2. Are tracks added to player queue?

3. Am i listening to player event? </aside>

npm packages

https://www.npmjs.com/package/react-native-vector-icons

https://www.npmjs.com/package/@react-native-community/slider

https://rntp.dev/

Crear un servicio de música en react-native - Create a music service in react native

constants.ts

import { Track } from "react-native-track-player";

export const playListData: Track[] = [
    {
      id: 1,
      title: 'Look Both Ways',
      artist: 'Nathan Moore',
      album: 'Look Both Ways',
      artwork:
        'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2Ff5hqe3E8Uks%2Fhqdefault.jpg&f=1&nofb=1&ipt=5040ea1b10ae2a55e99069ba21f74473dce47654b801c1f2db7f0f5b23afd606&ipo=images',
      url: require('./assets/audio/one.mp3'),
    },
    {
      id: 2,
      title: 'Skylines',
      artist: 'Anno Domini Beats',
      album: 'Skylines',
      artwork:
        'https://i.ytimg.com/vi/Ze5V_RNEv8o/maxresdefault.jpg',
      url: require('./assets/audio/two.mp3'),
    },
    {
      id: 3,
      title: 'Eveything Has a Beginning',
      artist: 'Joel Cummins',
      album: 'Eveything Has a Beginning',
      artwork:
        'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2F6hRIH1TcRj0%2Fmaxresdefault.jpg&f=1&nofb=1&ipt=beafe57d3feac85429b625d59db63c7d8e997dae3636a6cae4219ee16a1f6e64&ipo=images',
      url: require('./assets/audio/three.mp3'),
    },
    {
      id: 4,
      title: 'Od Yishama',
      artist: 'E´s Jammy Jams',
      album: 'Od Yishama',
      artwork:
        'https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fi.ytimg.com%2Fvi%2FE3H8AhheodA%2Fmaxresdefault.jpg&f=1&nofb=1&ipt=15e843af8fdf86ff28a967c66a90d21e931132c419eaa0636cf7489a2e56608a&ipo=images',
      url: require('./assets/audio/four.mp3'),
    },
    {
      id: 5,
      title: 'Happy Day',
      artist: 'film music',
      album: 'Happy Day',
      artwork:
        'https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fwww.lovethispic.com%2Fuploaded_images%2F284588-Happy-Day.jpg&f=1&nofb=1&ipt=932f8652d73b4c29de73b720a01d0e9a1e3115b308f34674133d1b6039d2ef92&ipo=images',
      url: 'https://cdn.filmmusic.io/storage/user_upload/filmmusic/music/mp3low/1531773107-3160.mp3',
    },
  ];

Español

Este código define una lista de pistas de música para una aplicación de React Native utilizando la biblioteca react-native-track-player. Cada pista es un objeto que contiene información sobre la canción, como el título, el artista, el álbum, la URL de la imagen de la portada y la URL de la pista de audio.

1. Importación de Track: Primero, importamos el tipo Track desde la biblioteca react-native-track-player. Este tipo se utiliza para definir la estructura de los objetos de pista que se van a utilizar en la aplicación.

2. Definición de playListData: Luego, definimos una constante llamada playListData que es un array de objetos Track. Cada objeto Track representa una canción en la lista de reproducción.

3. Objetos Track: Cada objeto Track contiene varias propiedades:

   • id: Un identificador único para la canción.

   • title: El título de la canción.

   • artist: El artista de la canción.

   • album: El álbum al que pertenece la canción.

   • artwork: La URL de la imagen de la portada de la canción.

   • url: La URL de la pista de audio de la canción.

4. Uso de require para los archivos locales: Para las pistas de audio que están almacenadas localmente en la aplicación (por ejemplo, one.mp3), utilizamos la función require para importar el archivo. Esto es necesario porque React Native maneja los archivos locales de manera diferente a las URLs externas.

5. Uso de URLs externas: Para la última canción en la lista, la URL de la pista de audio es una URL externa. Esto significa que la canción se reproduce desde un servidor en línea.

English

1. Importing Track: First, we import the Track type from the react-native-track-player library. This type is used to define the structure of the track objects that will be used in the application.

2. Defining playListData: Then, we define a constant called playListData which is an array of Track objects. Each Track object represents a song in the playlist.

3. Track Objects: Each Track object contains several properties:

   • id: A unique identifier for the song.

   • title: The title of the song.

   • artist: The artist of the song.

   • album: The album the song belongs to.

   • artwork: The URL of the song's cover image.

   • url: The URL of the song's audio track.

4. Using require for Local Files: For audio tracks that are stored locally in the application (e.g., one.mp3), we use the require function to import the file. This is necessary because React Native handles local files differently from external URLs.

5. Using External URLs: For the last song in the list, the audio track URL is an external URL. This means the song is played from a server online.

musicPlayerServices.js

import TrackPlayer, { Event, RepeatMode, Capability } from "react-native-track-player";

import { playListData } from './src/constants';

export async function setupPlayer() {
    let isSetup = false;
    try {
        await TrackPlayer.getCurrentTrack();
        isSetup = true;
    } catch (error) {
        await TrackPlayer.setupPlayer();
        isSetup = true;
    } finally {
        return isSetup;
    }
}

export async function addTrack() {
    await TrackPlayer.add(playListData);
    await TrackPlayer.setRepeatMode(RepeatMode.Queue);
}

export async function playbackService() {
    // Configura las capacidades del reproductor
    await TrackPlayer.updateOptions({
        capabilities: [
            Capability.Play,
            Capability.Pause,
            Capability.SkipToNext,
            Capability.SkipToPrevious,
            // Puedes agregar más capacidades según tus necesidades
        ],
        compactCapabilities: [Capability.Play, Capability.Pause], 
    });

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

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

    TrackPlayer.addEventListener(Event.RemoteNext, () => {
        TrackPlayer.skipToNext();
    });

    TrackPlayer.addEventListener(Event.RemotePrevious, () => {
        TrackPlayer.skipToPrevious();
    });
}

Este código en React Native utiliza la biblioteca react-native-track-player para configurar un reproductor de música en una aplicación.

Español

1. Importación de módulos: Se importan TrackPlayer, Event, RepeatMode, y Capability de react-native-track-player, así como playListData de un archivo local.

2. Función setupPlayer: Esta función verifica si el reproductor ya está configurado. Intenta obtener la pista actual con TrackPlayer.getCurrentTrack(). Si no hay error, el reproductor ya está configurado y la función retorna true. Si hay un error (lo que indica que el reproductor no está configurado), se configura el reproductor con TrackPlayer.setupPlayer() y se retorna true.

3. Función addTrack: Agrega todas las pistas de playListData al reproductor con TrackPlayer.add(playListData) y configura el modo de repetición a RepeatMode.Queue, lo que significa que la lista de reproducción se repetirá en orden.

4. Función playbackService: Configura las capacidades del reproductor para permitir operaciones como reproducir, pausar, saltar a la siguiente y a la anterior pista. Establece compactCapabilities para las capacidades que se mostrarán en controles de reproducción compactos, como los de un smartwatch o un automóvil. Luego, agrega oyentes para eventos remotos como RemotePause, RemotePlay, RemoteNext, y RemotePrevious, para controlar la reproducción basada en estos eventos.

   Este código proporciona una base sólida para la funcionalidad de reproducción de música en una aplicación React Native, permitiendo la gestión de listas de reproducción y la interacción con controles de reproducción remotos .

English

1. Importing modules: The TrackPlayer, Event, RepeatMode, and Capability are imported from react-native-track-player, along with playListData from a local file.

2. setupPlayer function: This function checks if the player is already set up. It tries to get the current track with TrackPlayer.getCurrentTrack(). If there is no error, the player is already set up and the function returns true. If there is an error (indicating the player is not set up), the player is configured with TrackPlayer.setupPlayer() and returns true.

3. addTrack function: Adds all tracks from playListData to the player with TrackPlayer.add(playListData) and sets the repeat mode to RepeatMode.Queue, meaning the playlist will repeat in order.

4. playbackService function: Sets up the player's capabilities to allow operations like play, pause, skip to next, and skip to previous track. It sets compactCapabilities for the capabilities that will be displayed in compact playback controls, such as those on a smartwatch or a car. Then, adds listeners for remote events like RemotePause, RemotePlay, RemoteNext, and RemotePrevious to control playback based on these events.

index.js

import {AppRegistry} from 'react-native';
import App from './src/App';
import {name as appName} from './app.json';
import TrackPlayer from 'react-native-track-player';
import { setupPlayer, playbackService } from './musicPlayerServices';

AppRegistry.registerComponent(appName, () => App);


(async () => {
    await setupPlayer();
    TrackPlayer.registerPlaybackService(() => playbackService);
})();

Español

1. Importación de Módulos: El código comienza importando los módulos necesarios. AppRegistry se importa de react-native, que es utilizado para registrar el componente principal de la aplicación. App es el componente principal de la aplicación, importado desde ./src/App. appName se extrae de app.json, que contiene el nombre de la aplicación. TrackPlayer se importa de react-native-track-player para funcionalidades de reproducción de música. Finalmente, las funciones setupPlayer y playbackService se importan de ./musicPlayerServices.

2. Registrando el Componente Principal: AppRegistry.registerComponent(appName, () => App); registra el componente principal de la aplicación con el nombre de la aplicación. Esto le dice a React Native dónde comenzar la ejecución de la aplicación.

3. Configurando el Reproductor de Música: Se utiliza una expresión de función invocada inmediatamente (IIFE) para configurar de manera asíncrona el reproductor de música y registrar el servicio de reproducción. Primero, se llama a setupPlayer() para inicializar el reproductor de música. Luego, TrackPlayer.registerPlaybackService(() => playbackService); registra la función playbackService como el servicio de reproducción para el reproductor de música. Este servicio maneja acciones de reproducción como reproducir, pausar, saltar a la siguiente y saltar a la anterior.

English

1. Importing Modules: The code begins by importing necessary modules and components. AppRegistry is imported from react-native, which is used to register the main component of the application. App is the main component of the application, imported from ./src/App. appName is extracted from app.json, which contains the name of the app. TrackPlayer is imported from react-native-track-player for music playback functionalities. Lastly, setupPlayer and playbackService functions are imported from ./musicPlayerServices.

2. Registering the Main Component: AppRegistry.registerComponent(appName, () => App); registers the main component of the application with the app's name. This tells React Native where to start the application's execution.

3. Setting Up the Music Player: An immediately invoked function expression (IIFE) is used to asynchronously set up the music player and register the playback service. First, setupPlayer() is called to initialize the music player. Then, TrackPlayer.registerPlaybackService(() => playbackService); registers the playbackService function as the playback service for the music player. This service handles playback actions like play, pause, skip to next, and skip to previous.

componentes - components

ControlCenter.tsx

import { Pressable, StyleSheet, Text, View } from 'react-native'
import React from 'react'
import TrackPlayer, { State, usePlaybackState } from 'react-native-track-player'
import Icon from 'react-native-vector-icons/MaterialIcons'
import { playbackService } from '../../musicPlayerServices'

const ControlCenter = () => {

    const playBackState = usePlaybackState()
    // next button
    const skipToNext = async () => {
        await TrackPlayer.skipToNext()
    }
    // previous button
    const skipToPrevious = async () => {
        await TrackPlayer.skipToPrevious()
    }

    const tooglePlayBack = async(playback: State) => {
        const currentTrack = await TrackPlayer.getCurrentTrack()

        if (currentTrack !== null ) {
            if(playback === State.Paused || playback === State.Ready){
                await TrackPlayer.play()
            } else {
                await TrackPlayer.pause()
            }
        }
    }

  return (
    <View style={styles.container}>
      <Pressable onPress={skipToPrevious}>
        <Icon style={styles.icon} name="skip-previous" size={40} />
      </Pressable>
      <Pressable onPress={() => tooglePlayBack(playBackState)}>
        <Icon 
            style={styles.icon} 
            name={playBackState === State.Playing ? "pause" : "play-arrow"}
            size={40} />
      </Pressable>
      <Pressable onPress={skipToNext}>
        <Icon style={styles.icon} name="skip-next" size={40} />
      </Pressable>
    </View>
  )
}

export default ControlCenter

const styles = StyleSheet.create({
     container: {
      marginBottom: 56,

      flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
    },
    icon: {
      color: '#DAE0E2',
    },
    playButton: {
      marginHorizontal: 24,
    },
});

Español

Este código define un componente ControlCenter en React Native para controlar la reproducción de música utilizando la biblioteca react-native-track-player.

1. Importación de Módulos: Se importan los componentes Pressable, StyleSheet, Text, View de react-native para construir la interfaz de usuario, React para crear el componente, TrackPlayer y usePlaybackState de react-native-track-player para controlar la reproducción de música, Icon de react-native-vector-icons/MaterialIcons para los iconos de la interfaz de usuario, y playbackService de un archivo local.

2. Componente ControlCenter: Se define un componente funcional llamado ControlCenter. Este componente utiliza el hook usePlaybackState para obtener el estado actual de la reproducción de música.

3. Funciones de Control de Reproducción: Se definen tres funciones asíncronas: skipToNext para saltar a la siguiente pista, skipToPrevious para saltar a la pista anterior, y tooglePlayBack para reproducir o pausar la música actual.

4. Renderizado del Componente: El componente retorna una vista que contiene tres botones Pressable. Cada botón muestra un icono de Icon y llama a una de las funciones de control de reproducción cuando se presiona.

5. Estilos: Se define un objeto styles con estilos para el contenedor y los iconos. Los iconos tienen un color definido.

English

1. Importing Modules: The code begins by importing necessary components from react-native for building the UI, React for creating the component, TrackPlayer and usePlaybackState from react-native-track-player for controlling music playback, Icon from react-native-vector-icons/MaterialIcons for UI icons, and playbackService from a local file.

2. ControlCenter Component: A functional component named ControlCenter is defined. This component uses the usePlaybackState hook to get the current playback state.

3. Playback Control Functions: Three asynchronous functions are defined: skipToNext to skip to the next track, skipToPrevious to skip to the previous track, and tooglePlayBack to play or pause the current music.

4. Component Rendering: The component returns a view that contains three Pressable buttons. Each button displays an Icon and calls one of the playback control functions when pressed.

5. Styles: A styles object is defined with styles for the container and icons. The icons have a defined color.

This code provides a user interface for controlling music playback in a React Native application, allowing users to skip to the next or previous track, and play or pause the current music.

SongInfo.tsx

import { StyleSheet, Text, View } from 'react-native'
import React, { PropsWithChildren } from 'react'
import { Track } from 'react-native-track-player'

type SongInfoProps = PropsWithChildren<{
    track: Track | null | undefined
}>

const SongInfo = ({track}: SongInfoProps) => {
  return (
    <View style={styles.container}>
      <View>
        <Text style={styles.name}>
            {track?.title}
        </Text>
        <Text style={styles.artist}>
            {track?.artist}  . {track?.album}
        </Text>
      </View>
    </View>
  )
}

export default SongInfo

const styles = StyleSheet.create({
    container: {
      width: '90%',
      marginTop: 18,

      flexDirection: 'row',
      alignItems: 'baseline',
      justifyContent: 'center',
    },
    name: {
      marginBottom: 8,
      textAlign: 'center',

      color: '#DAE0E2',
      fontSize: 24,
      fontWeight: '800',
    },
    artist: {
      color: '#EAF0F1',
      textAlign: 'center',
    },
});

Español

Este código define un componente en React Native llamado SongInfo que muestra información sobre una canción, como el título y el artista, utilizando los datos de una pista de música.

1. Importación de Módulos: Se importan los componentes StyleSheet, Text, y View de react-native para construir la interfaz de usuario, React y PropsWithChildren de react para crear el componente, y Track de react-native-track-player para definir el tipo de la pista de música.

2. Definición del Tipo SongInfoProps: Se define un tipo SongInfoProps que extiende PropsWithChildren y añade una propiedad track que puede ser un objeto Track, null, o undefined. Esto indica que el componente SongInfo puede recibir una pista de música como propiedad y también puede tener hijos.

3. Componente SongInfo: Se define un componente funcional SongInfo que recibe un objeto props del tipo SongInfoProps. Este componente retorna una vista que contiene dos vistas anidadas. La primera vista interna muestra el título de la canción, y la segunda vista interna muestra el artista y el álbum de la canción. Se utilizan los operadores de encadenamiento opcional (?.) para acceder a las propiedades de la pista de música, lo que evita errores si la pista es null o undefined.

4. Estilos: Se define un objeto styles con estilos para el contenedor y los textos. Los estilos definen el ancho del contenedor, el margen superior, la dirección de los elementos flexibles, la alineación de los elementos, y los estilos específicos para el título y el artista, incluyendo el color, la alineación del texto, y el tamaño de la fuente.

English

1. Importing Modules: The code begins by importing necessary components from react-native for building the UI, React and PropsWithChildren from react for creating the component, and Track from react-native-track-player to define the type of the track.

2. Defining SongInfoProps Type: A type SongInfoProps is defined that extends PropsWithChildren and adds a track property that can be a Track object, null, or undefined. This indicates that the SongInfo component can receive a track as a prop and also can have children.

3. SongInfo Component: A functional component SongInfo is defined that receives a props object of type SongInfoProps. This component returns a view that contains two nested views. The first nested view displays the song's title, and the second nested view displays the artist and album of the song. The optional chaining operators (?.) are used to access the track properties, which prevents errors if the track is null or undefined.

4. Styles: A styles object is defined with styles for the container and the texts. The styles define the width of the container, the top margin, the flex direction, the alignment of items, and specific styles for the title and the artist, including color, text alignment, and font size.

This code is an example of how to create a component in React Native to display information about a music track, using TypeScript to define the types of properties and styles for the user interface.

SongSlider.jsx

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'
import Slider from '@react-native-community/slider'
import TrackPlayer, {useProgress} from 'react-native-track-player'

const SongSlider = () => {
    const {position, duration} = useProgress()

    const handleOnSlideComplete = async (value) => {
        await TrackPlayer.seekTo(value)
    }

    return (
        <View>
            <Slider 
                value={position}
                minimumValue={0}
                maximumValue={duration}
                thumbTintColor='#FFF'
                maximumTrackTintColor='#FFF'
                style={styles.sliderContainer}
                onSlidingComplete={handleOnSlideComplete}
            />
            <View style={styles.timeContainer}>
                <Text style={styles.time}>
                    {new Date(position*1000).toISOString().substring(15,19)}
                </Text>
                <Text style={styles.time}>
                    {new Date((duration-position)*1000).toISOString().substring(15,19)}
                </Text>
            </View>
        </View>
    )
}

export default SongSlider

const styles = StyleSheet.create({
    sliderContainer: {
      width: 350,
      height: 40,
      marginTop: 25,  
      flexDirection: 'row',
    },
    timeContainer: {
      width: 340,  
      flexDirection: 'row',
      justifyContent: 'space-between',
    },
    time: {
      color: '#fff',
    },
});

Español

Este código es para un componente de deslizador de canciones en una aplicación de reproductor de música construida con React Native. Utiliza la biblioteca react-native-track-player para manejar la reproducción de audio y el componente @react-native-community/slider para la interfaz de usuario del deslizador.

1. Importaciones: Se importan los módulos y componentes necesarios. Esto incluye StyleSheet, Text, View de react-native, React de la biblioteca react, Slider de @react-native-community/slider, y TrackPlayer y useProgress de react-native-track-player.

2. Componente SongSlider: Este es un componente funcional que renderiza el deslizador de canciones.

3. Hook useProgress: El hook useProgress de react-native-track-player se utiliza para obtener la posición actual y la duración de la pista.

4. Función handleOnSlideComplete: Esta es una función asíncrona que se activa cuando el usuario termina de deslizar. Toma el valor final del deslizador y utiliza el método seekTo de react-native-track-player para buscar la canción en la nueva posición.

5. Componente Slider: Este es un componente de @react-native-community/slider que renderiza el deslizador. Toma varias props incluyendo la posición actual de la canción, los valores mínimo y máximo, el color del deslizador, y la función a llamar cuando se completa el deslizamiento.

6. Visualización del Tiempo: La posición actual y la duración restante de la canción se muestran en un componente View. Los tiempos se calculan creando un nuevo objeto Date con los valores de posición y duración, y luego utilizando el método toISOString para formatear el tiempo.

7. Estilos: El método StyleSheet.create se utiliza para crear un objeto de estilo para el componente. Este objeto contiene estilos para el contenedor del deslizador, el contenedor del tiempo, y el texto del tiempo.

English

This code is for a song slider component in a music player app built with React Native. It uses the react-native-track-player library to handle audio playback and the @react-native-community/slider component for the slider UI.

1. Imports: The necessary modules and components are imported. This includes StyleSheet, Text, View from react-native, React from the react library, Slider from @react-native-community/slider, and TrackPlayer and useProgress from react-native-track-player.

2. SongSlider Component: This is a functional component that renders the song slider.

3. useProgress Hook: The useProgress hook from react-native-track-player is used to get the current position and duration of the track.

4. handleOnSlideComplete Function: This is an asynchronous function that is triggered when the user finishes sliding. It takes the final value of the slider and uses the seekTo method from react-native-track-player to seek the song to the new position.

5. Slider Component: This is a component from @react-native-community/slider that renders the slider. It takes several props including the current position of the song, the minimum and maximum values, the color of the slider, and the function to call when sliding is complete.

6. Time Display: The current position and remaining duration of the song are displayed in a View component. The times are calculated by creating a new Date object with the position and duration values, and then using the toISOString method to format the time.

7. Styles: The StyleSheet.create method is used to create a style object for the component. This object contains styles for the slider container, time container, and time text.

App.tsx

import React, { useState, useEffect } from 'react';
import {
 ActivityIndicator,
 SafeAreaView,
 StatusBar,
 StyleSheet,
 View,
} from 'react-native';
import { setupPlayer, addTrack } from "../musicPlayerServices";
import MusicPlayer from './screens/MusicPlayer';

function App(): React.JSX.Element {
 const [isPlayerReady, setIsPlayerReady] = useState(false);

 useEffect(() => {
    const initializePlayer = async () => {
      const isSetup = await setupPlayer();
      if (isSetup) {
        await addTrack();
      }
      setIsPlayerReady(isSetup);
    };

    initializePlayer();
 }, []);

 if (!isPlayerReady) {
    return (
      <SafeAreaView>
        <ActivityIndicator />
      </SafeAreaView>
    );
 }

 return (
    <View style={styles.container}>
      <StatusBar barStyle={"light-content"} />
      <MusicPlayer />
    </View>
 );
}

const styles = StyleSheet.create({
 container: {
    flex: 1,
 },
});

export default App;

Español

Este código define una aplicación React Native que inicializa un reproductor de música utilizando la biblioteca react-native-track-player.

1. Importaciones: Se importan los módulos necesarios de React Native y las funciones setupPlayer y addTrack desde el archivo musicPlayerServices.js.

2. Estado del Reproductor: Se define un estado isPlayerReady para controlar si el reproductor de música está listo para su uso.

3. Efecto de Inicialización: Utilizando useEffect, se llama a la función initializePlayer que es una función asíncrona. Esta función inicializa el reproductor de música llamando a setupPlayer y, si la inicialización es exitosa, agrega una pista a la reproducción con addTrack. Finalmente, actualiza el estado isPlayerReady para reflejar si el reproductor está listo.

4. Renderizado Condicional: Si el reproductor no está listo (isPlayerReady es false), se muestra un ActivityIndicator para indicar que la aplicación está cargando.

5. Renderizado Principal: Una vez que el reproductor está listo, se renderiza la interfaz de usuario principal que incluye el MusicPlayer component.

6. Estilos: Se definen estilos para el contenedor principal de la aplicación.

English

This code defines a React Native application that initializes a music player using the react-native-track-player library. Here's a step-by-step explanation of what the code does:

1. Imports: The necessary modules from React Native and the setupPlayer and addTrack functions from the musicPlayerServices.js file are imported.

2. Player State: A state isPlayerReady is defined to control if the music player is ready for use.

3. Initialization Effect: Using useEffect, the initializePlayer function is called, which is an asynchronous function. This function initializes the music player by calling setupPlayer and, if successful, adds a track to the playback with addTrack. Finally, the isPlayerReady state is updated to reflect if the player is ready.

4. Conditional Rendering: If the player is not ready (isPlayerReady is false), an ActivityIndicator is displayed to indicate that the application is loading.

5. Main Rendering: Once the player is ready, the main user interface is rendered, which includes the MusicPlayer component.

6. Styles: Styles are defined for the main container of the application.

pantallas - screens

MusicPlayer.tsx

import { Dimensions, FlatList, Image, StyleSheet, Text, View } from 'react-native'
import React, { useState } from 'react'

import TrackPlayer, { 
    Event,
    Track,
    useTrackPlayerEvents
} 
from 'react-native-track-player'
import { playListData } from '../constants';
import SongInfo from '../components/SongInfo'
import SongSlider from '../components/SongSlider'
import ControlCenter from '../components/ControlCenter'


const {width} = Dimensions.get('window')


const MusicPlayer = () => {
    const [track, setTrack] = useState<Track | null>()


    useTrackPlayerEvents([Event.PlaybackTrackChanged] , async event => {
            switch (event.type) {
                case Event.PlaybackTrackChanged:
                    const playingTrack = await TrackPlayer.getTrack(event.nextTrack)
                    setTrack(playingTrack)
                    break;


            }
    }) 

    const renderArtWork = () => {
        return(
            <View style={styles.listArtWrapper}>
                <View style={styles.albumContainer}>
                    {track?.artwork && (
                        <Image 
                        style={styles.albumArtImg}
                        source={{uri: track?.artwork.toString()}}
                        />
                    )}
                </View>
            </View>
        )
    }

  return (
    <View style={styles.container}>
      <FlatList 
      horizontal
      data={playListData}
      renderItem={renderArtWork}
      keyExtractor={song => song.id.toString()}
      />

      <SongInfo track={track}/>
      <SongSlider />
      <ControlCenter />
    </View>
  )
}

export default MusicPlayer

const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#2F363F',
    },
    listArtWrapper: {
      width: width,
      justifyContent: 'center',
      alignItems: 'center',
    },
    albumContainer: {
      width: 250,
      height: 250,
    },
    albumArtImg: {      
      height: '100%',      
      borderRadius: 4
    },
});

Español

Este código es para un componente de reproductor de música en una aplicación construida con React Native. Utiliza la biblioteca react-native-track-player para manejar la reproducción de audio y el componente FlatList de React Native para mostrar una lista de canciones.

1. Importaciones: Se importan los módulos y componentes necesarios. Esto incluye Dimensions, FlatList, Image, StyleSheet, Text, View de react-native, React y useState de la biblioteca react, y TrackPlayer, Event, Track, useTrackPlayerEvents de react-native-track-player. También se importan los componentes SongInfo, SongSlider, ControlCenter y los datos de la lista de reproducción playListData.

2. Componente MusicPlayer: Este es un componente funcional que renderiza el reproductor de música.

3. Estado de la Pista: Se utiliza el hook useState para mantener el estado de la pista actual (track). Se inicializa como null.

4. Hook useTrackPlayerEvents: Este hook se utiliza para escuchar los eventos de cambio de pista. Cuando se detecta un cambio de pista, se obtiene la nueva pista con TrackPlayer.getTrack y se actualiza el estado de la pista.

5. Función renderArtWork: Esta función se utiliza para renderizar la imagen de la pista actual. Si la pista tiene una imagen (track?.artwork), se muestra con el componente Image.

6. Componente FlatList: Este componente de React Native se utiliza para mostrar una lista de canciones. Se pasa la lista de canciones playListData como datos y se utiliza la función renderArtWork para renderizar cada canción. La clave para cada canción se obtiene con song.id.toString().

7. Componentes SongInfo, SongSlider, ControlCenter: Estos componentes se utilizan para mostrar la información de la canción, el deslizador de la canción y el centro de control, respectivamente.

8. Estilos: Se utiliza el método StyleSheet.create para crear un objeto de estilo para el componente. Este objeto contiene estilos para el contenedor, la lista de arte, el contenedor del álbum y la imagen del álbum.

English

This code is for a music player component in a music player app built with React Native. It uses the react-native-track-player library to handle audio playback and the FlatList component from React Native to display a list of songs.

1. Imports: The necessary modules and components are imported. This includes Dimensions, FlatList, Image, StyleSheet, Text, View from react-native, React and useState from the react library, and TrackPlayer, Event, Track, useTrackPlayerEvents from react-native-track-player. It also imports the SongInfo, SongSlider, ControlCenter components and the playListData playlist data.

2. MusicPlayer Component: This is a functional component that renders the music player.

3. Track State: The useState hook is used to keep track of the current track (track). It is initialized as null.

4. useTrackPlayerEvents Hook: This hook is used to listen for track change events. When a track change is detected, it gets the new track with TrackPlayer.getTrack and updates the track state.

5. renderArtWork Function: This function is used to render the artwork of the current track. If the track has an artwork (track?.artwork), it is displayed with the Image component.

6. FlatList Component: This React Native component is used to display a list of songs. It is passed the playListData song list as data and uses the renderArtWork function to render each song. The key for each song is obtained with song.id.toString().

7. SongInfo, SongSlider, ControlCenter Components: These components are used to display the song information, song slider, and control center, respectively.

8. Styles: The StyleSheet.create method is used to create a style object for the component. This object contains styles for the container, artwork list, album container, and album image.