SwiftUI Jukebox with Audio Visualizer
NMIX 6030 Final Project — Fall 2022
Project Overview
For my final project in NMIX 6030: Native App Development, I chose to use the Jukebox assignment (which had been completed a few weeks prior) and implement an audio visualization feature. I chose this feature because while we had learned about animations in class, we did not learn about this specific one. I also knew that it would be a good way to stretch myself, which is the whole point of this project! I chose to use songs from the Mamma Mia soundtrack because they are upbeat and would respond well to an audio visualizer. Mamma Mia is also one of my favorite movies!
To begin, I copied all of the files from the previous Jukebox assignment and added them to a new folder on my hard drive. I made some basic changes to the layout, including color scheme, implementing a vertical scrollview instead of a horizontal one, and replacing the songs, corresponding images, and MP4 files with the ones I wanted to use for this project. I also downloaded a custom font from Google Fonts (similar to the original Mamma Mia font) and added it to the Info.plist file by searching for “Fonts provided by application” under the Information Property List. From there, I added both font files into the value field.
Instead of one view with all the song titles, images and pause & play buttons, I separated the content into two views. The first view, named ContentView, served as the homepage where the user could see all three songs. Once a song is clicked, the app navigates to the second view, named AnswerView. This is where the user has the option to play the song and see the visualizer move in response. To build the visualizer, I used a predefined looping animation that repeats over and over again. I started by defining the state variable, which would be used to toggle the height of the rectangles, and then created a function that would alter the rectangles according to their minimum and maximum height. Lastly, I created a view with five vertical bars that would serve as the visualizer itself.
Overall, my goal for this project was to create an interactive Jukebox that presented all the necessary information without it being too crowded or overwhelming for the user. At first, I thought about putting the audio visualizer underneath each song on the homepage, but I ultimately decided to put the visualizer in a separate view that the user would go to only if they wanted to hear that song. I also wanted to experiment with the layout to challenge myself and let the user explore between views.
The Challenges
Throughout this project, I ran into my fair share of challenges. One was differentiating which actions I wanted the images to perform once they were clicked. Originally, I wanted the images to be shown in both ContentView and AnswerView, and have them complete two different actions depending on which view they were clicked from. In ContentView, I wanted the user to navigate to AnswerView once the image was clicked, and in AnswerView, I wanted the song to start playing once the image was clicked. Another challenge was using variables to play a different song depending on which image was clicked in ContentView. The final challenge that I encountered was stopping the animation once the “pause” button was clicked and resuming it once the “play” button was clicked.
The Solutions
To overcome the first challenge, differentiating which actions the images would perform once they were clicked, I chose to use two separate elements to perform the two functions. I kept the images in ContentView and have them navigate to AnswerView once they were clicked. Instead of the same images being listed in AnswerView, I replaced them with a button that read “Click to Play” to make it more intuitive for the user.
To overcome the second challenge, using variables to play a different song depending on which image was clicked, I created a variable in AnswerView named soundFile with an array of all three songs. Then, I passed that variable in ContentView using another variable named numb. This variable was created and specified as being an integer in storage (also known as SongSetup) and depending on which number numb was assigned to in SongSetup, that is the song that would play once the image was clicked.
To overcome the third and final challenge, stopping the animation once the pause button was clicked, I added the drawingHeight.toggle() function to the actions of both the pause and play buttons. This way, when the user clicks the “Click to Play” button, the toggle is switched on, and when the user clicks the pause button, the toggle is switched off. Then, when the user clicks the play button, the toggle is switched on again.
The Results
The success of this app will be measured with overall ease of use. I think the best way to measure this would be the number of times that each song was played, because it would give me insight into how easy it was for the user to navigate between views and figure out how to play the song. For future iterations, I suggest adding more songs and giving the user more opportunities to interact with it. This could include adding an “Add to Playlist” feature or “Favorites” feature with the heart animation.
Through working on this project, I learned to keep trying new things until something works and not be afraid to ask for help. As I mentioned earlier, I had my fair share of challenges with this project, and I spent many hours trying things that may or may not have worked. I stretched myself by using multiple views to accomplish my goal of creating an interactive Jukebox with multiple songs, implementing a custom font, building out an audio visualization animation that we had not learned before, and paying attention to minor details like the animation stopping on cue. I also paid close attention to the design of the Jukebox to mimic the vibrant nature of Mamma Mia. Overall, by using my resources both internally and externally, I was able to create something that I am really proud of!
