Browser Studio - A mini song creator in your browser!

The Gallery
1

Project URL: https://browser-studio.glitch.me/
Create mini songs inside of your browser!

  1. Choose a sound file (optional - it defaults to a piano key)
  2. Add notes - Create your masterpiece!
  3. Choose your tempo and play it
  4. You made a thing!

Here’s mine: Browser Studio (500ms)

3 Likes
2

This looks cool, @ari_c!

2 Likes
3

Here’s another one I like too: Browser Studio (250ms)

1 Like
4

I tried the sound upload feature and it actually doesn’t work.

image
image807×111 5.84 KB

I tried using this audio: twilio’s classic mp3

(because never gonna give you up is the ultimate song of web)

2 Likes
5

Made some CSS to make it beautiful!

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap')

* {
     font-family: Inter, sans-serif;
     box-sizing: border-box;
}
 body {
     padding: 5%;
     font-family: Inter, sans-serif!important;
}
 h1 {
     margin-bottom: 10px!important;
     font-size: 50px;
}
 #arrangement {
     border-radius: 6px;
     width: 100%!important;
     box-sizing: content-box;
     display: flex;
     gap: 10px;
     flex-wrap: wrap;
     margin-left: 0px;
     margin-right: 0px;
}
 note {
     padding: 7px;
     margin: 0px;
     border-radius: 4px;
     background-color: #efefef;
     color: black;
}
 #notes {
     margin-top: 8px;
}
 button {
     padding: 7px;
     margin: 0px;
     border-radius: 4px;
     background-color: #8c32ed;
     color: white;
     transition: all .3s;
     cursor: pointer;
     border: none;
}
 button:hover {
     opacity: 0.6;
}
 hr {
     border-top: 1px solid!important;
     margin-top: 11px;
     margin-bottom: 11px;
     border: none;
}

:sparkles: Tip: You can declare CSS like this: <style>YOUR_CSS_GOES_HERE</style> (add it in the head)

(Edit: add font import)

2 Likes
6

Thank you! That actually looks pretty cool

1 Like
7

It’s a pleasure! :smile:

1 Like
8

Hello everyone! I added 2 new buttons:
image

  1. Neural Network - Generate an arrangement using LSTM and brain.js
  2. Share Arrangement - Generate a link for sharing your arrangement with others!
    Also here is a cool arrangement that was made using the Neural Network function: Browser Studio
2 Likes
9

Cool update!

2 Likes
10

What about sharing the link with navigator.share instead of appending it to the DOM?

1 Like
11

Added! Thank you :slight_smile:
I also added a bass instrument, and I’m planning on adding more. Here’s a cool example: Browser Studio

2 Likes
12

Awesome!!! Here’s a cool one too: Browser Studio, Browser Studio
The AI feature is super awesome…

Ideas

  • Made a gallery of cool music! (play music on hover)
  • Organize the add-note section better
  • Add dark mode
  • The “Sound” feature doesn’t have much potential… :frowning:
  • Make different colors for different button meanings.
  • Re-add the border to the note zone! :slight_smile:
2 Likes
14

Do you have discord?

2 Likes
16

was actually working on something like this which would take vsts/midi, this is very cool

2 Likes
17
  • Added a new Sakura sound
  • Added a new Bell sound
  • Removed the guitar sound (it was off-pitch)
  • Updated the AI algorithm.
    Check this cool example out: Browser Studio

(Also testing a new “loop” feature! It is available in the link above)

3 Likes
18

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.