React native track player | reading docs

hey there everyone they share back again with another video and welcome to the series on react native so in the last video you have seen what we are about to build this is something of an interesting project and is going to require a little bit study research and patience on your side as well we're going to be dealing with music and when you deal with the music or some video it's not easy you definitely are dependent on some third-party applications especially in the scenarios of like react native flutter or similar kind of a projects not only that we have to learn a little bit about how things are done in the phone the phone is a very sensitive device it's not as robust as you see on your desktop because you don't have to worry too much about the memory yes there is a memory issue in the desktop as well but on the phone it's a very sensitive issue now when you work on something like player like a music player there's a lot that happens in the background especially when the music is being played and sometimes when the music is coming from the server there can be a whole lot of like entire career just on managing how the videos and audios work on mobile devices I'll give you a brief introduction and overview of that so that's why this video is going to be very interesting and I'll teach you in such a way that it's going to be a longer Journey for you so further on let's just say you want to work on core Android core iOS or flutter you know the core principles of it and you can Implement such functionality in anywhere you go or any package that you use so that's exactly what we'll be studying if you haven't watched the previous video watch the previous one it will showcase you that what we're about to build I'll give you all the assets and everything so don't you worry on that part okay so I've set up a new project so this is pretty easy you have already done that many times now so I won't be showing you that it's pretty easy you know that npx react native in it and the project name super simple command I have been doing that for so many long so not kind of talking about that okay let's go ahead and talk about what we will be using this is react native track player this is really one of the most famous library that is used in the react native for playing the music it has so much of the amazingness there are other packages as well but this one is amazing it is light whale Fields native that is absolutely 100 true about it what's more impressive about it it actually deals with the local or network files it also deals with the dash and hls now if you'll study a little bit more about these Tech these are something uh really interesting and latest state-of-the-art text in which your entire music doesn't come in just one file it is being splitted into chunks and sometimes even these chunks are encrypted so there's a lot that this Library handles for you it also handles the background playback control caching and all of that so you don't have to manually worry about that it supports Android iOS and windows what mode we can ask for it now there is a lot of interesting features that we can work on with that now playing music is not like hey I created a music I installed this library and I said hey play this music no there's a lot of events you need to create an entire separate service for it so that you can actually first set up a player can put music on that player and once the player is ready because this is not an instant process the memory is being set up the player is being set up then a track is being loaded on that or many tracks are being loaded on that then we have to worry about is this now okay or should I wait more once this is okay am I listening to all the events like move forward or move backward or the player controls there's so much of activities an event that goes around so couple of things that you should always ask yourself is my player ready because just because your player your app has initiated doesn't means that your player is also going to be ready at the same time it definitely is going to take some time for capturing the memory and all of that second thing you have to worry about are tracks ready for the player queue there could be one track there could be a list of Tracks Of course in our case it's going to be list of tracks but are they ready or are they in the player queue because this is going to take some time and then am I listening to player events there are many player events I'll walk you through with some of them and it will help you to read the api's documentation as well but this is something important that you should really know about it since we are here obviously we are going to talk about one of the amazing hash node so go ahead this entire series is sponsored by hash node they keep on running the hackathons absolutely for free they also encourage people to share their Learning Journey there's a lot of interesting materials and articles on that make sure you also share your Learning Journey about react native on here and a big shout out thanks to them for sponsoring the series now coming back on to react native player first and foremost this is open source that is a good thing you can find them on npmgs as well a pretty easy installation installation is the easiest process of all that we can see so let's go into the intro so notice here they all list down all the features and then they show the example as well then in the basics you can see the installation guide the installation guide is pretty simple for this one it simply says npm install save react native track player this is exactly what we'll be copying let's move back on to our project and we are going to go ahead and paste it so this is pretty simple shouldn't take much of the time there we go told you it's really simple now you can also go for unstable version like something which is Edge or on the edge it might break it might not so you can install that I will be avoiding that now for the iOS setup you require a few extra steps because iOS actually requires you to work a little bit more so they actually mentioned this down pretty easily this can be easily added by adding a certified xcode project called dummy.swift and saying yes to the prompt it will generate a bridge header so that's all you have to do and then go ahead and do pod install this is a common thing if you are building for iOS this is a common thing that we do a lot for bridging and creating Objective C to Swift Bridges so you can go ahead and do that Expo you don't need to do much and for react native CLI that we are working on also you don't need to do much it works out of the box as well now next is getting started this is where they actually mentioned that how you can actually start the player and they mention it that you should do it at the start of the project which is Index this is exactly where we'll be also doing it I will be doing it in the next video first I'll just walk you through with the entire process so track player you need to register playback services and just add this line the important thing is notice that we are creating a service here so obviously I'll show you what the service the music player service is but this is required and this is the important part of it I'll walk you through in the next video but don't you worry the whole idea is that we import a track player from the package that we have installed and then we set up the player now they are mentioning just the bare minimum Basics but there could there should be more that we should go for it because what if the player is not ready we need to wrap it up in the try catch as well because this might be a failure event we should also wait for it so obviously the sink of it needs to come into the picture this is not an easy thing then they also mentioned the controlling the player that how you can control the player we will be going something like this but there are some information that we need to provide to the truck to actually play it first of all the location from which the data is coming up the music is coming up what's the track index like if you are passing an array what is the index of the track and a little bit more information I like that so this is the basics and then we will be also working on this play pause now obviously you might have seen some of the apps which just have a button like there is an audio file and in which just says play pause stop something like that will be going a little more than that so that you can see the real world aspect of it and can build real world application for your that and we have all these await notice here they are also mentioning a weight for track layer to skip skip to next previous remove will be working on all of that what I recommend you to go and learn a little bit is first this playback service there is a lot of events that are happening here ad event listener Remote Play remote pause so just go ahead and study a little bit you won't be understanding it much but it's a good idea to at least have the basics of it then jump into the API reference and you'll see that there are references for events there are a lot of events that can happen on the music or the video that you are playing you might want to control some of them from keyboards as well in case you're working on desktop but here there is a lot so you can go ahead and read about it there are some hooks available as well but I recommend you for the beginner to just learn a little bit on the event even if you are not understanding it just at least have a look that what are the options available to me that's all you have to do and we'll be working in the next video step by step process that how these services are being set up so that you feel comfortable I highly highly recommend to watch at least this section the project 8 section at least two times so that you get more comfortable okay this is a really really interesting one so go ahead and check this out for experienced people you know this you have created many services like I like this so in the next video we'll be going with the step-by-step thing first we are going to wrap everything in the index and I'll show you that how to create a service let's go ahead and move on to the next video

Channel: Hitesh Choudhary

Views: 15,868

Keywords: Programming, python, javascript, devops, cloud, React-native, react, hashnode, android, mobile apps

Id: eCkPGsqn4xw

Length: 8min 45sec (525 seconds)

Published: Wed Apr 12 2023