the making of a visually stunning xylophone app

May 27, 2024 ino .

Click to download project open source on my Github repo :)

This is not just any xylophone…

This is a fairly simple code, but the challenge is to figure out how to maintain the beautiful design of the background image I have already designed to my liking and turn those music keys into buttons so they can be triggered by clicking. There are many ways to do this, the most efficient way IMO is to layer the buttons directly on top of the image.

Resizing each button to fit the keys on the image, and customizing with color picker for each button with base opacity aka alpha value set to 0.7 so that it’s a little see-through, this way it preserves the look of the background image of the key design, and the buttons look like they belong there instead of a block of solid rectangle covering the beautiful key design that comes with the background image. Then animating the buttons so that they dim when the user clicks the button, the cherry on the cake in the end.

Here is the process:

Here are my assets design:

Clean code:

import UIKit
import AVFoundation

class ViewController: UIViewController {
    
    var player: AVAudioPlayer!
    func playSound(soundName: String) {
        let url = Bundle.main.url(forResource: soundName, withExtension: "wav")
        player = try! AVAudioPlayer(contentsOf: url!)
        player.play()
    }
    
    @IBAction func keyPressed(_ sender: UIButton) {
        
        playSound(soundName: sender.currentTitle!)
        sender.alpha = 0.5
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {sender.alpha = 0.7}
    }
    
}

Here is the code with my breakdown notes:

// code breakdown

import UIKit
import AVFoundation // import AVFoundation library for audio and video

class ViewController: UIViewController { // create a class named ViewController that inherits from UIViewController
    
    var player: AVAudioPlayer! // create a variable player of type AVAudioPlayer

    override func viewDidLoad() {  // override the viewDidLoad method
        super.viewDidLoad() // call the super class method
    } // end of the viewDidLoad method

    @IBAction func keyPressed(_ sender: UIButton) { // create an action function named keyPressed that takes a UIButton as a parameter
        
        playSound(soundName: sender.currentTitle!) // call the playSound function and pass the current title of the button as a parameter
        
        // flashing effect for the button so that it looks like it's being pressed

        sender.alpha = 0.5 // set the alpha value of the button to 0.5
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {sender.alpha = 0.7} 
        // set the alpha value of the button to 0.7 after 0.2 seconds, using DispatchQueue.main.asyncAfter method
        //this is done to create a flashing effect  
    } // end of the keyPressed function
    
    func playSound(soundName: String) { // create a function named playSound that takes a string as a parameter
        let url = Bundle.main.url(forResource: soundName, withExtension: "wav") // create a constant url that stores the url of the sound file
        player = try! AVAudioPlayer(contentsOf: url!) // create a player object and initialize it with the url
        player.play() // play the sound
                
    } // end of the playSound function
} // end of the ViewController class