# Interactive Music Video with THREE.js

**URL:** <https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220>\
**Category:** Showcase\
**Tags:** music-video\
**Created:** [August 27, 2020, 10:36pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220 "2020-08-27T22:36:00Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![Brian\_Risk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brian_risk/32/12944_2.png) [@Brian\_Risk](https://discourse.threejs.org/u/Brian_Risk)\
**Post date:** [August 27, 2020, 10:36pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/1 "2020-08-27T22:36:00Z")

</div>

Hey all! What do you think of this music video using THREE.js?

[http://splicy.com/](http://splicy.com/)

It pays homage to iconic ladies of the 1970s. Source code here:

> **[GitHub - splicymusic/those-girls-you-know: First JavaScript music video ever?...](https://github.com/splicymusic/those-girls-you-know)**
>
> First JavaScript music video ever? THREE.js. Contribute to splicymusic/those-girls-you-know development by creating an account on GitHub.

A rendering of the animation:

[![](https://img.youtube.com/vi/4oUW7u8KbE8/hqdefault.jpg "SPLICY - Those Girls You know [70s Icons]") ](https://www.youtube.com/watch?v=4oUW7u8KbE8)

A making-of video:

[![](https://img.youtube.com/vi/FgYePoa5Pqs/maxresdefault.jpg "Making a Music Video with THREE.js") ](https://www.youtube.com/watch?v=FgYePoa5Pqs)

---

<div class="post-metadata">

**Author:** ![Raymond\_Herrera](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@Raymond\_Herrera](https://discourse.threejs.org/u/Raymond_Herrera)\
**Post date:** [August 28, 2020, 12:53am UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/2 "2020-08-28T00:53:47Z")

</div>

Thanks for that important contribution, Brian.

I have some feedback. When I run your girls under Windows+XAMPP+Chrome, I get the whole experience … except for sound, that is.

In your website, everything is groovie.

[http://splicy.com/](http://splicy.com/)

All evidence points to the sound in Three.js being broken.

Can you folks out there confirm/refute my finding?

TIA,

-Ramon  
**JFK Numbers**

ps: Problem fixed. The MP3 file was missing. See it below.

---

<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:** [August 28, 2020, 3:23pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/3 "2020-08-28T15:23:29Z")

</div>

I think some of the images are blocked by my ad blocker:

![ssss](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f8a6189057e73b4cbd14a251a2f5918634726057.png)

---

<div class="post-metadata">

**Author:** ![Brian\_Risk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brian_risk/32/12944_2.png) [@Brian\_Risk](https://discourse.threejs.org/u/Brian_Risk)\
**Post date:** [August 28, 2020, 3:36pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/4 "2020-08-28T15:36:08Z")

</div>

Haha, so for future reference I should never have an image file name start with “ad”. Did the animation load at all? I actually don’t think those images are used, so it should be fine.

---

<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:** [August 28, 2020, 3:42pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/5 "2020-08-28T15:42:57Z")

</div>

> [@Brian\_Risk](#):
>
> for future reference I should never have an image file name start with “ad”.

Apparently haha.

Everything appeared to work until I got to the “click/space to start” screen but then clicking did nothing.  
Tested again with adblock off and it loads ok. However, the music pauses for 1 seconds every 5 seconds or so. Otherwise, it’s great though.

---

<div class="post-metadata">

**Author:** ![Brian\_Risk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brian_risk/32/12944_2.png) [@Brian\_Risk](https://discourse.threejs.org/u/Brian_Risk)\
**Post date:** [August 28, 2020, 4:01pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/6 "2020-08-28T16:01:12Z")

</div>

What’s your browser/system?

---

<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:** [August 29, 2020, 4:45am UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/7 "2020-08-29T04:45:48Z")

</div>

Chrome on windows.

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [August 29, 2020, 8:01am UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/8 "2020-08-29T08:01:26Z")

</div>

Nice!

Definitely not the first JavaScript music video ever though…

Here are a couple I worked on a decade ago:

> **[The Wilderness Downtown](http://www.thewildernessdowntown.com/)**
>
> Check out Arcade Fire's new interactive HTML5 music experience, “The Wilderness Downtown”.

  

> **[ROME “3 Dreams of Black”](http://www.ro.me/)**
>
> Check out “3 Dreams of Black” – a new an interactive film by Chris Milk. With music from the album “Rome” by Danger Mouse, Daniele Luppi, featuring Jack White and Norah Jones.

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [August 29, 2020, 8:07am UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/9 "2020-08-29T08:07:30Z")

</div>

Can’t wait to see more though! 😀

---

<div class="post-metadata">

**Author:** ![Brian\_Risk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brian_risk/32/12944_2.png) [@Brian\_Risk](https://discourse.threejs.org/u/Brian_Risk)\
**Post date:** [August 29, 2020, 2:17pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/10 "2020-08-29T14:17:34Z")

</div>

Dang – great job! The coding of the ROME song is fantastic. Inspiring.

---

<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:** [August 29, 2020, 9:44pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/11 "2020-08-29T21:44:49Z")

</div>

@mrdoob didn’t you make a Chemical Brothers video too? Is that still up somewhere?

I ended up going on a JavaScript music video tour - there are loads of good ones. Although someone really needs to clean up the dead links from this page.

> **[Interactive Music Video - Experiments with Google](https://experiments.withgoogle.com/search?q=Interactive%2BMusic%2BVideo)**
>
> Since 2009, coders have created thousands of amazing experiments using Chrome, Android, AI, WebVR, AR and more. We're showcasing projects here, along with helpful tools and resources, to inspire others to create new experiments.

---

<div class="post-metadata">

**Author:** ![benzahler](https://avatars.discourse-cdn.com/v4/letter/b/f4b2a3/32.png) [@benzahler](https://discourse.threejs.org/u/benzahler)\
**Post date:** [August 30, 2020, 9:04pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/12 "2020-08-30T21:04:26Z")

</div>

wow, just as I posted my own, I find yu doing something similar 😃  
I chose to build a world into which I place the music video created by my friend who is a film maker… he did not wat to show a house of cards in the video, so I decided to build one my own 😉

> **[House of Trumps | Ben Zahler's Songgoing](https://www.benzahler.ch/houseoftrumps.html)**

As for yours, it seems to be loading veeery slowly… is your server throttled?

---

<div class="post-metadata">

**Author:** ![Raymond\_Herrera](https://avatars.discourse-cdn.com/v4/letter/r/c4cdca/32.png) [@Raymond\_Herrera](https://discourse.threejs.org/u/Raymond_Herrera)\
**Post date:** [August 31, 2020, 7:55pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/13 "2020-08-31T19:55:08Z")

</div>

[https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/82d29faafaf4b6115af5f52353e1e5c84f388ad5.mp3](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/82d29faafaf4b6115af5f52353e1e5c84f388ad5.mp3)

Please find attached the audio track that is missing from the GitHub distro. You need to put it inside a folder aptly named “music”

-RFH

---

<div class="post-metadata">

**Author:** ![mrdoob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrdoob/32/22417_2.png) [@mrdoob](https://discourse.threejs.org/u/mrdoob)\
**Post date:** [September 4, 2020, 5:05pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/14 "2020-09-04T17:05:35Z")

</div>

Yes!

Here you have:  
[https://within-unlimited.github.io/neon-lights/release/](https://within-unlimited.github.io/neon-lights/release/)

---

<div class="post-metadata">

**Author:** ![Brian\_Risk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/brian_risk/32/12944_2.png) [@Brian\_Risk](https://discourse.threejs.org/u/Brian_Risk)\
**Post date:** [September 26, 2020, 8:27pm UTC](https://discourse.threejs.org/t/interactive-music-video-with-three-js/18220/15 "2020-09-26T20:27:12Z")

</div>

BTW I’ve pushed some minor changes to github – one was removing those images with “ad” in the title. Thanks for the catch!