Report Blog Entry
[UPDATE 2.0!]
NONE of this is needed anymore. I will leave it public if anyone wants to know how I did it. You find the easier and updated version HERE.
This version will be kept link-only.
This project was literally a Frankenstein's monster bc I used snippets of code of like... 3 projects. AAAAnyways bc I don't gatekeep (but I don't think you should try it. the code is MESSY) this is the link of my repo:
https://github.com/yumenism/lastfm-now-playing
(I will eventually release a better version)
You can read what actually good coders actually did in:
- https://github.com/vojislav/lastfm-now-playing, the project I forked. I actually only use the main.js file because I completely change the css and html files.
- https://github.com/JeffreyCA/lastfm-recently-played-readme, the main inspiration of how my code works on SpaceHey: It creates a svg file with the artist and song playing/last played. Totally different style-wise as well.
- https://layouts.spacehey.com/layout?id=25613, explanation of why images don't update often.
- https://layouts.spacehey.com/layout?id=36600, main source of inspiration (pretty much the same) for the html and css.
so... how does it work?
because this code was made only for me, the experience will be a little... confusing.
If you just want to embed a simple now playing, you can just follow the 3rd link (if you want to style it, read the 1st link).
Now time to explain (you'll need a github account, sorry for that)
- Fork my repo:
(click the "fork" button, I can't fork it because it's my own repo) - You will need to edit 2 files so you can fetch your data:
- The main.js file (on public folder)
- now-playing.js file (on api folder)
- To edit those, you will need to find them (open api/public folders and click the files) and you'll be able to see the code:
(click the "pencil" button, then change yumenism to your username (remember to keep the quotation marks). then click "commit changes", the green button on the top right of the code editor. it'll open a little window. just click "commit changes" again. do the same for the other file.) - Now your repo is done! Now you'll need to deploy it with vercel.
- Login with your github account
- You should be able to see this:
- After that, go to where you want to embed your music player.
- Paste
<a href="https://www.last.fm/user/YOURUSERNAME" target="_blank">
<div style=" border-radius: 8px; width: 305px; height: 50px; background-image: url('https://external-media.spacehey.net/media/sEpY56IKUlhCSqiV8BzxTZU1nju6NO14jZKW0WCD9T4I=/https://file.garden/ZRYtsnIP2EXOR4Kw/Site%20Files/musicplayer.png'); background-size: cover; position: relative; ">
<img src="YOURLINK/api/now-playing" alt="Now Playing"/>
</div>
</a> where you want it to be. - Remember to change "YOURUSERNAME" to your last.fm username (you can just link it to another site completely if you want to). and in YOUR LINK, paste the link you copied from that vercel page and add /api/now-playing in the end (ex: the URL i copied was https://lastfm-now-playing-d7dm.vercel.app/, so i add https://lastfm-now-playing-d7dm.vercel.app/api/now-playing. in the img source.)
- ITS READY!!!! I hope.
(click the "import" button. it should redirect you to the next page)
(click the "import" button again on the repository you just made. It will redirect you to other window, but we're not going to change any settings, so just click on "deploy".)
After that, it will show you this:
Which means we're FREE!!!!! Click on the image (you will be redirected to a page with 404 not found. DO NOT WORRY, you won't use this page anyway), copy the URL and just close both windows and pray to never need to see any of them again.
Please tell me if something goes wrong. I will definitely make it a lot easier in the future, because it was just a personal project. If you guys wanna a easier experience you can comment and I'll code a version without all these complicated things
Comments
Displaying 2 of 2 comments ( View all | Add Comment )
ゆめのHey!
For all coders :D
I made this between classes and ended up with a semi-usable version at 2am bc I just couldn't sleep before knowing it was going to work. Which means the code is VERY flawed and probably VERY bad. That being said, please be kind with your feedback, and you are 100% incentivized to correct me, I really had fun with this project even if I slept only 3hrs in total, so I want to keep working on it.
putupaula
will try it out
Hi! sorry for bothering you, but I updated the blog with the newer version. Now this setup is practically useless since the new project changes users dynamically. Thank you for commenting tho, it gave me the motivation needed to make it simpler!
by ゆめのHey!; ; Report
HUGE, glad i inspired you :D
by putupaula; ; Report