Online Music Hackathon

First Prize: $5000

Ends on Jul 22:
00
Days
00
Hours
00
Mins
00
Secs

Submit your best music themed repls!

Posts
HTML, CSS, JS
HTML, CSS, JS
Pinned
20
MUSIC HACKATHON: FAQ
Hey folks! A lot of you have been asking me the same kinds of questions, so I figured i'd make a handy FAQ: **1. What's the theme?** The theme is *music!* **2. Does this mean my repl has to play audio?** No - it doesn't. You're free to interpret "music" however you'd like! One of my favorite music-related repls we've received on the site is @jajoosam and @thesephist's [lyrics.rip](https://lyrics.rip), which didn't play audio but did generate fake lyrics. It's all about what you want to create. Not sure if your repl fits the theme? Hit me up on Discord or post here - I'm happy to talk you through anything. **3. So... what's the deal with copyrights?** This one is kind of nebulous. My best advice here is not to use any copyrighted songs, because you never know how you'll want to share your repl or where. **4. How much of my work can be from libraries or previously made?** "Original content" means this: *don't steal other people's work!* Things that are open source, libraries, are free to use with attribution, etc. are fair game. **5. How will my work be judged?** We're looking for creativity and execution here. This doesn't mean it has to be super complex though. If an idea is good, an idea is good! **6. What language should I create my repl in?!** The cool thing about a flexible theme? If you can find a way, you can do it. Web projects have so far proven to be popular though. **7. Can I create my entry elsewhere then c/p it into a repl?** No :-( The idea here is to use Repl.it! **8. Can I have (a) partner(s)?** Sure can! We encourage folks to use Multiplayer for group projects.
5
posted by katyadee (813) 11 days ago
Pinned
🚨THE THEME IS MUSIC🚨: WIN $5,000! We're having another competition!
### Friends, foes, loyal Replers, Boy do I have some news for y'all! On July 1st, we're kicking off another competition and the stakes are higher than ever. ![richrichrich](https://storage.googleapis.com/replit/images/1561408399112_514da1dfbb25d3bc66b26fb7e7430790.gif) **Types of programs accepted:** *Any.* **Theme:** MUSIC! **Rules:** As always, *must* be original content & MUST be created *and* hosted on Repl.it **Prizes:** $5,000, $2,500, and $1,000 **Dates:** July 1 @ 00:00 PST to July 21 @ 00:00 PST **Judge:** Tom Lehman, the CEO of Genius ## To submit, all you have to do is share your repl on [Challenge](https://repl.it/talk/challenge)! Check out [our FAQ](https://repl.it/talk/announcements/MUSIC-HACKATHON-FAQ/16359) if anything is unclear or you have any questions. And feel free to ask anything you need there, too!
148
posted by katyadee (813) 23 days ago
41
🎵 📦 Music Box Editor 📦 🎵
Simple editor for creating music box melodies with an animated music box that "plays" them for you. Very basic: Just click on the diamonds to generate a note and press play. There are some featured melodies included. * As a bonus I have added a database - it's a separated repl because I don't want the player to load longer. My official submission is the Music_Box_Editor, the DB is just a storage for notes that I can't finds space for in the actual application. To find more melodies or if you wan't to submit one to the database - click the button "MUSIC BOX DB". Fill the form to submit or press the magnify glass and copy the note data. Load it in the player - it will figure out the number of blocks and the type of the melody - but the delay is up to you (either use the optimal one suggested by the creator in the database post or the one you feel plays best). * The note sounds are from freesound.org. Animations are created by me in After Effects and exported as SVG animation which is then played in the browser with the lottie player. Make sure you tune-up the box when first loading to cache the sounds for better first preview. Features: -edit notes -play speeds -save notes and load notes -generate random notes -tuning up the music box -copy notes from sheet and auto-paste on next sheet -add new block "+" and delete block "-" or press "++" to generate N blocks from input and "clear" to delete all. -move notes with arrows -switch between two sizes of boxes - mini(9 notes) and grand(15 notes) from the cowbells button switch -toggle hold notes -two preview modes - show one block at a time or all blocks being visible while playing -mixing notes - combines two or more pieces together of any type. -build-in tunes: Ode of Joy, Twinkle Twinkle Little Star, Star Wars Theme, Jurassic Park Theme, Elf Song. note mixing feature user guide - paste notes on load input field and press +add -then put another one and another one and so on. Every time +add is pressed, load input field will be erased and the piece will be added in memory. When all needed peaces are collected - press mix'm button - this will merge all pieces together and the final type will be the one of the last piece. However don't mix mini with grand type (doesn't sound very good) - mix same types of pieces together ( mini + mini , grand + grand). Then all you have to do is press play - no load necessary. Bonus features: --save notes to a database https://musicboxdb-2--anthony-tonev.repl.co/ My idea was to write an app that is simple enough to be beginner friendly so anyone can learn to write simple music peaces without knowing complex note notations and also have an open source note sharing system where users build melodies on top off or inspired by other users melodies. Works best on desktop with chrome in full screen repl view. ![image](https://storage.googleapis.com/replit/images/1563100885459_aa7a1d93fd679e08e575b1f426b8e218.png) ![image](https://storage.googleapis.com/replit/images/1563099650447_9b7bffd9b0c6995d7978a616603b5cf7.png)
82
posted by Anthony_Tonev (43) 14 days ago
4
Play chess and listen to music
Listen to the extremely relaxing and very quiet "ode to joy" while playing chess. Try playing chess while the chorus starts screaming. # Note UCI notation works like this: square the piece came from to square it went. For example: * Pond from e2 to e4 is e2e4 * Promotion from e7 to e8 (promoting to queen) is e7e8Q
5
posted by rediar (59) 2 days ago
19
REPL BeatZ
I made animated headphones that model the ones I wear in real life. For the REPL Music Challenge, I decided to give my project a little twist with a recent update - when opening up the website, music will begin to play! This project was done entirely by myself, @EchoCoding. Please up-vote if you liked it - it'd be greatly appreciated!
9
posted by EchoCoding (242) 14 days ago
17
RICKROLLING ALL DAY LONG
Hey, you said music. This was the first thing that came to mind. It's ironic the button to submit this says "Let's rock and roll." But yeah, hope you enjoyed this :) https://rickroll--canteventhink.repl.co/
7
posted by canteventhink (18) 15 days ago
7
Musical Waves!!!
YAY!!! ---------- Introduction ========= Welcome to my project, _Musical Waves_. I created this project by myself (not a group project). In this program, you will journey into a new world filled with magic and some other amazing stuff. Actually, in a much more realistic point of view, you will waste time staring in awe as you watch lines dance across your computer screen representing different types of oscillators generate sound wave patterns and listen as the beautiful world of music takes over your mind (more like the sound of the sine oscillator gets stuck in your head for the rest of your life). Instructions ========= ![Screen Shot 2019-07-08 at 6.37.42 PM](https://storage.googleapis.com/replit/images/1562727134122_77e652851ed3bf0080cc56b9422e98b6.jpeg) The wave displayer on the top represents the wave created from the overlapping sound waves, whereas the displayer below that shows you multiple sound waves drawn on top of each other. _Note that this can only display four sound waves plus microphone input for performance purposes on the bottom wave displayer, however it still adds the sounds into the output sound._ When you click `Add Oscillator` or `Import Audio`, some controls will appear at the bottom of the screen. You should be able to figure them out yourself, so I haven't added labels yet. Have Fun Experimenting!!! ==================== Also remember this is still a work in progress, but it the current part of it works great, so feel free to give me any suggestions or tell me if you run into a bug! One More Thing ============ The microphone input only works if the program is opened in a separate tab, (not in this page) Please feel free to look through the code if you are interested!
6
posted by SnailPotato (6) 7 days ago
4
Rap & Fame
There are 8 Rappers and there bio. Made by myself.
4
posted by A_Moldy_Potato (7) 5 days ago
5
A geeky way to say “Happy Birthday”
It’s my friend’s birthday. I plan to send him some JS code that when pasted into DevTools plays the happy b’day song. This is the result. (Solo project.) - I used Web Audio API to create a simple music box. - Developed this in repl.it by creating a “Preview” button to let me test the code to copy. - Melody and chords are encoded into CJK characters to “disguise” the Happy Birthday song. The first 47 characters are the melody, the rest are the (broken) chords. - To not pollute the global scope, while being concise, local variables are declared as default parameters. e.g. `((paramX, paramY, localA=1, localB=2) => …)`. - The `t(f, b)` function plays a single note of frequency `f` at time `b`. - Each character is processed in forEach loop. The index is used to determine when to play the note. HBD @phoomparin!
1
posted by dtinth (4) 6 days ago
8
🎶🎵 FEEL THE MUSIC 🎶🎵 (version 2)
**Hey guys !** I present you my **Feel the music website**, I made it all by myself using a template that I modified. **Please upvote if you like it.** FOR NOW It tells you about music in general and what I like the most in music. It is the Beta version of the full website, I already have some good ideas of what I will be making, what type of pages I will make. New stuff will come out everyday so stay on alert. If you have any suggestion or ideas for me to improve my website please tell me everything you are thinking of. _____________________________________________________________________________________ **New page** : About groups, go and check it out. _____________________________________________________________________________________ I hope you will enjoy it and thanks for reading ;)
4
posted by lsambrook (284) 15 days ago
7
CROWDSOUND. Music. By People. For People.
“When plain words are not enough to express the heights of your feelings, add melody to it, a grandiose harmony, plus a great amount of authenticity and you’ll know the maestro deep inside bringing forth the hidden things to be seen and heard as exactly as they are.” - Anonymous Imagine a world where music is produced and listened to because of, well... the beauty, the art, and the expressiveness of music. If you could dream of a world where music are composed without the extra baggage of seeking for wealth, fame and popularity, it will definitely be a world with different songs and music compositions than ours.. This is what CROWDSOUND is all about! It is a platform where songs and music compositions are owned by the people for the people. CROWDSOUND is an open-collaboration to music production. You thought of a song lyrics and title? Write them in CROWDSOUND and invite or just let other interested people contribute by uploading, say for example, guitar, bass, or drumkit tracks that could be used to produce the song. But what if someone else prefer a different guitar track? No problem, let him/her upload or choose from the uploaded tracks of other people and have his/her own version of the song. In CROWDSOUND, everyone is free to contribute, everyone is free to listen. It is the place where everyone could make playlists from the songs of the people! By the end of the competition, the application allows: * Users to initiate a song * Anyone could contribute by uploading tracks (voice, guitar, drums, etc.) * Users could choose and generate the song based on the available tracks * Users may choose to * Play the most liked version of the song * Play a chosen version of the song from another user * Play own version Don’t forget to upvote!
4
posted by BernardDon (6) 14 days ago
2
Superstar© SongWriter
### Ever wanted to become THE next big superstar? With Superstar© SongWriter you can"! When I heard about the music jam I was really excited! I have recently taken a statistics class and wanted to toy with music lyrics and bigrams! Perfect match! This is my slightly sarcastic take on modern-day advertising. I am not a designer and do not intend to hurt your eyes with my choice of colors =). The site is best enjoyed when it is a bit larger, so you can see the background image (just pull the code lever up). I hope you guys enjoy it and become the next big superstar! I would be honoured to land any place at the jam! The money (if any) would go to [open-source](https://github.com/inexorgame/) of course. DISCLAIMER: I take no guarantees for any bad wording included in the chart songs =)
2
posted by Tomatenquark (1) 2 days ago
4
Instruments Of Joy & Co.
Instruments Of Joy & Co. is a multi-page website about all types of instruments. Made by my self.
0
posted by A_Moldy_Potato (7) 5 days ago
3
pDevMusic11
An application that can be deployed to generate cool music with awesome animation.
4
posted by PulkitPatel (2) 8 days ago
2
kohi
an instrument that I made, originally for a school project, now improved for this competition, let me know if you can't figure out how to use it, it can be confusing... I made it by myself
1
posted by GrantStaten (1) 2 days ago
4
Repl Hero, a fun music arcade game
# REPL HERO ### Guitar Hero... For HACKERS REPL HERO is a simplified version of guitar hero, written in HTML5, CSS, and JS, with a terminal astethic. It was built for the Repl.it's Online Music Hackathon. ### How to Play Use the number keys (1 - 5) to play a note when the block hits the blue bar. You have 5 lives (at the bottom), and once those run out, it's game over. Other than that, reach a high score! ### A Word About the Music The music you play is not random. It was composed on Bosca Ceoil (https://boscaceoil.net/). The game picks which bars to play out of a set of options, which create "acceptable" music. ### Authors I'm Liam Ilan, a 13 year old software developer who is never working, but always playing around. Also, thanks dad (Ron Ilan: https://ronilan.com/)
1
posted by snowboardsheep (3) 10 days ago
4
Make a Musical Beat out of abstract sound
It was fun making this app and this is also good for making professional beats! Enjoy 🎧
0
posted by sakkshm (3) 12 days ago
3
HTML/CSS/JS Guitar with Customization
![Screen Shot 2019-07-08 at 7.52.34 PM](https://storage.googleapis.com/replit/images/1562629976412_8dbc98bd2c906d09913df87e4df8f348.png) *NOTE: This has been designed for a full browser page, so please check it out at this link: https://shamefulskybluetransformations--aloeb83.repl.co/* # Music Hackathon Submission ### HTML/CSS/JS Guitar Welcome, and thank you for checking out my submission. My submission is a functional acoustic guitar made using only HTML, CSS, and Javascript. This project has two major functions to it: # Function 1: The Guitar's Audio This guitar is able to be strummed by simply hovering over the strings with your mouse. To begin strumming, simply click anywhere on the page, and then you'll have full range to strum as you wish. While having a working guitar is pretty cool, at least in my opinion, the idea might still seem a bit bland to some. This leads me to the second function of this project. # Function 2: Customizable Colors for the Guitar Yes, you can change the colors of your guitar. Everything from the neck and body, to the strings and pickguard, can be changed using the RGB sliders below the guitar's neck. Feel free to make the guitar as pretty, or ugly, as you wish. If you make a particularly cool guitar, please post in the comments below. You can even go to the extreme, and match the guitar's colors to the background, (128,128,128), allowing you to "rock out" with an actual air guitar. ![Screen Shot 2019-07-08 at 2.02.33 PM](https://storage.googleapis.com/replit/images/1562627288899_45ae3bfcfa1cb3a90e961f43ef747f13.png) ###### Yes, the guitar will still work like this # Update #1: Mobile-Friendly (Portrait) version complete! ![IMG_2227](https://storage.googleapis.com/replit/images/1562794097685_1f2dc8428ec05df9f8c81618efa80ffb.png) This update was based off the suggestion of Kakashi Hatake on the Repl Discord server. While it doesn't work exactly as the desktop version does, (due to some limitations while mobile devices and HTML based audio), all the key components are there. You can completely customize the color of the guitar by clicking the pen in the top right corner. You are also able to still strum, in a way. Due to the limits mentioned earlier, instead of being able to strum each specific chord, instead if you tap wherever the strings are, it'll play a single strum sound. Unfortunately, due to further limitations, it can only be played one time before you have to refresh to play it again. I added a refresh button in the top right to make things slightly easier. Refreshing will revert the colors of the guitar back to it's original colors. # Update #2: Landscape for Mobile Completed ![IMG_2228](https://storage.googleapis.com/replit/images/1562898321336_cc5f069ef97f22efae32fa59d822a0cd.png) # Update #3: Color saving with local storage! ![ezgif.com-video-to-gif (2)](https://storage.googleapis.com/replit/images/1562898106741_b080de53f14bdeb5081e619b60f55764.gif) I mentioned in the 1st update that refreshing the page will reset the colors you picked out for your guitar back to the original colors. **NOT ANYMORE!** Now, the colors you picked for each aspect of your guitar will save and stay the same the next time you pull up the webpage. Note, that it may take about half a second for it to load the colors in. However, if you feel like the original colors are the best, or you want to get there to redesign from scratch, you can now simply press the Reset button near the customization options. This function works on both the desktop and mobile versions of the project. So please check it out, let me know what you think of it, and if you like it please upvote it. Thanks for reading -Aloeb83
1
posted by Aloeb83 (40) 8 days ago
3
Paino Keys
This is my rushed submition for the music jam. Ill submit another
4
posted by vvc (46) 15 days ago
4
Song Jumper
This is my submission to the hackathon. It is a simple, yet challenging game. You control a little colored square, and must make it to the end of the map. Pentagons fall from the sky, and if you touch won, you die. The same happens if you go off the edge of the screen. Yellow coins drift across the screen as well, and touching them gives you 50 points. But here's the twist: The music controls the map! The way it works it that each note in the song corresponds to the height of an element on the map. As well, they control the speed of the pentagons. There are two modes to this game: sandbox and level. ## Sandbox mode In sandbox mode, you enter a beat which controls the map. There is a text box onscreen, which you type it into. Each digit in the beat corresponds to a certain frequency. 1 is 100 hz., 2 is 200, etc. __NOTE__: Do not enter letters into the box or the game will break! ## Level mode In level mode, you play a set of predefined levels, each harder than the last. Completing one gives you points equal to the level number times 100. ## Gameplay To win, you must touch the red line at the end of the map. ## Troubleshooting Audio is made with [tone.js](https://tonejs.github.io/). When you play, you should here the current level or the beat you entered being played. If not, there is usually a simple fix (for Chrome). * Go to chrome://flags. * In the search bar at the top of the page, enter "autoplay policy". * In the dropdown that appears (on the far right), select "no user gesture required". * Reload the game and try again. ___ You can see the source repl [here](https://repl.it/@sugarfi/Song-Jumper). Play the game [here](https://Song-Jumper--sugarfi.repl.co) Audio made with [tone.js](https://tonejs.github.io/). Graphics and physics made with [matter.js](http://brm.io/matter-js/) This was not a group project.
0
posted by sugarfi (4) 13 days ago
4
Music Competition
This was not a group project I just made this for a challenge I am still a beginner at making websites.
0
posted by KolterDixon (3) 15 days ago
2
Submission: SomaFM Radio Player
# **SomaFM Radio Player for your browser!** *** Choose & Play SomaFM stations. #### Live Demo! (*click **twice** for external page*)... [Click for webpage](https://somafm-player--xiija.repl.co/) ![Bling](https://res.cloudinary.com/xiija/image/upload/v1562796658/girlHeadphones.jpg) ### *Features* + 32 stations to choose from. + Almost every genre. + Adjustable volume. + Artisit & Song names. *** > Tim and Katya seal of approval !... ( *definately just wishful thinking :P* ) ###### SCREENSHOT ![SomaFM Player](https://storage.googleapis.com/replit/images/1562710218884_dabeb7f091ed7e40331db498a9b2676e.png) ``` # FREE TO USE # FEEL FREE TO FORK! ``` ##### Coda > This started as a need for decent background music while browsing, > without having to jump thru alot of hoops or sign up for a site. > The basic concept is zen-like simple , yet elegant enuff for daily use! > > Enjoy! >Xiija ***
2
posted by Xiija (1) 7 days ago
3
squ - a tiny song writing tool
squ a tool used for reviving dead songwriting inspirations more info in the Help page
0
posted by niorg2606 (41) 10 days ago
2
ᴇʟᴇᴄᴛʀɪᴄ ᴩᴏʟyɢᴏɴᴀʟ ᴄᴀɴᴠᴀꜱ ʟɪɢʜᴛ ᴏʀᴄʜᴇꜱᴛʀᴀ 🗲 💠 🎼 v2.0
### On-going study focused on canvas usage, iseditable DOM property, and async multimedia events. I made this while messing around trying to see how the html5 canvas element works, and what can be done when it's combined with css filters and asynchronous javascript loops (timers). The background is a gif that I found online. I edited the 2001 space odyssey theme just a little bit to make background music for the first track. The other three are original and credited in the Repl! #### Random Placement of Shapes Placement coordinates for shapes on the canvas are generated using random numbers within several sets of randomized ranges to produce a 'partially random', 'partially controlle' end result. Pressing the "Clear Canvas" button will wipe out all images from the canvas, and a new combination of randomized coordinates will be usedd to draw shapes to the canvas. #### Your Lucky Numbers Although I don't encourage gambling, the randomly generated "lucky numbers" are valid Mega Millions numbers (i.e., [ "five different numbers from 1 to 70 (the white balls) and one number from 1 to 25 (the gold Mega Ball) "](https://www.megamillions.com/How-to-Play.aspx)) #### Improvements I'm aware that code is a little ugly and maybe could use some refactoring☺ Let me know if you have ideas for improvements, or if you want to collaborate on this or any future project. Created by Adam Lane → https://repl.it/@AdamL3
2
posted by AdamL3 (1) 8 days ago
2
Get the golden microphone
You are in a museum trying to get the golden microphone but a SWAT team is on there way. Crack the code and run!
0
posted by A_Moldy_Potato (7) 5 days ago
2
🎵+🎹=Virtual Note - Create your own music with online piano and staff
Hello, welcome to Virtual Note. Virtual Note is a simple online music creator, You can use it as staff or piano or even both. You now have the power to create real compositions at you finger-tips. Creating this site took 6 hours to make. I created this because before this competition was released I had absolutely no clue about staff and notes before. This competition forced me to learn about how all this stuff works, and I ended up creating a pretty cool application. Making this and learning this stuff was a lot of fun. If you are like me and does not know how the actual music works just scroll down and I provided the article I used to learn from. In the following lines, I am just going to explain how to use the site. In the middle is the staff, to add notes you can use the drop-down menu and click on the note you want, then click on the button that says "+♩". It will then add it to the staff You can also add notes by typing them, to show you what to type I will create a chart on the left will be the note and on the right will be the key to press, this part is more like the piano, E: e F: f G: g A: a B: b C: c D: d E: Space Bar Rest: r To play your composition hit the play button, to reset your work to hit the reset button, and the change volume use the slider. Okay, that is about it! I hope you enjoy this work, it was a lot of work to make, if you create music and you like it post it in the comments below, free cycles/upvotes! Remember to leave you to vote if you like this! 😁
0
posted by RyanRana (152) 12 days ago
1
S N E K
it is snek. this is an implementation of an AI agent that does breadth-first search in the snake game!
1
posted by jacobrichards (0) 1 day ago
1
The Piano
Tells you everything about the piano like how it was invented, how it works, and who was the best player in the world. Made by myself
1
posted by A_Moldy_Potato (7) 5 days ago
1
Classical Composer Coder
> Music is a higher revelation than philosophy. - _Ludwig Von Beethoven_ ![Screen Shot 2019-07-17 at 4.51.48 AM](https://storage.googleapis.com/replit/images/1563353552391_37d17296efc5f47d338a754a40880b23.png) # Classical Composer Coder A few of the great composers that changed the course of music need help writing their most renowned works. Use the on-screen arrow-pad or the arrows on your keyboard to help the composers remember their tune in this memory based game. --- # Instructions * Choose your composer * Select a piece * Press the start button to begin * Complete all the levels to hear the masterpiece come together! This is the first game I've built using HTML/CSS/JS - Thanks so much for checking it out and please don't forget to upvote and drop a comment if you have any sort of feedback.
0
posted by PioMolina (0) 17 minutes ago
1
Rhythm game (musicSnake)
*important note: please open it in a new tab!* A rhythm game with music that changes as you play. Initially I wanted to make the song 100% autogenerated but I ended up choosing some bass lines and melodies that worked together and playing with that instead. All the music is generated from your browser using ToneJS. Because of this it might not work so well on mobile devices, sorry! It's a bit laggy on my phone. For the best experience I recommend you try this on a computer :) ![screenshot](https://storage.googleapis.com/replit/images/1563297900681_26c7ea78e585868d124d371ade7533f9.png)
0
posted by KaeruCT (0) 16 hours ago