# 3D Earth Music Visualizer

**URL:** <https://discourse.threejs.org/t/3d-earth-music-visualizer/27556>\
**Category:** Showcase\
**Tags:** web-audio, data-visualization, animation, music, shaders\
**Created:** [June 25, 2021, 9:05pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556 "2021-06-25T21:05:01Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 25, 2021, 9:05pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/1 "2021-06-25T21:05:01Z")

</div>

![Screenshot (14)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/5/e513e9ea4c85a56bebbeb7d7f822f136806250ad.png)

[Link To Website](https://earth-music-visualizer.web.app/)

[Source Code](https://github.com/adarkforce/3D-Earth-Music-Visualizer)

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! 😃

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

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

\*\*\* Update \*\*\*

Added default song, thanks to @prisoner849 👊

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 25, 2021, 9:35pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/2 "2021-06-25T21:35:17Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 25, 2021, 10:07pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/3 "2021-06-25T22:07:37Z")

</div>

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:

> **[The HTML5 test - How well does your browser support HTML5?](https://html5test.com/)**
>
> The HTML5 test score is an indication of how well your browser supports the upcoming HTML5 standard and related specifications. How well does your browser support HTML5?

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 😃 Also it will be helpful to know the version of the browser to replicate the issue

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 25, 2021, 10:18pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/4 "2021-06-25T22:18:30Z")

</div>

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.

 ![Screen Shot 2021-06-25 at 3.18.39 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/6/f6c74dd7047bba23de716ab2c03ab82a90ac790c.png)

I’m using FFox 89.0

---

<div class="post-metadata">

**Author:** ![looeee](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/looeee/32/59_2.png) [@looeee](https://discourse.threejs.org/u/looeee)\
**Post date:** [June 26, 2021, 3:59am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/5 "2021-06-26T03:59:39Z")

</div>

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

```javascript
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.

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [June 26, 2021, 6:25am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/6 "2021-06-26T06:25:44Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 26, 2021, 6:45am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/7 "2021-06-26T06:45:12Z")

</div>

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

![dozens-of-us](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/6/d6d2bbfb9f6301c61b29fbfca2fe8deda57159dd.gif)

---

<div class="post-metadata">

**Author:** ![dllb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/dllb/32/19191_2.png) [@dllb](https://discourse.threejs.org/u/dllb)\
**Post date:** [June 26, 2021, 6:55am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/8 "2021-06-26T06:55:47Z")

</div>

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

![win7](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/a/faba618de555302b1d43e35cda42b84af036b374.png)

---

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 26, 2021, 8:54am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/9 "2021-06-26T08:54:22Z")

</div>

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 👊

---

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 26, 2021, 9:18am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/10 "2021-06-26T09:18:09Z")

</div>

@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.

 ![Screenshot (12)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/0/e0f638d0fe39f4ca4dc1f8aee32af2c1f96498de.png)

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

 ![Screenshot (13)](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/686a0efb36c2b1ab63fae9916d7a9efba47c99a1.png)

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

---

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 26, 2021, 10:33am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/11 "2021-06-26T10:33:16Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 26, 2021, 10:46am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/12 "2021-06-26T10:46:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Antonio\_Della\_Fortuna](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/antonio_della_fortuna/32/19173_2.png) [@Antonio\_Della\_Fortuna](https://discourse.threejs.org/u/Antonio_Della_Fortuna)\
**Post date:** [June 26, 2021, 11:14am UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/13 "2021-06-26T11:14:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 26, 2021, 12:05pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/14 "2021-06-26T12:05:37Z")

</div>

Cool! I like it 🍻

---

<div class="post-metadata">

**Author:** ![L\_k\_Reddy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/l_k_reddy/32/19192_2.png) [@L\_k\_Reddy](https://discourse.threejs.org/u/L_k_Reddy)\
**Post date:** [June 26, 2021, 6:22pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/15 "2021-06-26T18:22:22Z")

</div>

[![](https://www.edusys.co/images/wow.gif)](https://www.edusys.co/images/wow.gif)

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [June 26, 2021, 7:09pm UTC](https://discourse.threejs.org/t/3d-earth-music-visualizer/27556/16 "2021-06-26T19:09:10Z")

</div>

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