Welcome to Moodloop, a web-based stem mixing interface that allows you to create quick tracks by combining different stems and sounds. With Moodloop, you can easily drag or click on arrows to mix up to four different stems, including rhythm, bass, percussion, and synth. Whether you're a music enthusiast, producer, or simply looking to explore your creativity, Moodloop is here to help you bring your ideas to life.
This submission represents Milestone Project 2 for the Code Institute's Diploma in Web Application Development program. My website comprises one audio app and utilizes the HTML, CSS and Javascript technologies I have acquired throughout the course.
Find the project repository here:
Intuitive Understanding and Artist Connection.
Objective: Enable newcomers to immediately grasp the primary function of the Moodloop platform while simultaneously gaining insight into the artist or creators behind the stems. Highlight a brief, clear description of Moodloop's stem mixing capabilities on the landing page. Feature an "About the Artist" section or profile prominently, which can include their bio, vision, and any featured tracks they've created using Moodloop.
Seamless Navigation and Content Discovery.
Objective: Ensure that first-time users can easily explore and find relevant features, stems, or information without any hindrances. Maintain a clean, intuitive layout with a well-defined menu or navigation interface. Utilize clear icons, labels, and tooltips over essential features to guide users in their exploration.
Joyful Exploration and Music Creation.
Inspire newcomers to dive into the music creation process and ensure they derive joy and satisfaction from their initial interactions, even if they lack prior music-making experience.
Use playful visual cues when users make successful mix combinations, reinforcing a sense of achievement. Showcase Easy Wins: Feature an "Instant Creation" option where users can generate a basic track with a single click or drag-and-drop, giving them immediate gratification. Offer preset stem combinations tailored for beginners, allowing them to experiment and create pleasant-sounding tracks without the intimidation of starting from scratch.
Seamless Continuation and Fresh Starts.
Facilitate returning users in picking up from their last session or jumping straight into a new creation effortlessly. Using Current Features: Upon logging in or accessing the platform, present users with the option to "Resume Last Project" or "Start a New Loop", streamlining their decision-making process. Display a brief overview or snapshot of their last session (e.g., "Last used stems: Rhythm, Bass, Percussion"). Mastery Through Enhanced Playability.
Allow regular users to deepen their experience by effortlessly utilizing and mastering the in-built features like buffer options, including mute and solo functionalities. Using Current Features: Highlight advanced tutorials or tips that delve into maximizing the use of buffer options for on-the-fly playability, specifically emphasizing the mute and solo functions. Showcase quick-access buttons or shortcuts for these buffer functionalities, ensuring they're easily accessible for users who want to experiment in real time.
Deepened Engagement Through Resource Discovery.
Offer returning users more avenues to explore, learn, and immerse themselves in the Moodloop community and related content. Using Current Features: Present a curated "Resources" or "Explore More" section that contains valuable links, tutorials, community forums, and other related material to deepen their Moodloop experience. Prominently display notifications or updates on any new features, stem additions, or community events, ensuring regular users are always in the loop.
Monthly Sample Refresh.
Reward loyal and active subscribers with fresh musical content consistently. Using Current Features: Notify subscribers through the user dashboard or a dedicated section about the "Sample of the Month", ensuring they are always aware of the newest additions. Highlight these new samples with labels or badges like "New" or "Exclusive" to make them stand out when browsing the library. For Frequent Users: Exploration and Mastery.
Encourage habitual users to continuously discover and integrate newly added sounds and features into their creations. Using Current Features: Feature a "What's New" section on their homepage or dashboard that showcases the latest sounds, stems, and features. Offer interactive tooltips or mini-tutorials that guide frequent users in using new features, ensuring they can seamlessly incorporate them into their workflow. For Frequent Users: Insider Knowledge Through Newsletter Subscription.
Keep the most dedicated members of the Moodloop community informed and privileged with exclusive content, updates, and opportunities. Using Current Features: Prominently display an option to "Join the Insider Newsletter" for those who haven’t subscribed yet, emphasizing the exclusivity and benefits. Send out newsletters with content that is not just news but also exclusive sample previews, advanced tutorials, or special subscriber-only events, reinforcing the value of their subscription.
- Primary Color - Azure Radiance: Hex: #20242c Usage: Ideal for primary buttons, headers, and active navigation items. Azure Radiance exudes a sense of sophistication and depth. 2. Secondary Color - Moody Blue: Hex: #6263d7 Usage: Perfect for secondary UI elements, hover states, and subtle highlights. Moody Blue adds vibrancy and a touch of creativity.
- Gradient Start - Light Sky Blue: Hex: #87CEFA Usage: This lighter shade of blue can serve as the starting point for background gradients or soft UI highlights, initiating the sense of movement.
- Gradient Mid - Cornflower Blue: Hex: #6495ED Usage: Serves as the mid-point in our gradient, transitioning smoothly from Light Sky Blue to Azure Radiance, reinforcing the feeling of flow and transition.
- Text Color - Shuttle Gray: Hex: #5e6267 Usage: Used primarily for text, ensuring readability against the gradient blue background.
Font Family: Roboto Mono
Description: Roboto Mono is a monospaced variant of the Roboto typeface. With its evenly spaced characters and clear, modern design, Roboto Mono provides an aesthetic of precision and technicality. This makes it an ideal choice for Moodloop, where a blend of creativity and structure is essential. The typeface ensures that text across the platform is easily readable while still retaining a contemporary and sleek appearance. Whether used in headers or body text, Roboto Mono brings consistency and a touch of modernity to the user interface.
Animated CSS Background. Leveraging the capabilities of CSS animations, the interface boasts a dynamic background that evolves over time. This not only infuses the platform with an element of motion but also ensures that the users' attention remains engaged. Such animated backgrounds bring visual interest and a touch of liveliness, elevating the user experience of any website or web application. Beyond static colors, the interface employs a shifting background gradient animated through CSS. The gradual transition of colors provides depth and a sense of fluidity. The ever-changing hues instill a mood of continuous exploration and wonder, aligning perfectly with the dynamic nature of the Moodloop platform. This approach goes beyond mere aesthetics, as it subtly guides users through the platform, ensuring their experience remains fresh and immersive.
-
- Home Page Wireframe - View
-
Responsive on all device sizes
-
Interactive elements Ensuring Adaptability Across Devices:
In today's digital landscape, users access web platforms through a plethora of devices, each with varying screen sizes and resolutions. Ensuring a consistent and optimized experience across all these devices is paramount. This is where media queries come into play. How Does Moodloop Use Media Queries? Breakpoints: We've defined specific breakpoints for common device sizes (e.g., smartphones, tablets, laptops, and large desktop screens). When the viewport size meets the criteria of a breakpoint, a particular set of CSS rules is applied, ensuring the content looks and functions optimally for that device.
Fluid Grids: By using relative units like percentages rather than fixed units like pixels, the layout elements of Moodloop resize in proportion to the screen size. Media queries then fine-tune this fluidity, adjusting the design for specific devices or orientations.
Flexible Images: Images on the Moodloop platform are set to resize within the containing elements. Combined with media queries, this ensures images look crisp and clear without distorting or breaking the layout.
Adaptive UI Elements: Buttons, navigation menus, and other UI elements adjust based on the device size. For example, the drop-zone disappears on smaller devices to give place to an arrow-click button on the audio files. Enhanced User Experience: By adjusting typography size, margins, and padding based on the device, Moodloop ensures that the text remains readable, and spacing is consistent, providing a comfortable viewing experience regardless of the device.
The Outcome: By leveraging media queries, Moodloop offers a seamless user experience across the vast array of devices available on the market. Whether a user accesses the platform from a compact smartphone, a sprawling desktop monitor, or anything in between, they are met with a design that is intuitive, visually appealing, and tailored to their device's unique characteristics.
This section paints a clear picture of how media queries are employed within the Moodloop platform to ensure a responsive and consistent user experience.
- Bootstrap 4.4.1:
- Bootstrap was used to assist with the responsiveness and styling of some parts of the website such as footer and navigation bar.
- Google Fonts:
- Google fonts were used to import the 'roboto' font into the style.css file which is used on all pages throughout the project.
- Font Awesome:
- Font Awesome was utilized across the entire website to incorporate icons, enhancing both the visual appeal and user experience, particularly in the footer and Discography section.
- jQuery: it was used to facilitate DOM manipulation, event handling, AJAX operations, and animations, and ensure cross-browser compatibility.
- Git
- Git was used for version control by utilizing the Gitpod terminal to commit to Git and Push to GitHub.
- GitHub:
- GitHub is used to store the code of the project after it is pushed from Git.
- Photoshop:
- Photoshop was used to create and edit the background images, resizing and editing photos for the website.
- Balsamiq:
- Balsamiq was used to create the wireframes during the design process.
- vanilla js
- Vanilla JS was utilized for audio context management, drag-and-drop functionality, audio playback controls, and manipulating Web Audio API functionalities without relying on jQuery or any other libraries.
- vite
- Vite was used in this project as a build tool to streamline development with rapid hot module replacement, efficiently bundle assets for production, and integrate seamlessly with modern JavaScript frameworks.
- Web Audio API
- The Web Audio API was used to create, control, and manipulate audio sources, enabling real-time audio processing and playback, particularly for features like loading audio files, looping them synchronously, adjusting their volumes, muting/unmuting, and applying equalizer settings.
- ChatGPT
- GPT was leveraged for advanced problem resolution.
- VScode
- The application was developed and executed using Visual Studio Code as the preferred Integrated Development Environment (IDE).
- Netlify
- Netlify was utilized for seamless deployment and to host the live version of the page.
For more detailed testing information on Moodloop, please refer to the testing documentation.
The project was deployed to GitHub Pages using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page), locate the "Settings" Button on the menu.
- Alternatively Click Here for a GIF demonstrating the process starting from Step 2.
- Scroll down the Settings page until you locate the "GitHub Pages" Section.
- Under "Source", click the dropdown called "None" and select "Master Branch".
- The page will automatically refresh.
- Scroll back down through the page to locate the now published site link in the "GitHub Pages" section.
By forking the GitHub Repository we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original repository by using the following steps...
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- You should now have a copy of the original repository in your GitHub account.
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
- Press Enter. Your local clone will be created.
$ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
> Cloning into `CI-Clone`...
> remote: Counting objects: 10, done.
> remote: Compressing objects: 100% (8/8), done.
> remove: Total 10 (delta 1), reused 10 (delta 1)
> Unpacking objects: 100% (10/10), done.
Click Here to retrieve pictures for some of the buttons and more detailed explanations of the above process.
All Audio stems were created by Moody Waters at SM Studios.
Animated background using CSS Coding is taken from: Code with programmer.
Gratitude to fellow Code Institute students and alumni for their assistance.
I'd like to extend my sincere gratitude to Manu Perez and Pasquale for their invaluable support and mentorship at Bristol College.
Many thanks to the tutors and staff at the Code Institute for their unwavering support.
A special thanks to the Code Institute London Community for their continuous encouragement and technical insights.
Much gratitude to my family for their patience and understanding with me.
Gabriel Pereira, 2023.
- All content was written by the developer.