Music – Brandon's Stories

MusicShare v0.4 – New Look, New Features!

I am super excited to share the next major update to MusicShare today! With the core functionality of the app finished in v0.1-0.2, the next updates were focused more on the visual, presentation, and user interface of the app! In v0.3 I put a big focus on the home page of the app and how the user is presented with the main information that the app provides, replacing the old style rectangles with a custom-made, very nice looking overflow, scrolling page. I love this look and how nice it looks with the album art zoomed in and the title with the user’s profile picture at the top. Another part of this new look that I wanted to put a lot of emphasis on was animations. It now has really nice animations when the app opens, when a page appears, when you choose to listen to what your friends are listening to, etc. I really think it’s important to signify selections or options that the user selects with a nice looking animation.

I think this new homepage look gives a nice and elegant feel to the app. Here is a layout of what each version accomplished:

v0.1: Basic functionality – Getting the core purpose of the app working.
v0.2: Basic visuals – Making a basic homepage layout
v0.3: Visual overhaul – New homepage with animation work
v0.4: Profile overhaul – New profile look, features, and customization options

One thing I have always thought about most social media services is how bland the profiles look. I understand keeping consistency with branding and company imagery is a thing, but since when does that mean we have to throw out customization? While there are still more things to add and improve on, I am liking the look and feel of the profile page for right now, and am happy that it gives me room to build off of it. A big goal of mine is too really make the profile page special with a lot of customization. The profile page right now has options for profile picture, banner, profile color (accent your profile with a color for others to see), and something that I just finished: profile backgrounds!

This is just step 1 of profile customization, but I’m happy with how the feature is starting to turn out. It has a selection of animated banners that the user can choose to replace their banner with. The final form of this is going to be much grander and more robust, going well above just the banner, but the underlying code is complete and should be more about implementation going forward.

What’s next: Up until now I have seldom worked on this project, just here and there, maybe a few days a month at most. I plan to dedicate a lot more time to this, so development, and therefor development updates, should come more frequent and the app should start progressing much faster.

So, I am divided over a few choices to make. First, do I keep it Apple Music only. I think this is the first choice I have to make because all my future ideas rely on this. For example, I have also been debating adding a direct messaging feature, right now the message button opens a text message to that person. If I keep it Apple Music only I think this would be a good way to keep it, but if I make it work with other music services like Spotify, I would probably want to implement my own messaging system and not rely on text messaging. Next, accounts. Right now it has a rudimentary accounts and user system, if I am going to stick with Apple Music only, then I will incorporate Sign in with Apple as the only authentication method, as staying with Apple Music only will keep the app on Apple devices only. If I build functionality for other services, then I will probably put focus on a more robust custom user and accounts system, then incorporate the Sign in with Apple feature to work with the custom authentication system. I also have some really great ideas to further the customization and profile improvements, I’m super excited to make it, it’s going to be really great!

I’ll be sharing progress with a new post here and also on my Twitter and LinkedIn accounts. Excited to make some really cool things in this app! Thanks for anyone that’s reading and following along! 🙂

SpotifyGUI 2 – Touchscreen Controller for Spotify

SpotifyGUI 2

I am back with an update to SpotifyGUI! Since this thing has been working so well, it just sits on my desk and constantly updates with whatever I am playing, I have not had a need to update to much, other than to add more features! So… I ended up rewriting the entire app! The reason I did was because I felt like I was reaching the limitations what Python offers in visuals. Every new feature I thought about making for it I found myself thinking “Well, will Python be able to handle this?”

Python is a great language to do a lot of simple things really quickly, but consequently it makes implementing complex things that much harder, when compared to another language. I found that throughout development, especially towards the later stages of creating and designing the UI, I would think “Wow, it would be so much easier to do this in C.” or “This would be one line of JS…” This is what ultimately led me to rewriting the project. The language I chose was JavaScript, for many reasons, but mainly because of it’s ease of creating really nice looking UIs.

Don’t you worry though! Our best bud Python is still there under the hood! The new codebase consists of a Python back-end that handles the communication with the various APIs (Spotify, Lyrics, etc.), that then hands that information off to a JavaScript front-end that handles the task of making it pretty! And oh my is it better. I really liked the design that I had made with the Python-made GUI so I set out to just remake it with JS/CSS. Then, integrated it into the Linux distro for automatically running in a web app that is nice and neat to execute at startup, with it also being managed from the Python back-end.

Another big update is the display! I opted to go with this 10-inch OLED touchscreen that I feel better allows the elements the space they need! The upgrade from LCD w/ IPS panel to OLED makes the visually really pop out and gives an amazing vibrancy to the colors than the prior display! With the new space I definitely looking at ways to redesign the UI to make better use of the new real estate!

It’s a whole lot nicer. It’s snappier, it’s quicker. It’s responsiv-…er. It always for all of the multi-threaded capabilities of JavaScript with the reliability of Python. This includes and magnitude less amount of error-handling, and no longer being reliant on GTK.

While rewriting I also completed most of the goals I had set out to on the last post and more!

I reversed engineered the Spotify Canvaz API. It now downloads the short mini clips that are usually only available within the Spotify mobile apps and replaces the album art with the video on loop.
Refactored the background color picker. Now it picks a color that makes a lot more sense, including a gradient but only if it determines if it would be better than a single color. This is in contrast to the previous algorithm which would pick an average of the 5 more common occurring colors in the album art.

And more! Here are some new things implemented as well!

Transitions! Oh the wonders of CSS and JS. The app now has full and proper transitions for all elements. So when changing songs the text, controls, album art, and other elements fade out and the new ones fade in. The background fades into the new color. Lyrics fade between lines. It all looks really nice and modern.
Progress bar at the bottom keeps track of where in the song you are currently listening (with the progress color also having another determined color that contrasts with the background color.
Background gradient but only when it looks the best! The color picking algorithm is a whole lot better and it will determine if the album art has enough differing colors to make a good looking gradient, or if it should just stick to a single color background.

Wow. Lots of changes! Still more to go! I am happy were it is right now, but I will be updating it here and there because I have a new set of goals and ideas! So here goes:

Proper use of space. Empty space should be filled and elements should find their home in more general areas instead of at the edges.
Image modification. Admittedly, the image modification of the album art is easier in Python than it is in JS, which is why right now there are no rounding of corners and vibrancy changes to match the background like there is in the Python version before.
Sidebar menu to pick music, playlists, artists, etc. from recently played or Spotify main page.

Stay tuned! Lots of great things to come!

January 11, 2025 by brandon Devices Graphics JavaScript Music Programming Python Raspberry Pi Raspberry Pi 4 UI/UX 0

MusicShare – Stay Connected With Your Friends Through Music

Why can’t music be a social experience? This is the question I asked myself before I created this app, but now I don’t ask myself that anymore because I made it one! Back in my day we all used to gather around the campfire and listen to our tunes on the old radio… together! (I’m joking, I’m a Gen X).

You get the point. Now, I listen to my Taylor Swift alone with my headphones on, not getting to experience the great music with anybody else. No longer! MusicShare is an iOS app that fills in what’s missing in this age of ‘solo-listening’ (I just came up with that)!

MusicShare is an easy way to quickly see what your friends and family are currently listening! The app provides a streamlined interface that shows what you are listening too as well as a list of your friends currently playing, updates in the background as music changes, with a built in user profile system that establishes an account on a remote server including user-selectable profile pictures.

In addition to these features, MusicShare also allows you to interact with your friends and what they are currently listening too. Simply tapping on your friends name reveals a menu that lets you either “Play Song” which plays the song for yourself, or “Listen Along” which opens a listening session between you and your friend, allowing you to follow allow with what they’re listening to so you can rock out together! The listen along with keep you in sync with your friends playback, even if they scrub, seek, skip, or switch to a whole new thing altogether! When this session is opened, MusicShare finds a new home in your Dynamic Island (on supported devices) to indicate that it is maintaining its connection with your friend. In a future version this ability will be expanded on, allow for bidirectional control after permission is requested and your friend accepts, as well as controls to request/accept/deny that permission directly from the Dynamic Island. Take that, ‘solo-listeners’!

The app is written in Swift and utilizes SwiftUI for the design, graphics, animations, etc, MediaPlayer for playback capture, MusicKit for lookup of media metadata like album art, and PhotosUI for photo selection complete with permission-less upload. The backend server is written in Python and MySQL, storing the user accounts as well as currently playing information in the database, accessible through SSL requests.

I had a lot of fun creating this app and can’t wait to update it even more to include many more features!

Stay tuned for updates!

MusicShare: Say Goodbye to Solo-Listening™

August 7, 2024 by brandon Graphics Music MySQL Operating System Programming Python Swift UI/UX Uncategorized iOS iPhone 0