236 comments

[ 0.24 ms ] story [ 114 ms ] thread
Love your design!
Thank you, it went through quite a few iterations, trying to make it as low fidelity as possibile while keeping an eye on accessibility.
First time I click on the volume control, it bumps the volume to max (Firefox). Works correctly after that.
What does "in this room: 25" mean? The number remains the same when I change the station. Is there only a single room and I changed the station for everybody? Or are there 25 people in every room (=station)? :-)
It's the current visitors. I liked the word "room" to make you feel like you're in good company, but maybe it'd be better to just write "live now". What do you think?
I'd go for "listening now" or "currently listening". I also assumed the "room" was the what I see now is called "station".

Counting the listeners in a station instead of visitors site-wide would be kinda neat though, and "room" works well then I think.

edit: or maybe "in the cafe" for site-wide visitors? That should be clear and has the same feeling as "room".

Fully agree with everything you said!

"In the room XXX" really confused me because I thought I were in room XXX. (There's at least a colon missing after "room"!)

I love "listening now", just changed it!
I like in the room - I agree it is cozier - in the cafe as suggest below is also nice
I like the "room" terminology. Maybe just make it clearer that it's not a room number, but the number of people hanging out in the room with you?
Very cool! Love the "anime like" pictures :)
Don't we all :)
I don't know about all but I certainly do and I guess some other people, including you, maybe, do too! :) ;p xx
Those background images could really use some artist attributions.
The streams should also be linked to.
The streams are just the name as a youtube video. For example if you click the "lofi hip hop radio - beats to relax/study to" in the bottom left (r what ever you are on) you'll see all the streams. Copying that name and pasting it in Youtube will show you the stream.

Though I do agree a link to them (since there is no mention of Lofi Girl anywhere for example) would be nice.

I'll add a little link to open the related YouTube video, it's much needed.
You are aware that it's usually a ToS violation to play YouTube videos without showing the YouTube player? https://developers.google.com/youtube/terms/required-minimum...
We're on hacker news and it's a cool tech project, who cares about some corporation's ToS?
Just sayin'

Maybe they will care when they get their account and maybe even any related accounts suspended.

I love lofi hip hop, so I wish good luck. But especially because of the exposure this might end not nice for the operators.

We're on artist news and it's a cool music project, who cares about someone's software license.
The project has a better chance of survival if it follows the rules of the platform sourcing their content. I think that warning somebody that they're standing on a cliff edge is the polite thing to do, even if the cliff is man-made.
Yes, although I’d note that among people who listen to lofi music, the “anime girl studying with rain outside the window” animation is an extremely well known meme.
Can't have contributions when the images likely aren't even under a license that would allow use like this. I guess it's better not to say where they are from and hope people don't notice...

The image of the girl lying on the floor is a screencap from the "Whisper of the Heart" movie. I doubt it's licensed. Various "lo-fi" YouTube channels used to do that as well, but got copyright strikes and changed to original artwork.

https://www.giantbomb.com/forums/anime-790045/is-studio-ghib...

(comment deleted)
> a screencap from the "Whisper of the Heart" movie. I doubt it's licensed.

Studio Ghibli did release a lot of screenshots from many of their movies about 6 months ago¹, but this movie is not among those included.

1. https://news.ycombinator.com/item?id=24564775

Wikipedia has an article on lofi_girl/chilledcow channels https://en.wikipedia.org/wiki/Lofi_Girl

> Dimitri chose the character of Shizuku Tsukishima from the Studio Ghibli film Whisper of the Heart as the face of the channel, with footage of her studying or writing used in the streams. When the popularity of the streams ultimately led to some getting taken down for copyright violations, Dimitri decided to maintain the Ghibli-esque aesthetic but with an original character and put out a call for artists.

How does pause / play work? Does it pause for everyone in the room?
Could the CPU load be reduced? If I am only on the page, not even playing any music yet (probably because something is blocked), I get 1 core up at 100% CPU load. This can't all be for an animated background image, can it?
Looks like it is, if I remove the 4 gifs stacked on top of each other CPU usage drops massively.
It appears that every GIF frame is a Chrome paint (which makes sense) but a way to make the GIF static or turn off the GIFs would reduce paints down to basically nothing.
If it's only a few frames you might be able to arrange them vertically in a PNG and animate background-position to get the same effect for cheaper.

Correction: you want to use transform to force creation of a new rendering layer, then when adjusting the rendered position of the element using transform will not cause a repaint.

Ouch you're totally right. I want to add an option to have static JPGs instead of GIFs. Already added to the backlog.
Video may be cheap, too: h.264 or WebM are relatively low cost on even reasonably modern devices.
I would go for videos + options to go with static assets. You could pause background video playback when the tab is not active.
My tests show the tab does not consume much when it is not visible.
To go in the opposite direction, if you wanted to add an option for people fine with large CPU/GPU expenditure (i.e., if this were playing on a dedicated TV in an actual café), it might be fun to add a WebGL canvas and make lofi/vaporwave-inspired effects [0].

[0]: http://hands.wtf/rad

Why would you ever target wasting CPU/GPU when better alternatives are available?
I actually really like this feature when playing music for a whole room on my OLED TV. People like watching the fancy graphics and I get to dodge a tiny little bit of burn in.
You missed the part of better alternatives. I didn't mean to turn off the anim, just switch it to a more efficient method of doing it.
What are the better alternatives?
I'm guessing pre-rendered animations. Better alternative if you're optimizing for performance, but maybe not if we're optimizing for other metrics.
It might be cool.
It might be cool to needlessly spin up a CPU/GPU for no reason other than not being familiar with a more effectient method of doing something? I don't know where you come from, but that's not my definition of cool at all
Video cheaper than animated gif?
Yeah, lower bandwidth requirements and most computers/all smartphones have dedicated video decoding hardware, especially for h264.
Hinted at with lower bandwidth requirements, but the biggest win with video is their stellar compression. GIFs store every single color value, which is why they get so huge so quick.
GIFs use run length encoding, which usually makes them quite good for pixelly art, but not when you apply a bunch of vfx.
Yep. For example, here is Fill's GIFs site[0], where comic animation on pages represented as video instead of GIF.[1]

    ...
    <video autoplay="" loop="" muted="">
      <source src="/video/aa3d713c20ba03cc3f87b36e9a947857.mp4" type="video/mp4">
    </video>
    ...

[0] https://fill.com.ua/

[1] https://fill.com.ua/gif/zagostrennya

I wonder if they're crypto-mining.
Same. I use a miniPC with a loud (by design constraints) fan when load is pegged. It ran like a jet engine on this site.
Gotta pay for hosting with some monero mining
Hey, just wanted to let you know I've just pushed a "low-energy" mode that will remove some elements and effects on screen. On my Mac (MBP with M1 chip) it makes the webview go from 40% CPU to around 10-15%.

You can activate it by pressing "l".

Beautiful. Soothing. Magical. :)

Is the list of stations hand picked, can I access it outside this app?

When adding to home screen I get React app as title by default.

The stations are actually YouTube streams, if you open dev tools you can get the stream ID from the YouTube thumbnail that gets preloaded by the YouTube library.
(comment deleted)
I really liked the cyberpunk Gifs. Who made them? As other said, attribution there would help.
All found on Giphy, will add attribution soon!
So great. Would love to see the track details and maybe some sort of equally low-fi social aspect. Just number of listeners or hearts / something
Love the feel of the site. Curious about the tech stack used and as others pointed out, images attribution. Nice work!
Thank you! It's a create-react-app, with a YouTube planyer running the lofi channels (will add proper attribution soon).
Do you people really like such music?

I admit these backgrounds require a bit of effort to make. But what's the point? To use it as a screensaver?

Well it's not like I know a hundred lofi songs by heart or subscribe to lofi news but it serves as a nice background when I'm working alone in my apartment.
Yeah, that's pretty much it; lofi is loud enough to drown out intermittent noise in the area, while monotonous and simple enough to allow you to concentrate on whatever you're doing instead of on the music.

It's not unlike elevator music.

Yeah it’s like good elevator music, haha
> Do you people really like such music?

I like it, but I use it moreso for when I want to tune out noises in my surroundings with something other than say, "bird noises" or "distance thunderstorm".

Yes exactly, I usually listen to it when studying. With it on 25% volume and noise cancelling headphones it tunes out the world very nicely while avoiding dead silence.
(comment deleted)
I enjoyed this a lot, a great candidate for a native app.
Haha, I built a super similar thing last year with even a super similar url (https://lofi.chat)!

https://lofi.chat/r/Hacker-news-310e9120

Good vibes only

Can nobody make posts anymore without someone else trying to self-promote?
I want to know alternatives. Let them promote !
Show hn posts are already self-promotion so isn't it reasonable for other people to also be able to promote similar things they've created?
I think there's a line where it stops being reasonable. If I know every comment on a Show HN is going to be blatant self promotion, I'm not going to view those posts even if the OP is interesting to me.
Sounds like a good solution - stop viewing them.
There are guidelines for what Show HN is supposed to be. This site pretty much fits the bill.

https://news.ycombinator.com/showhn.html

> Show HN is for something you've made that other people can play with. HN users can try it out, give you feedback, and ask questions in the thread.

> On topic: things people can run on their computers or hold in their hands. For hardware, you can post a video or detailed article. For books, a sample chapter is ok.

I am glad to see work from other hacker news members. When it isn't interesting to me, I find something else on the internet or IRL that is.

Great point. While not everything is appropriate to share in response to someone else's "Show HN" post, I've definitely seen (and appreciated) others linking similar projects. It usually is in the context of saying something like:

- I tried this too, and can appreciate that you solved way harder things than we expected to have to deal with - I had this idea too but like your execution

I think it's very fitting, especially since we are celebrating not just the idea, but the execution that someone did to be able to show it off here.

Same. I love it when I see two creators of similar projects mash up ideas in the comments. That's the spirit of HN imo.
Same, please keep sharing folks!
Just sharing for the fun of it! This was just a fun weekend project from a year ago, and I found the similarities too funny to pass up.
Maybe there should be a weekly/monthly “Show HN” (like the who’s hiring thread) where everyone can promote what they’re working on. Doesn’t have to be new things, even progressive updates would do.

Hey @dang, how does a free-for-all self promotion thread sound (minus the spam)

A chat makes things way more interesting, but we need to be able to browse for rooms too (as long as the room's creator want his room public)
is there a way to explore public rooms?
I really like this idea, is there a way to add soundcloud streams to it instead of youtube? I'd like to link this from my soundcloud page.
I tried my hand at something similar using a sleep music themed YT channel and website. Couldn't get things to click. And FB ended up blocking my site on the sharing debugger.
I love breaking things and I've noticed that user are able to intercept the UID / ID of the received messages in the Websocket and edit / spoof past messages from other users.

edit: And editing other user names and rooms settings.

Just letting you know. :)

Thanks for catching that! One thing I really wanted for the project was not having to sign in to use, but that's been causing a lot of security holes like this. Gonna try to fix everything soon
Out of curiosity, what are the motivation(s) for not requiring users to sign in? Is it just lowering the barrier to entry, or are you concerned with privacy?

I’m curious to know how the solution would work.

I'm really not knowledgeable about firestore, firebase or even authentification systems but couldn't an user request a secret key that the user will use to authentificate itself when sending a message into the websocket (that will not be transmitted to the other users)?

For the login-gate, I'm pretty sure 99%+ of the visitor would have not created an account. Even without the login, the HN room shared in that thread was kind of inactive.

Since the rooms are "private' by default (secret token in the URL), authentification is now really necessary for casual usage.

Yes you could generate a rsa key pair in the browser and send a tuple of user id (or just a nonce) and public key to the server as a form of automatic registration. The client could prefix each chat with the user if/nonce and sign it with the private key before sending it to the server. From then on the server could simply retrieve the public key it has associated with the user id prefix and reject any messages that fail signature validation.

This could also work in a peer-to-peer context by only using the server for public key registration (i.e. by chat room). All messages would go directly between clients and the server would never receive chat messages.

If I would have been required to sign up, I would have closed the browser. Good choice!
just tie it to the session cookie or a url identifier, no signup needed
This is great! Perfect background music for coding.
Finally something awesome! Love the backdrops - reminds me of soma.fm
Groove Salad was always my jam
Oh yes! Bringing me back
I'm not into elevator music but I understand some people might enjoy it. Do you listen to this while working?
I love lofi, but I prefer silence when working. I listen to lofi mostly when contemplating about the meaning of life.

I wouldn't classify lofi as elevator music, however. But I love "chill" music in general.

Damn, that's nice. Thanks OP :)
Just the kind of thing I would build - perfect execution well done.