NMIX 6030E Case Study: Jukebox Assignment

Project Date: Fall 2025

Project Overview

This fall I completed a fun and interactive Jukebox app assignment where I designed a music player specific to my tastes that lets users play, pause, and toggle through a selection of my pre-selected 4 songs! Each song holds the artists image and title, and I added an extra rotation animation to the artwork to make it feel more dynamic when the song is playing. The goal was to build a music player that could play 30-second samples of songs, complete with specific album artwork and functional controls that you would expect to see from a music source like a Jukebox.

Challenges & Solutions

The main challenge of this project was balancing providing an interactive interface with the obvious goal of having music play! Integrating SwiftUI’s capabilities with the audio player required careful design to ensure smooth functionality and impressive aesthetics.

Key Barriers I Faced:

• Setting up AVAudioPlayer: Making sure the sound files loaded correctly and played without issues.
• Managing State: Ensuring that my design would update in sync with the current playback status (whether the current song was playing or paused).
• Adding Animations: I wanted to create a fun experience for users, so adding a rotating animation to the album artwork when a song was playing was an important design feature for me! I wanted to make sure that each individual song stood out when it started playing for a potential user.

Here’s how I approached each challenge:

1. Audio Playback with AVAudioPlayer
   I set up a SongSetup structure to manage each song's information and playback. For each song, I used AVAudioPlayer to handle the audio. I also implemented the play/pause functionality with buttons that allow users to control playback as they please. The playSound() function loads the audio file, and the pauseMusic() and resumeMusic() functions are there to manage the playback state of my app.
2. Adding Animations
   I used SwiftUI’s withAnimation() method to animate the album artwork. This was a simple yet effective way to enhance the user experience. I also applied smooth transitions between play and pause states with the goal of helping my app feel more polished.
3. User Interface Design
   The Jukebox’s interface consists of several horizontal stacks of buttons, each representing a different song. I used a VStack and HStack layout to arrange the songs in a visually appealing way. I also applied rounded corner styling and drop shadows to make the artist images look more polished, and used a gradient background to add some depth and color to the app.

The Final Result

My final Jukebox app functions seamlessly and allows users to click on one of the 4 specific image album covers to start playing a 30 second preview of that song. The album image rotates when the song plays, and users can pause or resume playback using the buttons. The app feels responsive, visually engaging, and works flawlessly on both iPhone and iPad previews!

Get Simone Brown’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Throughout this project, I deepened my understanding of SwiftUI and AVFoundation, and learned how to combine them to create a smooth, interactive user experience. It was an exciting project to work on, and I’m really proud of the final design and product.