How to Make Karaoke App With Minimal Coding Experience

How to Make Karaoke App With Minimal Coding Experience – Part 1

0
Shares
How to Make Karaoke App With Minimal Coding Experience – Part 1
4.3 (86.67%) 3 votes

You know Karaoke, right? The audio box on which only tune is being played and people sing the vocals along. They’re at bars and clubs where people usually come to relax, have few drinks, and enjoy with their friends at the end of the day. But the world is changed. Smartphones have arrived and with it, karaoke app have been brought in people’s phones.

In today’s iOS app tutorial, you’ll learn how to make karaoke app with AVFoundation, even if you have minimum coding experience.

Let’s Get Started

Create a new project as Single View Application under file menu.

screen-shot-2016-12-08-at-12-48-41-pm

import AVFoundation in ViewController.swift

import AVFoundation

Now create an object of AVAudioPlayer and set the delegate to AVAudioPlayerDelegate

class ViewController: UIViewController, AVAudioPlayerDelegate {

var audioPlayer:AVAudioPlayer!

}

Set IBOutlet for next, previous, play, stop button and slider.

@IBOutlet weak var btnPlay: UIButton!

    @IBOutlet weak var btnPrevious: UIButton!

    @IBOutlet weak var btnStop: UIButton!

    @IBOutlet weak var btnNext: UIButton!

    @IBOutlet weak var slider: UISlider!

Next, Create an track array of local audio mp3 audio files and timer object for call a method periodically for update slider.

var arrTracks = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"]

    var timer = NSTimer()

Now initialize AVAudioPlayer and call it from viewDidLoad() method

override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view, typically from a nib.

        self.initilizePlayer()

    }

    

    //MARK: Audio player initilizer

    func initilizePlayer() {

        let strTrack = arrTracks[currentTrack] as String

        let audioFilePath = NSBundle.mainBundle().pathForResource(strTrack, ofType: "mp3")

        

        if audioFilePath != nil {

            

            let audioFileUrl = NSURL.fileURLWithPath(audioFilePath!)

            do {

                audioPlayer = try AVAudioPlayer(contentsOfURL: audioFileUrl, fileTypeHint: nil)

            } catch {

                print("????")

            }

            audioPlayer.delegate = self

            audioPlayer.prepareToPlay()

            

        } else {

            print("audio file is not found")

        }

    }

To play audio set @IBAction func actionPlaySound(sender: UIButton)

//MARK: Start and Pause button action

    @IBAction func actionPlaySound(sender: UIButton) {

        btnStop.hidden = false

        

        

        if audioPlayer.playing == false {

            //Start Playing audio

            audioPlayer.play()

            btnPlay.setTitle("Pause", forState: .Normal)

            

            self.startTimer()

        } else {

            //Pause Playing audio

            audioPlayer.pause()

            btnPlay.setTitle("Play", forState: .Normal)

            self.stopTimer()

        }

    }

Next audio play should be on click of Next button @IBAction func actionNextTrack(sender: UIButton)

//MARK: Action for play next track

    @IBAction func actionNextTrack(sender: UIButton) {

        self.playNextTrack()

    }

    

    

    func playNextTrack() {

        if audioPlayer?.playing == true {

            audioPlayer?.stop()

        }

        

        currentTrack += 1

        if currentTrack >= arrTracks.count {

            currentTrack = 0

        }

        self.initilizePlayer()

        audioPlayer?.play()

    }

For previous audio play @IBAction func actionPreviousTrack(sender: UIButton)

//MARK: Action for play previous track

    @IBAction func actionPreviousTrack(sender: UIButton) {

        if audioPlayer?.playing == true {

            audioPlayer?.stop()

        }

        currentTrack -= 1

        if currentTrack < 0 {

            currentTrack = arrTracks.count - 1

        }

        

        self.initilizePlayer()

        audioPlayer?.play()

    }

Below AVAudioPlayerDelegate will indicate stopping of audio file playing. After that we can do next action.

//Mark: AVAudioPlayer Delegate

    func audioPlayerDidFinishPlaying(player: AVAudioPlayer, successfully flag: Bool){

        if flag == true {

            //can perform next action

            self.playNextTrack()

        }

    }

To stop audio player @IBAction func actionStop(sender: UIButton)

//MARK: Action for play previous track

    @IBAction func actionStop(sender: UIButton) {

        if audioPlayer?.playing == true {

            audioPlayer?.stop()

            audioPlayer?.currentTime = 0

            self.stopTimer()

        }

        btnPlay.setTitle("Play", forState: .Normal)

        btnStop.hidden = false

        slider.value = 0.0

    }

Set the timer for update slider and invalid time by following

//MARK: Timer stop and start for update slider for time

    func startTimer() {

        timer = NSTimer.scheduledTimerWithTimeInterval(1.0, target: self, selector: #selector(ViewController.updateSlider), userInfo: nil, repeats: true)

    }

    

    func stopTimer() {

        if timer.valid == true {

            timer.invalidate()

        }

    }

When timer fire then following method called for update slider.

//MARK: Update slider

    func updateSlider() {

        print(audioPlayer.currentTime, audioPlayer.duration)

        slider.maximumValue = Float(audioPlayer.duration)

        slider.value = Float(audioPlayer.currentTime)

        //slider.value = normalizedTime

    }

Now when you run the project, the output will be like this:

simulator-screen-shot-dec-8-2016-4-58-28-pm

In this part, we’ve covered how to add karaoke songs into the demo and play them. In the next part, we’ll see how to record vocals along with the audio. However, there is many things that could be added into a karaoke app. And if you’ve such unique idea in mind that requires assistance of an technical expert, hire iPhone app development company, share your app idea, come up with a plan, and start working on it.

Grab a free copy of karoake tutorial part 1 demo from Github.

 
0
Shares
 

Want to Develop Music App Like Karaoke? Let's Build It Together!

Get your free consultation now