Developing with AudioKit - Basics


This tutorial shows how to use the AudioKit framework in an iOS app. The target reader is an experienced iOS developer with little or no experience with the AudioKit.

Only basic AudioKit functionality is utilized. In fact only the features demostrated in the AudioKit Basics playground are used. It’s probably a good idea to play with that playground before using this tutorial.

The iOS specifics in the tutorial are covered but without detail. The embedded figures, source code and GitHub project should provided enough detail. The tutorial is focused on the Audikit integration so some iOS specifics (such as AudoLayout) are ignored.

1 Prerequisites

Familiarity with iOS app development using Xcode, Swift and CocoaPods is assumed.

This tutorial exercises many of the features demonstrated in the Basics playground. Therefore, it is a good idea to run through that playground first. The playground can be downloaded as a separate zip file or you can clone the GitHub repository. Instructions can be found on the AudioKit Downloads page.

2 Create the project

2.1 Create a new Xcode project

Create a new iOS Xcode project (New / Project…) using the Single View App template and provide suitable options.

2.2 Project settings

Deployment Info

The AudioKit iOS project (AudioKit / AudioKit / iOS /) is built using a deployment target of 9.0 so we’ll do the same.

2.3 Run the project

Build the project and run it in the Simulator (iPhone XR) to ensure that there are no errors so far. An blank view should be visible in the running app, see figure 2.3. The state of the project at this point is reflected as release v1.0 on GitHub.

Figure 2.3 - New Project

3 Add the AudioKit framework to the project

AudioKit can be added to a project using a package manager (CocoaPods or Carthage), as a precompiled framework or as source. Reference the Downloads and Framework pages for more information on these options.

3.1 Add AudioKit as a CocoaPod.

This tutorial adds the AudioKit framework as a CocoaPod, therefore CocoaPods must be installed on the development computer. The required steps include;

Reference the CocoaPods and AudioKit Frameworks websites for more detail. The contents of the edited Podfile are shown below.

platform :ios, '9.0'

target 'AudioKit-Basics' do
  use_frameworks!

  pod 'AudioKit', '~> 4.0'
end

3.2 Run the project

After the framework has been installed using CocoaPods, open the Xcode workspace (not the project) and verify progress by building/running the app. The target settings should generally match those shown in figure 3.2. The result should be the same blank view as before, see figure 2.3. The state of the project at this point is reflected by release v2.0 on GitHub.

Figure 3.2 - Target Settings

4 Construct the app

4.1 Change the initial view controller

Since the project was created using the “Single View App” template, the project consists of a single UIViewController. Replace that UIViewController with a UITableViewController. This can be accomplished by the following steps;

Add a UITableViewContoller class to the project

Add a UITableViewController to the storyboard

Remove the original UIViewController

The Xcode project is shown in figure 4.1a. Running the app at this stage will produce a blank table view controller as show in figure 4.1b.

Figure 4.1a - Xcode
Figure 4.1b - With UITableViewController

Clean-up TableViewController class

4.2 Add AudioKit functionality

This tutorial will use AudioKit to construct a simple sound generator with two oscillators. All of the code will be added to TableViewController.swift.

Import AudioKit

import AudioKit

Add the properties for the oscillators and the mixer

var oscillator1 = AKOscillator()
var oscillator2 = AKOscillator()
var mixer = AKMixer()

Instantiate and wire the components

Two oscillators are instantiated with random frequencies and combined through a mixer. The AudioKit engine is started, then the two oscillators are turned-on.

oscillator1.frequency = random(in: 220 ... 880)
        
oscillator2.frequency = random(in: 220 ... 880)
        
mixer = AKMixer(oscillator1, oscillator2)
mixer.volume = 0.5
        
AudioKit.output = mixer
        
do {
    try AudioKit.start()
}
catch {
    AKLog("AudioKit did not start!")
}
        
oscillator1.start()
oscillator2.start()

Running the project will this stage will generate two audio tones with different frequencies, along with the same empty table view controller as before.

Figure 4.2 - AudioKit

4.3 Add UI Controls

The next step is to add UI controls for the AudioKit components. Although AudioKit includes a UI library, this tutorial will use UIKIt controls.

Configure the Table View Controller for static content

Build the control cell for oscillator 1

Figure 4.3a - Oscillator Controls

Add Outlets and Actions

Add the following outlets properties and action function. Then appropriately wire the UI components to these outlets and actions.

@IBOutlet weak var oscillator1OnOffControl: UISwitch!
@IBOutlet weak var oscillator1FrequencyControl: UISlider!

@IBAction func oscillator1OnOffAction(_ sender: UISwitch) {
    sender.isOn ? oscillator1.start() : oscillator1.stop()
}
    
@IBAction func oscillator1FrequencyAction(_ sender: UISlider) {
    oscillator1.frequency = Double(sender.value)
}

Add viewWillAppear(_:) function

The UI components will be initialized In the viewWillAppear(_:) function.

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)
        
    oscillator1OnOffControl.setOn(oscillator1.isStarted, animated: false)
    oscillator1FrequencyControl.value = Float(oscillator1.frequency)
}

Go ahead the build/run the project and verify that the newly added controls can be used to control oscillator 1.

Build the control cell for oscillator 2

Duplicate the above steps to add UI controls for oscillator 2 in cell 2. Running the project now will allow you to control both oscillators.

Build the mixer controls

The third cell will contain the mixer controls. This will include three UISliders and four UILables. Arrange these components in the cell so that it looks something like;

Figure 4.3b - Oscillators and Mixer Controls

Add Mixer Outlets and Actions

Add the following outlets properties and action function. Then appropriately wire the UI components to these outlets and actions.

@IBOutlet weak var oscillator1VolumeControl: UISlider!
@IBOutlet weak var oscillator2VolumeControl: UISlider!
@IBOutlet weak var mixerVolumeControl: UISlider!
    
@IBAction func oscillator1VolumeAction(_ sender: UISlider) {
    oscillator1.amplitude = Double(sender.value)
}
    
@IBAction func oscillator2VolumeAction(_ sender: UISlider) {
    oscillator2.amplitude = Double(sender.value)
}
    
@IBAction func mixerVolumeAction(_ sender: UISlider) {
    mixer.volume = Double(sender.value)
}

Initialize in viewWillAppear(_:) function

The UI components will be initialized In the viewWillAppear(_:) function.

oscillator1VolumeControl.value = Float(oscillator1.amplitude)
oscillator2VolumeControl.value = Float(oscillator2.amplitude)
mixerVolumeControl.value = Float(mixer.volume)

Go ahead the build/run the project.

Figure 4.3b - Complete Project

5 Reference

This tutorial

AudioKit

CocoaPods

AudioKit help on StackOverflow