adrianhajdin/project_music_player

Master modern web development by building an improved version of Spotify. With a modern homepage, fully-fledged music player, search, lyrics, song exploration features, search, popular music around you, worldwide top charts, and much more, this is the best music application you can currently find on YouTube.

Build and Deploy a Better Spotify 2.0 Clone Music App with React 18! (Tailwind, Shazam, Redux)

🌟 Become a top 1% Next.js 13 developer in only one course

🚀 Land your dream programming job in 6 months

Launch your development career with project-based coaching on JS Mastery Pro.

project_music_player's Issues

API suddenly not working. nothing is showing up at all and I don't understand

artist id appears undefined in route link

The song bar and music volume has some gliches tell me how to fix

vite' is not recognized as an internal or external command, operable program or batch file.

i have installed vite and npm in extensions but i am not being able to run it i have been stuck at it for more than one full day

PS C:\Users\user\Desktop\lyriks_starter_code\lyriks_starter_code> npm run dev

[email protected] dev
vite

'vite' is not recognized as an internal or external command,
operable program or batch file.
PS C:\Users\user\Desktop\lyriks_starter_code\lyriks_starter_code>

its coming like this please help me i have gotten stuck at the very start and i am totally new at this

Song Details Not available

As Shazam Core API is not free, i started using Shazam API my discover page and Top Play is working great but, i m getting stuck at song details, when i console.log(songdata) it is showing null that is means, something up while fetching the song detail.

here's my code for shazam API

neglect shazamCore wherever it is written.

Lyrics not found

The original lyrics api has depreciated and new one is https://shazam-core.p.rapidapi.com/v2/tracks/details'

However it still does not work?

My shazamCore Code looks like this:

`import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const shazamCoreApi = createApi({
reducerPath: "shazamCoreApi",
baseQuery: fetchBaseQuery({
baseUrl: "https://shazam-core.p.rapidapi.com/",
prepareHeaders: (headers) => {
headers.set(
"X-RapidAPI-Key",
"e919fc6e47msh434a4c7817b528dp1d9dc2jsn46121b2f2e3d"
);
return headers;
},
}),
endpoints: (builder) => ({
getTopCharts: builder.query({ query: () => "v1/charts/world" }),
getSongsByGenre: builder.query({
query: (genre) => v1/charts/genre-world?genre_code=${genre},
}),
getSongsByCountry: builder.query({
query: (countryCode) => v1/charts/country?country_code=${countryCode},
}),
getSongsBySearch: builder.query({
query: (searchTerm) =>
v1/search/multi?search_type=SONGS_ARTISTS&query=${searchTerm},
}),
getArtistDetails: builder.query({
query: (artistId) => v2/artists/details?artist_id=${artistId},
}),
getSongDetails: builder.query({
query: ({ songid }) => v2/tracks/details?track_id=${songid},
}),
getSongRelated: builder.query({
query: ({ songid }) => v1/tracks/related?track_id=${songid},
}),
}),
});

export const {
useGetTopChartsQuery,
useGetSongsByGenreQuery,
useGetSongsByCountryQuery,
useGetSongsBySearchQuery,
useGetArtistDetailsQuery,
useGetSongDetailsQuery,
useGetSongRelatedQuery,
} = shazamCoreApi;
`

What am I doing wrong?

Error occurred in the <TopPlay> component

Tried using try-catch block but not solved yet
VM488 react_devtools_backend.js:4012 The above error occurred in the component:

at TopPlay (http://localhost:3000/src/components/TopPlay.jsx?t=16730194284:112:20)
at div
at div
at div
at div
at App (http://localhost:3002/src/App.jsx?t=1673013325484:25:7)
at Router (http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=87445b7f:2651:15)
at BrowserRouter (http://localhost:3000/node_modules/.vite/deps/react-router-dom.js?v=87445b7f:3035:5)
at Provider (http://localhost:3000/node_modules/.vite/deps/chunk-4KZAFHVU.js?v=87445b7f:1416:3)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

netlify deploy problem

if i switch to around you tab, it won't return any data, but in localhost it works smoothly.

if i try to refresh the page it gives me 404 error.

Top Artists and Top Charts tab works fine but refreshing these page will lead to 404 error, every subpath returns this 404 error.

failed to load resource: the server responded with a status of 403 ()

No search bar or menu on mobile devices

When in mobile view in devtools, everything works fine. On actual mobile, after deployment, there is no search bar nor hamburger menu at the top. Could someone please give me some insight. I have tried multiple screen sizes and same thing. Thanks. I have included a screenshot from my phone.

Artist details is not being rendered

Have done everything as the video suggested also some people are suggesting going for v2 in builder #20 but even that is not working. So what should I do as

The API has shifted to the paid version use only.

@adrianhajdin Could you please make updates as per the Spotify API to make it working.

UX issue on sidebar nav clicks.

On mobile view, when I click on an item in the sidebar menu, it appears nothing happens. It actually does update the info on the page, but you have to scroll down to it. There is no indication that anything has changed, unless you just happen to know it's supposed to. I would expect it to either open a standalone page, or scroll down to the correct section. The same behavior shows when cloning the original depo here. There is a handleClick function in the page, but it doesn't seem to have any instructions.

How could I resolve this issue?

const NavLinks = ({ handleClick }) => (
  <div className='mt-10'>
    {links.map((item) => (
      <NavLink
        key={item.name}
        to={item.to}
        className='flex flex-row justify-start items-center my-8 text-sm font-medium text-gray-400 hover:text-cyan-400'
        onClick={() => handleClick && handleClick()}
      >
        <item.icon className='w-6 h-6 mr-2' />
        {item.name}
      </NavLink>
    ))}
  </div>

DetailsHeader.jsx Line 38 contains an extra div that causes the component to not render as expected.

This component was looking fine when doing the tutorial, but I have encountered that the extra div at the end causes the component to render larger than it should.

DetailsHeader.jsx Line 38

This is how the component looks without that extra line

This is how it looks with the extra line

Browser console show 403 error

what is wrong!!

Shazam core api premium

shazam code api is premium, is there other api for free?

TopPlay issue --> Uncaught TypeError: Cannot read properties of undefined (reading '0')

Uncaught TypeError: Cannot read properties of undefined (reading '0')

Mobile issue

Everything is working good but after deploying the app on netlify, i opened the link using my mobile handset, i noticed there is no search bar and hamburger menu. Also when i am clicking to see more in top charts app gets crashed in mobile device but the irony is when i inspecting through my laptop using responsiveness everything is good but in mobile device i don't understand what the problem is.

Swiper not working in TopPlay component

Hello there!
I have already fixed the code in Top Play component as solved in issue #24.
Now the page displays without errors. However, the swiper is not working properly, and in the Top Artists does not show anything but the alt names of the images

Npm run dev - ERR dev not found

on mobile music player does not have seek bar to forward the song

Artist Details Page not showing Related Songs

On Artist Details Page below "Details header" component "Related Songs" not showing up. On Song details page it showing up properly. But on Artist details page it is showing only skeleton of Songcard component

The Source is not being fetched

Can you help me the source is not being fetched

get artist details deprecated...in rapid api..version 2 is working but how to implement

we will then be having 2 different base urls..since this has got v2 in it...

Song Details Component not rendering

Is it just me or anyone has faced with song details component not rendering at all ?

Related songs play button not working

Hi. The related songs showing under artist song details is neither working or playing the current song clicked. I think the problem might be from the handlePlayClick function passed into the props.

Not showing any data

showing 429 and 430 issue of api how to show data

Not able to load the lyrics

Everytime while on searching lyrics it is showing , Sorry, No lyrics found.
And while doing console log: fetchBaseQuery.ts:35 GET https://shazam-core.p.rapidapi.com/v1/tracks/details?track_id=%20{songid} 422

The MusicPlayer component is throwing an error

The currentSongs is undefined every time I run the application, due to which the application is unable to play songs, and if I add a '?' after the currentSongs in the useEffect hook then the songs are playing but all the functionality like the next song, prev song, shuffle will not be working.

NavBar on Mobile

data.map is not a function

data.map chaining operator in Discover.jsx keeps rendering "data?.map is not a function" in console. Please can you help with this.

Spotify Clone 2.0 Responsive Layout Issue

After following the "Build and Deploy a Better Spotify 2.0 Clone Music App with React 18! (Tailwind, Redux, RapidAPI)" tutorial, my app is improperly displaying the layout in the browser. I'm using a 13 inch MacBook pro. What do I need to adjust in order to get the layout to display properly?

I'm not sure which of the following is the cause of the problem. But I did try manipulating the some of the css values, however this didn't fix the issue.

These are the results I am seeking to get: (Without having to decrease the zoom value of my browser.)

VM325 react_devtools_backend.js:4012 Warning: Each child in a list should have a unique "key" prop.

I keep getting this error message. im fairly new to react. can some please help me??

thank you

The TopPlay component isn't rendering on the right on desktop screen

I'm unable to achieve the layout as is visible on the 1.41.33 mark in the video when expanding the screen. Unfortunately, my page is rendering the same layout as the small screen even when I've pasted the classNames exactly as in the pages and components here.

Top Play component is unable to fetch artist details in line no 112

Please help us with that as the error is coming in line number 112 (in your code) In my code it is 117.

Discover page doesn't fetch anything....

Discover page doesn't fetch anything, also lyrics page or artist details page is not working....please help any ideas on how to fix it?

music playerwont work

hi.music player is not working for me.i think the problem is from onLoadedData in audio props cuz i put a log in that fn and never called.and bcs of that song never shows duration and never gets play.i cloned this repo and its exact that code.i must say that i get connection whit shazam core api and get 50 musics and everything works fine but playing songs.