3D Earth Music Visualizer

Link To Website

Source Code

Whassup, I’m brand new to this amazing community. I’ve just learned about code injection in shaders and I would like to know what you think about it.

Also suggestions and improvements are welcome! :smiley:

*** Update ***
@dllb @marquizzo @looeee

I’ve just added an upload song button, it makes more sense for the overall logic :video_game:
Thank you everyone! :smiley:

*** Update ***

Added default song, thanks to @prisoner849 :facepunch:


Is there a problem with the <audio> element? I tested it on Chrome and Firefox, and the inspector said “Your browser doesn’t support the audio element” on both browsers.

I have tryied the website both on Chrome/Safari and on Windows and Mac OS - On mobile i ve tested it on iPhone 7 and iPhone 5 and it is working with both . I have also found a cool website that shows all the html 5 features supported by the current browser:

In any case I will try to fix the issue or at least show a warning for the browsers that do not support the feature. Thank you very much for the feedback :smiley: Also it will be helpful to know the version of the browser to replicate the issue

Oh yeah, for sure. The <audio> element has been supported by Firefox and Chrome for about a decade now. That’s why I’m surprised to see this. Here’s a screenshot of Firefox, in case it helps with debuggin. Chrome shows the same.

I’m using FFox 89.0

I don’t get that error but in Firefox I get this:

Autoplay is only allowed when approved by the user, the site is activated by the user, or media is muted. earth-music-visualizer.web.app
Uncaught (in promise) DOMException: The play method is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.

In Chrome I don’t get any messages but the Audio controls are greyed out.

No errors, but no audio on FF and Chrome either, while on Chrome the buttons are grayed out too. Win7 with core 2 duo here (old PC).

Windows 7? I didn’t know there were any of you left! :grin:


1 Like

We are quality users,
and… we are more than Win8 ! :grin:


Yo looee, so the steps for the correct functioning of the player are

  • Clicking on the canvas - (I believe that’s what “the site is activated by the user” means)
  • Drag and drop a song (Or click on the screen for uploading on mobile)

The order doesn’t matter. Today I’m testing on Firefox. If the buttons are gray it’s because it is not loading the track, to address this issue i have to research some audio compatibility differences between browsers. I have only tried with mp3 and wav. Thanks for the feedback :facepunch:

@dllb @looeee

Lol I’ve just tried on Firefox and it is just working D:

By the way, if you only see the message in the html inspector it’s just the standard way to write the message: Screenshot from the documentation page.

Have you tried clicking on the screen so that the epilepsy disclaimer message disappears? I should really consider some more user friendly interaction

That is not part of the disclaimer, and it kind of gets confused in it

The reason is that only when you first click on the document the script creates the audio context, so if you still see the disclaimer it is because the audio context has not been created

*** Update ***
@dllb @marquizzo @looeee

I’ve just added an upload song button, it makes more sense for the overall logic :video_game:
Thank you everyone! :smiley:


Maybe it would be good to have a default song, that users can play, in order to see what your app is capable of.


Agree, I’ve arleady thought about it, but being a (veery unproductive) music producer, it has to be miiine :smiley:
I think I’ll just go for some royality free stuff for now :’)

1 Like

Cool! I like it :beers:

1 Like

1 Like

Nice! Glad you added the default song, it looks really cool. Mega-tsunamis everywhere!