def convert_music_link(url): api_url = f"https://api.song.link/v1-alpha.1/links?url={url}" response = requests.get(api_url) if response.status_code == 200: return response.json().get("linksByPlatform", {}) return None
using like this create a music platform convert in nextjs using good ui mdeorn ui light theme with anitmiosn good colour scheme fontaweosme ciosn apck adn mdoern ui also show the options of platforms aviabe and when selcetd redirected to that link
I'll create a Next.js application with a modern UI, light theme, animations, and a good color scheme to convert music links across different platforms. We'll use Tailwind CSS for styling, Framer Motion for animations, and the Font Awesome icon pack for icons. Here's how we can implement this:
This implementation provides a user-friendly interface for converting music links across different platforms, with a modern design and smooth animations. The color scheme is based on indigo and blue tones, creating a calm and professional look. The Font Awesome icons add visual appeal and make it easy for users to identify different music platforms.
To further improve this application, you could consider adding:
Remember to handle any API rate limiting or usage restrictions that may apply to the song.link API in a production environment.
The code returns the following error:
Error converting music link: {"message":"Network Error","name":"AxiosError","stack":"AxiosError: Network Error\n at m.onerror (https://kzmovizrhnvexjhrfgwx.lite.vusercontent.net/_next/static/chunks/2808.86e1379ba47f9889.js:1:22228)\n at ts.request (https://kzmovizrhnvexjhrfgwx.lite.vusercontent.net/_next/static/chunks/2808.86e1379ba47f9889.js:1:29719)\n at async convertMusicLink (blob:https://kzmovizrhnvexjhrfgwx.lite.vusercontent.net/8f01ff41-88ae-4945-a354-9d4fcfc9f64c:12:26)\n at async handleSubmit (blob:https://kzmovizrhnvexjhrfgwx.lite.vusercontent.net/a62c63d5-b411-42d2-a71d-58323d293d4f:35:24)","config":{"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false},"adapter":["xhr","http","fetch"],"transformRequest":[null],"transformResponse":[null],"timeout":0,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"env":{},"headers":{"Accept":"application/json, text/plain, */*"},"method":"get","url":"https://api.song.link/v1-alpha.1/links?url=https%3A%2F%2Fopen.spotify.com%2Ftrack%2F6EivvaEepVTjmDde43eGiB%3Fsi%3De30d3e7093324214"},"code":"ERR_NETWORK"}
at convertMusicLink (/lib/api)
at async handleSubmit (/app/page)
Revise the code to address the error.
it doesnt convert to anyhtgn and also a example of jsonshow the music details too
{"entityUniqueId":"SPOTIFY_SONG::6EivvaEepVTjmDde43eGiB","userCountry":"US","pageUrl":"https://song.link/s/6EivvaEepVTjmDde43eGiB","entitiesByUniqueId":{"AMAZON_SONG::B0CC6RCLX8":{"id":"B0CC6RCLX8","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi, Amitabh Bhattacharya","thumbnailUrl":"https://m.media-amazon.com/images/I/51mIS3XHeCL.jpg","thumbnailWidth":500,"thumbnailHeight":500,"apiProvider":"amazon","platforms":["amazonMusic","amazonStore"]},"AUDIOMACK_SONG::47425088":{"id":"47425088","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi, Amitabh Bhattacharya","thumbnailUrl":"https://assets.audiomack.com/pritam/11185667-8907212008656.jpg?width=500&height=500&max=true","thumbnailWidth":500,"thumbnailHeight":500,"apiProvider":"audiomack","platforms":["audiomack"]},"ANGHAMI_SONG::1118156659":{"id":"1118156659","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi & Amitabh Bhattacharya","thumbnailUrl":"https://artwork.anghcdn.co/cover/183894938/320","thumbnailWidth":1024,"thumbnailHeight":1024,"apiProvider":"anghami","platforms":["anghami"]},"DEEZER_SONG::2373077845":{"id":"2373077845","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi, Amitabh Bhattacharya","thumbnailUrl":"https://cdns-images.dzcdn.net/images/cover/f51f0a1f6268ca54f2893df288acfa33/500x500-000000-80-0-0.jpg","thumbnailWidth":500,"thumbnailHeight":500,"apiProvider":"deezer","platforms":["deezer"]},"ITUNES_SONG::1698183046":{"id":"1698183046","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi & Amitabh Bhattacharya","thumbnailUrl":"https://is1-ssl.mzstatic.com/image/thumb/Music116/v4/a4/ac/d1/a4acd18c-2358-57ab-bf0c-52339ad6ca2c/197189415388.jpg/512x512bb.jpg","thumbnailWidth":512,"thumbnailHeight":512,"apiProvider":"itunes","platforms":["appleMusic","itunes"]},"NAPSTER_SONG::tra.783833730":{"id":"tra.783833730","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Shreya Ghoshal","thumbnailUrl":"https://direct.rhapsody.com/imageserver/images/alb.4671689704216768/385x385.jpeg","thumbnailWidth":385,"thumbnailHeight":385,"apiProvider":"napster","platforms":["napster"]},"PANDORA_SONG::TR:124606907":{"id":"TR:124606907","type":"song","title":"Ve Kamleya","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi & Amitabh Bhattacharya","thumbnailUrl":"https://content-images.p-cdn.com/images/4b/a3/41/21/0a3b47e2b614075a53911820/500W_500H.jpg","thumbnailWidth":500,"thumbnailHeight":500,"apiProvider":"pandora","platforms":["pandora"]},"SOUNDCLOUD_SONG::1889788686":{"id":"1889788686","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam","thumbnailUrl":"https://i1.sndcdn.com/artworks-XsSgxPh57ayh-0-t500x500.jpg","thumbnailWidth":500,"thumbnailHeight":500,"apiProvider":"soundcloud","platforms":["soundcloud"]},"SPOTIFY_SONG::6EivvaEepVTjmDde43eGiB":{"id":"6EivvaEepVTjmDde43eGiB","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi, Amitabh Bhattacharya","thumbnailUrl":"https://i.scdn.co/image/ab67616d0000b27339890c916878b32aebd1d0ee","thumbnailWidth":640,"thumbnailHeight":640,"apiProvider":"spotify","platforms":["spotify"]},"TIDAL_SONG::305522504":{"id":"305522504","type":"song","title":"Ve Kamleya (From "Rocky Aur Rani Kii Prem Kahaani")","artistName":"Pritam, Arijit Singh, Shreya Ghoshal, Shadab Faridi, Altamash Faridi, Amitabh Bhattacharya","thumbnailUrl":"https://resources.tidal.com/images/0664c599/73a5/494e/84c3/0916a86674a8/640x640.jpg","thumbnailWidth":640,"thumbnailHeight":640,"apiProvider":"tidal","platforms":["tidal"]}},"linksByPlatform":{"amazonMusic":{"country":"US","url":"https://music.amazon.com/albums/B0CC6RNQK6?trackAsin=B0CC6RCLX8","entityUniqueId":"AMAZON_SONG::B0CC6RCLX8"},"amazonStore":{"country":"US","url":"https://amazon.com/dp/B0CC6RCLX8","entityUniqueId":"AMAZON_SONG::B0CC6RCLX8"},"audiomack":{"country":"US","url":"https://audiomack.com/song/pritam/ve-kamleya-from-rocky-aur-rani-kii-prem-kahaani","entityUniqueId":"AUDIOMACK_SONG::47425088"},"anghami":{"country":"US","url":"https://play.anghami.com/song/1118156659?refer=linktree","entityUniqueId":"ANGHAMI_SONG::1118156659"},"deezer":{"country":"US","url":"https://www.deezer.com/track/2373077845","entityUniqueId":"DEEZER_SONG::2373077845"},"appleMusic":{"country":"US","url":"https://geo.music.apple.com/us/album//1698182755?i=1698183046&mt=1&app=music&ls=1&at=1000lHKX&ct=api_http&itscg=30200&itsct=odsl_m","nativeAppUriMobile":"music://itunes.apple.com/us/album//1698182755?i=1698183046&mt=1&app=music&ls=1&at=1000lHKX&ct=api_uri_m&itscg=30200&itsct=odsl_m","nativeAppUriDesktop":"itmss://itunes.apple.com/us/album//1698182755?i=1698183046&mt=1&app=music&ls=1&at=1000lHKX&ct=api_uri_d&itscg=30200&itsct=odsl_m","entityUniqueId":"ITUNES_SONG::1698183046"},"itunes":{"country":"US","url":"https://geo.music.apple.com/us/album//1698182755?i=1698183046&mt=1&app=itunes&ls=1&at=1000lHKX&ct=api_http&itscg=30200&itsct=odsl_m","nativeAppUriMobile":"itmss://itunes.apple.com/us/album//1698182755?i=1698183046&mt=1&app=itunes&ls=1&at=1000lHKX&ct=api_uri_m&itscg=30200&itsct=odsl_m","nativeAppUriDesktop":"itmss://itunes.apple.com/us/album/_/1698182755?i=1698183046&mt=1&app=itunes&ls=1&at=1000lHKX&ct=api_uri_d&itscg=30200&itsct=odsl_m","entityUniqueId":"ITUNES_SONG::1698183046"},"napster":{"country":"US","url":"https://play.napster.com/track/tra.783833730","entityUniqueId":"NAPSTER_SONG::tra.783833730"},"pandora":{"country":"US","url":"https://www.pandora.com/TR:124606907","entityUniqueId":"PANDORA_SONG::TR:124606907"},"soundcloud":{"country":"US","url":"https://soundcloud.com/pritam78868/ve-kamleya-from-rocky-aur-rani","entityUniqueId":"SOUNDCLOUD_SONG::1889788686"},"tidal":{"country":"US","url":"https://listen.tidal.com/track/305522504","entityUniqueId":"TIDAL_SONG::305522504"},"spotify":{"country":"US","url":"https://open.spotify.com/track/6EivvaEepVTjmDde43eGiB","nativeAppUriDesktop":"spotify:track:6EivvaEepVTjmDde43eGiB","entityUniqueId":"SPOTIFY_SONG::6EivvaEepVTjmDde43eGiB"}}}
I understand the issue now. The problem is that the API request is being blocked due to CORS (Cross-Origin Resource Sharing) restrictions. To fix this, we need to create a server-side API route to make the request to the song.link API. This way, we can avoid CORS issues and also keep our API key (if required) secure.
Let's update the code to address this issue and also display more details about the music: