forum

Web osu!mania: Play Beatmaps in Your Browser

posted
Total Posts
67
Topic Starter
timhortonsyo
Hello guys, I've developed a web port of osu!mania called Web osu!mania.





It allows you to search for beatmaps with nearly all the same filters found on the official osu site and play them directly in your browser. It supports most beatmaps that I've tested (the only exceptions I've found are caused by incorrect beatmap IDs in the .osu file)

Scoring and mechanics attempt to match, if not come close to, the official osu V2 scoring system.

Features:

  1. Search & filter beatmaps just like on the osu! site
  2. Gameplay mods + custom song speed
  3. Local high scores
  4. Supports SV beatmaps and beatmap hitsounds
  5. Supports keyboard, gamepad, and touch screen input
Also supports a variety of settings which include:

  1. Scroll speed
  2. Bar/circle/arrow/diamond skins
  3. Upscroll
  4. Enable/disable 300g judgement, error bar, FPS counter
Gameplay image above is outdated, the bar skin is based off Miketacular but the circle skin is my own design.

This is the first web project that I'm trying to share with people, so please check it out :)
https://webosumania.com
chromb
This is really cool! it doesn't really run too great on my system but it all works :D
ZnCookie
Good job
have you considered adding support for other modes?
Topic Starter
timhortonsyo

chromb wrote:

This is really cool! it doesn't really run too great on my system but it all works :D
Thanks, I released an update today that should hopefully improve performance :)

ZnCookie wrote:

Good job
have you considered adding support for other modes?
Nah, I'd like to keep the scope focused on mania. That and uni term is starting next week so I won't have much free time left to work on this ;)
chromb
> Thanks, I released an update today that should hopefully improve performance :)

idk if it's just me but it feels worse now...
- Marco -
yooo it's cool well done \o/
Rarotoeka
Could there be an improvement for people such as me who are on lower end devices such as Chromebooks? It lags quite a bit after about 3 songs and I find that a bit annoying. Apart from that though this is an awesome site if you just want to play mania in your browser! (Yes I know you did update it to work better already and I thank you for that because I guess this would be even worse if you didn't.)
Amyyyqt
Error 505: Internal Server Error :shrug:
Topic Starter
timhortonsyo

Rarotoeka wrote:

Could there be an improvement for people such as me who are on lower end devices such as Chromebooks? It lags quite a bit after about 3 songs and I find that a bit annoying. Apart from that though this is an awesome site if you just want to play mania in your browser! (Yes I know you did update it to work better already and I thank you for that because I guess this would be even worse if you didn't.)
Oh, maybe I missed a memory leak somewhere :( I'll try to take a look. Otherwise I think I already optimized it as far as I can, but I'll continue looking for more improvements!


Amyyyqt wrote:

Error 505: Internal Server Error :shrug:
That's an HTTP Version Not Supported error, which I've never seen before. Where do you see this error? See if it appears using another browser or device
Wimpy Cursed
Oh wow, this is very cool to see
Rarotoeka

timhortonsyo wrote:

Oh, maybe I missed a memory leak somewhere :( I'll try to take a look. Otherwise I think I already optimized it as far as I can, but I'll continue looking for more improvements!
Thx!
Father Ya
This is actually really nice, especially not having to go through the whole download process with songs as well
zathrust
trying it on my school chromebook but I keep getting the download error "failed to fetch" aaa
Topic Starter
timhortonsyo

zathrust wrote:

trying it on my school chromebook but I keep getting the download error "failed to fetch" aaa
Hmm it works fine on my end. Try going to the settings and picking another beatmap provider. If that doesn't work, try another device like your phone, or another wifi network.
zathrust

timhortonsyo wrote:

zathrust wrote:

trying it on my school chromebook but I keep getting the download error "failed to fetch" aaa
Hmm it works fine on my end. Try going to the settings and picking another beatmap provider. If that doesn't work, try another device like your phone, or another wifi network.
found a fix, it was just my school wifi lol, had to use my own hotspot
Amyyyqt

timhortonsyo wrote:

That's an HTTP Version Not Supported error, which I've never seen before. Where do you see this error? See if it appears using another browser or device
It's fixed now, thank you for responding!
kzxyotyo
your game is great but the ms is too high i wish you would add -40 and 40
BlueChinchompa
very cool
Topic Starter
timhortonsyo

kzxyotyo wrote:

your game is great but the ms is too high i wish you would add -40 and 40
Sorry, what ms are you referring to?
kzxyotyo

timhortonsyo wrote:

kzxyotyo wrote:

your game is great but the ms is too high i wish you would add -40 and 40
Sorry, what ms are you referring to?
i mean the universal offsit
Topic Starter
timhortonsyo

kzxyotyo wrote:

timhortonsyo wrote:

kzxyotyo wrote:

your game is great but the ms is too high i wish you would add -40 and 40
Sorry, what ms are you referring to?
i mean the universal offsit
You can set the audio offset:



It goes from -300ms to +300ms. You can also use the arrow keys on your keyboard to set it to a specific value like 40ms
kzxyotyo

timhortonsyo wrote:

kzxyotyo wrote:

timhortonsyo wrote:

kzxyotyo wrote:

your game is great but the ms is too high i wish you would add -40 and 40
Sorry, what ms are you referring to?
i mean the universal offsit
You can set the audio offset:



It goes from -300ms to +300ms. You can also use the arrow keys on your keyboard to set it to a specific value like 40ms
i put it at -25 which is my main offsit but still feels late when i click and also i have a question why when i put 25 speed it says 400 ms?
Topic Starter
timhortonsyo

kzxyotyo wrote:

i put it at -25 which is my main offsit but still feels late when i click and also i have a question why when i put 25 speed it says 400 ms?
Are you playing on your main machine, or another computer? If you're on a different setup it might require a different offset. In either case you can just increase the offset so it no longer feels late.

The ms time tells you the time between a note appearing on the screen and it touching the judgement line. Osu Lazer shows the same thing.
Shield VA
What is the circle skin used? Also, works great on school Chromebook, but the audio glitches sometimes. I honestly think the audio is my Bluetooth, but it could be the website, as when I switch to another website, the audio fixes itself.
Topic Starter
timhortonsyo

Shield VA wrote:

What is the circle skin used? Also, works great on school Chromebook, but the audio glitches sometimes. I honestly think the audio is my Bluetooth, but it could be the website, as when I switch to another website, the audio fixes itself.
The circle skin is my own design. I'm not sure I can fix the audio bug on my end as it just boils down to playing audio files using a library, but I'll take a look.
Topic Starter
timhortonsyo
Just wanted to post an update as I've added several features to the website since the initial post:

  1. Added gamepad support.
  2. Added arrow and diamond skins. The site should now have all 4 main styles (bars, circles, arrows, diamonds).
  3. Added a setting to make hold note bodies darker. Some may find it easier to read mono-color notes while others may prefer hold note bodies to look distinct. This is setting will be enabled by default since I assume people prefer the latter.
  4. Added the ability to set the HitPosition, in case you found the default note receptor height too high or too low.
  5. Added 10K support.
  6. Added the ability to proxy beatmap downloads. If you're playing on something like a school network and it blocks requests to the beatmap mirrors (NeriNyan, SayoBot, and Mino), you can now download beatmaps through my website's server instead.
  7. Added the ability to play .osz files. I went for a cheap implementation, so it only works for beatmaps that appear in the beatmap listing. This is for people who have pre-downloaded .osz files.
  8. Added a progress bar when listening to a song's preview. A small addition that indicates how far along in a song preview you are
  9. Added a donation button (Ko-fi). Not that I expect anything, but just in case anyone would like to support a student 🙂
That's all, thanks for checking out Web osu!mania!
Updates will probably slow down again as I lock in for the Winter 2025 term 👋
wyldstrykr
can you add an option where you can die in the song like in osu?
and also switch the colors of 1,3,5,7 and 2,6 as an option too?
ty
Topic Starter
timhortonsyo

wyldstrykr wrote:

can you add an option where you can die in the song like in osu?
and also switch the colors of 1,3,5,7 and 2,6 as an option too?
ty
I'm unsure about adding a health bar as

  1. it'll be relatively high-effort to implement, especially in a way that matches the official osu
  2. I haven't seen many people interested in a health bar since usually they'd be playing maps they can pass
However, I'll likely add a way to customize the lane colors if I have time. Thanks for the feedback :)
taobidiencrackt
Hello, I think you should add more skin customization features like size of note, note outline or filled, better arrow notes like fnf and wider bars, as well as a preview of what the customized skin may look like and download a custom file to add the customized skin back if data is lost
Shield VA
Suggestion: Be able to import in custom mania skins.
Topic Starter
timhortonsyo

taobidiencrackt wrote:

Hello, I think you should add more skin customization features like size of note, note outline or filled, better arrow notes like fnf and wider bars, as well as a preview of what the customized skin may look like and download a custom file to add the customized skin back if data is lost
I was thinking of adding detailed skin customizability, but I'm not sure how much value it really adds compared to the effort needed to implement it. Maybe I'll do it at some point, but no promises on when or if at all ;)

Shield VA wrote:

Suggestion: Be able to import in custom mania skins.
Unfortunately this is not possible because the skins are drawn dynamically using a graphics library. In the past I tried to use skins from the official osu, but it was a mess trying to figure out scaling and the skin.ini.

However, if I end up adding detailed skin customizability, I could add the ability to export/import skin settings.
X_Erin
Hey Tim! Just wanted to say that I'm thankful for your recreation of mania; it enabled me to still play even though circumstances can be a bit annoying haha.

I just wanted to ask if you could add a couple of other features if it's fine asking. ^^

1. An option to save or delete the cache of individual songs (Since being able to save maps is a thing now, it would be really nice if we also have the ability to delete them because I don't want to inflate the site's cache with maps I don't want saved. Though there's the option to delete all cache, it's a bit inconvienient... T-T)

2. An option to disable all overlays like in the actual osu mania (Sometimes, my combo counter, acc, and song progression can be really distracting, sometimes even making me more nervous. It would be really nice to have the option to hide them too so it can help me stay more focused on important runs hehe. ^^)

3. This isn't really a feature request, but I've been encountering a bug when playing maps with seperate rates inside it (like, the same song, but the beatmap has different rates of it so you don't need to add mods). Basically, whenever I try to open the base rate version, it always opens the next (or in this case, the 1.1x rate). The star rating is the same as the base rate version when I pause / see in the result screen, but the name / rate is, and literally plays as the next version. If it matters, here are the two maps I have with rates, which are also the ones I experience to bug from: beatmapsets/1845235#mania/3790458 and beatmapsets/1873730#mania/3855593

That's about it for what I have to say, and thanks again for developing this webiste. Cheers! ^^
Shield VA
Background dim would be nice. Especially since some maps have white backgrounds and I can't see the notes clearly
X_Erin

Shield VA wrote:

Background dim would be nice. Especially since some maps have white backgrounds and I can't see the notes clearly
There is actually, it's in the settings.
Shield VA
It doesn't work for me. Another issue coming up. This hasn't happened before but when I try and play a song and I pick a difficulty, when I click it, I get the loading screen for a split second before it closes and goes back to the search results.
X_Erin

Shield VA wrote:

It doesn't work for me. Another issue coming up. This hasn't happened before but when I try and play a song and I pick a difficulty, when I click it, I get the loading screen for a split second before it closes and goes back to the search results.
Choose a different beatmap loader / provider under the settings lol. Also, that's weird. BG Dim works fine for me.
Topic Starter
timhortonsyo

X_Erin wrote:

Hey Tim! Just wanted to say that I'm thankful for your recreation of mania; it enabled me to still play even though circumstances can be a bit annoying haha.

I just wanted to ask if you could add a couple of other features if it's fine asking. ^^

1. An option to save or delete the cache of individual songs (Since being able to save maps is a thing now, it would be really nice if we also have the ability to delete them because I don't want to inflate the site's cache with maps I don't want saved. Though there's the option to delete all cache, it's a bit inconvienient... T-T)

2. An option to disable all overlays like in the actual osu mania (Sometimes, my combo counter, acc, and song progression can be really distracting, sometimes even making me more nervous. It would be really nice to have the option to hide them too so it can help me stay more focused on important runs hehe. ^^)

3. This isn't really a feature request, but I've been encountering a bug when playing maps with seperate rates inside it (like, the same song, but the beatmap has different rates of it so you don't need to add mods). Basically, whenever I try to open the base rate version, it always opens the next (or in this case, the 1.1x rate). The star rating is the same as the base rate version when I pause / see in the result screen, but the name / rate is, and literally plays as the next version. If it matters, here are the two maps I have with rates, which are also the ones I experience to bug from: beatmapsets/1845235#mania/3790458 and beatmapsets/1873730#mania/3855593

That's about it for what I have to say, and thanks again for developing this webiste. Cheers! ^^
Good to hear you enjoyed my project :>

I've added these 3 points to Github as issues, you can find them here, here, and here. You'll know when each is done when they get closed. However, it may take a while as I'm super busy with schoolwork right now :(


Shield VA wrote:

It doesn't work for me. Another issue coming up. This hasn't happened before but when I try and play a song and I pick a difficulty, when I click it, I get the loading screen for a split second before it closes and goes back to the search results.
The brightness filter should be supported by basically all browsers, check that your browser is up to date or try switching browsers and see if that helps. As for the loading issue, it's because the default beatmap provider Nerinyan seems to be down currently (you can confirm by trying to download something on their website). As X_Erin said, switch to another beatmap provider like Mino.
Shield VA
Anyone know how to fix lag? In higher note density areas, I can see the frames and it lags HORRIBLY, as in I can barely read the notes. They come down, and then they glitch, and I hit at the right times and miss. Even the easier maps lag and I don't know how to fix this.
Slingexe

Shield VA wrote:

Anyone know how to fix lag? In higher note density areas, I can see the frames and it lags HORRIBLY, as in I can barely read the notes. They come down, and then they glitch, and I hit at the right times and miss. Even the easier maps lag and I don't know how to fix this.
Do you have background blur enabled?
And if so what % is it set at?

Since having a high background blur enabled killed my preformance.


timhortonsyo wrote:

I'm unsure about adding a health bar as

it'll be relatively high-effort to implement, especially in a way that matches the official osu
I haven't seen many people interested in a health bar since usually they'd be playing maps they can pass
I was able to find the values osu uses for health and made a simple health system.
I made a pull request
Shield VA
0% background blur. And the lag took away a good score. I was doing fine on a 7 key map, running smoothly, and then lag and I mess up.
Slingexe

X_Erin wrote:

An option to disable all overlays like in the actual osu mania (Sometimes, my combo counter, acc, and song progression can be really distracting, sometimes even making me more nervous. It would be really nice to have the option to hide them too so it can help me stay more focused on important runs hehe. ^^)
I was ale to add this feature. Just need to wait for Tim to approve my I made a pull request on the github :)


Shield VA wrote:

0% background blur. And the lag took away a good score. I was doing fine on a 7 key map, running smoothly, and then lag and I mess up.
What device and browser are you playing on?
Shield VA
I'm on a school issued Chromebook on chrome. It may be the school wifi as it doesn't lag after school or at home. I also would like an option to change the color of the mania skins. I play with white circles and blue and orange sliders with my mania skin in the actual game.
Shield VA
request to have an option to center the play area. Easier than to the left side of the screen
Niccy
This is so awesome!
X_Erin
Yo! Another Huge QoL would be the addition of the "`" hotkey that quickly restarts a chart in mania without having a pause. It's not really needed, but useful for grind sessions like if you choke the beginning immediately. Though, being able to assign a hotkey to it is also great haha.
Topic Starter
timhortonsyo

Shield VA wrote:

request to have an option to center the play area. Easier than to the left side of the screen
Not sure what you mean, the stage should already be centered?


X_Erin wrote:

Yo! Another Huge QoL would be the addition of the "`" hotkey that quickly restarts a chart in mania without having a pause. It's not really needed, but useful for grind sessions like if you choke the beginning immediately. Though, being able to assign a hotkey to it is also great haha.
Added 👍

---

I also want to announce that I just created a Discord server! Join if you guys want
Shield VA
I wish this could be connected to the actual game because I'm unable to play the actual game because my gaming laptop is broken and I'm stuck with a school laptop. But thanks for the great game. There should be an option for the position of the play area because some people play with it on the left side of the screen. Also maybe add a performance mode that helps with if your lagging (like me). Also an option to log in because I've lost my data twice now
Topic Starter
timhortonsyo
I wish this could be connected to the actual game
Also an option to log in
It depends on what you mean by "connected to the actual game". I'm planning on implementing sign in and linking with your official osu account in this issue - but this will only be for others to see which osu user has high scores on Web osu!mania. The scores you get in Web osu!mania will not affect anything in the real osu.

Also maybe add a performance mode that helps with if your lagging
Sure, I'll likely add it once I can identify the main causes of the lag.

There should be an option for the position of the play area because some people play with it on the left side of the screen
I've created an issue for this here
Shield VA
For lag, it was non existent when I first started using it a few months ago. When the timing chart was added, it made it unplayable for me. very laggy. I turned the FPS counter on. It goes as low as 32 FPS. I've cleared browser cache and cleared space on my laptop but it is still laggy.
Topic Starter
timhortonsyo
I'm confident it must be something earlier than the timing chart since that adds virtually no overhead to the gameplay code. However, I just added a performance mode toggle to the settings which disables animations and hitsounds to improve FPS. Let me know if it makes a difference
show more
Please sign in to reply.

New reply