The custom soundboard project was created out of a desire for a customizable soundboard that I -- or anyone -- could use anywhere in the world. As a hobby, I produce music using an AKAI MPC ONE, which is a physical standalone soundboard. As much as I love using it, I've noticed some limitations it has. One is the fact that to add audio files to the sampler and to export finished tracks, I need to download files to an SD card from a computer and transfer it to the board, and then export a song to a USB drive and upload it to my computer. This set-up is less than ideal, and is the core motiviation behind the creation of the soundboard project.
Once logged-in, the user is taken to a screen with a default preset. The user can then use the drop-down menu to select one of their presets, hit the submit button, and the page immediately shows the selected preset and allows the user to play audio from the pads.
The site features a custom preset uploader where users can upload audio files to be added to a preset, and name the preset. Once the preset is created, they can edit them, delete them, and the preset gets added to the drop-down menu on the main screen so the user is able to select it.
The site allows users to sign-up with an email, create a password, and add a profile picture. This is important because each user has the ability to create their own custom presets, and each preset is attached to a user, so only the user who creates a preset has access to it.
Users can also view and edit their profile information, like changing their password or profile picture.
I used Ruby on Rails 7, SQLite3, and Model-View-Controller design principles to develop this application. Initially, I had implemented much of the functionality using JavaScript, but I decided to instead use Turbo to develop as much of the app using Ruby on Rails as possible. I installed the Devise Gem for the sign-up functionality, the LetterOpenerWeb Gem to access verification emails locally, and various other gems to assist with Active Storage. I also opted to use custom CSS instead of Bootstrap because I wanted more flexibility when it came to the design of the site. Here are some important code snippets with a brief explanation on what they do:
This is the logic behind how the pads of each preset gets displayed. For each audio file in a preset, a button is displayed, and audio from the path generated by Active Storage is assigned. What this snippet does not show is the assignment of event listeners attached to the ".play-buttons" class, which is one of the few JavaScript components I decided to implement for functionality.
<% selected_preset.audio_files.each do |audio_file| %>
<button class="play-button pad-member" data-src="<%= rails_blob_path(audio_file) %>" ></button>
<audio class="audio-player">
<source src="<%= rails_blob_path(audio_file) %> type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<% end %>This is the main index page of the application, consisting of partials and a turbo-frame that encompasses the partial that makes up the preset pads. I used partials to segment the logic of the application, and because it is best practice for a Ruby on Rails application.
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;800&display=swap" rel="stylesheet">
</head>
<body>
<%= render 'home/navbar' %>
<%= render 'presets/submit_form' %>
<div id="rubyPresetContainer">
</div>
<turbo-frame id="custom-partial-frame">
<%= render 'presets/custom', locals: {selected_preset: @selected_preset} %>
</turbo-frame>
<%= render 'home/footer' %>
</body>Once the form in the index that contains the titles of each preset gets submitted, the associated controller action finds the preset table associated with the selected filename, and then passes it to the partial located in the turbo-frame defined in the index.
def submit_form
@selected_preset = nil
current_file = params[:selected_preset]
active_pre = Preset.find_by(filename: current_file)
@selected_preset = active_pre
if active_pre
render turbo_stream: turbo_stream.update(
'custom-partial-frame', partial: 'presets/custom', locals: { selected_preset: @selected_preset }
)
end
endThere is a lot more code involved in the project, but these were some of the main features I wanted to highlight.
Below is a backlog of features, in no particular order, that I intend to implement and deploy in the near future:
Currently, users can create and use their own presets. The next step in development is for me to create custom presets that every user starts with, so after a new user signs up, they can start using the site right away.
Devise handles a lot of the security behind sign-ups, but I want to make sure all form submissions and user information is protected. I have done some testing, but before I deploy the app, I would like to do more testing and ask others to test my application in search of vulnerablities.
Now that the app is functional, I would like to style it to look modern and professional.
What's a sound-board without the ability to record songs? I would like to implement a way for users to record songs using multiple tracks, with a metronome and timing features, just like I do using the MPC ONE.
Once users can create songs, there should be a page where they can share them for all to hear.
In closing, I want to thank you for checking out my project, and invite you to check out other projects that I have been working on.