Development step 5: Working with Audio and Keyboard

In this step, I wanted to add music to my minimal Weather app I had made before. Then I tried to advance the keyboard interaction.

1. Learning purpose

Since music is really a crucial part of every app development these days, and it also add more interaction to the app, I would not forget this part and was eager to learn how to import audios and playing with them.

The minor part of this process was to make keyboard a bit more intuitive and adaptive to many scenarios.


In this part, I’m going to use the following resources as reference:

3.The process

Step 3.1: Make the audio play, right when you click search button.

The first thing I needed was the music, so I downloaded an ambiance soundtrack to fit the mood of my app. Then I added it to the library by drag-n-dropping it into Xcode folder i have created before. I put it in a separate group folder: “Audio”. After renaming the audio to “ambiance.mp3" for easier referencing later, I would jump to the View Controller to start coding.

In order to work with audio and video in general, the first action I must do is import AVFoundation

Then I gave my audio a name:var audioPlayer = AVAudioPlayer()

On the override function, I had to link my audio file into ViewController by adding my audioPlayer = AVAudioPlayer(contentsOf ) . With the help of Xcode tooltips, I knows that I had to add the “do-try-catch” method

contentsOf:Url — throws indicates that i need the “do-try-catch” method (Error handling)

Here’s how I link my music file:

do {
audioPlayer = try AVAudioPlayer(contentsOf: URL.init(fileURLWithPath: Bundle.main.path(forResource: "ambiance", ofType: "mp3")!))
catch {

My audio file is “ambiance.mp3”, and the method for refered to it is using the URL. One thing to note (as I have run through a mistake before) is I need to point out the location of my audio file, which xcode somehow automatically put in its bundle folder. But it didn’t include for me so I ran into an error. Then i followed an instruction from, indicating that I had to check the bundle resources list to see if my sound was there then I could refer using this line: fileURLWithPath: Bundle.main.path() . Here’s how to check the bundle resources list:

Finally, making the sound play when the search button clicked:

func searchBarSearchButtonClicked(_ searchBar: UISearchBar) {

Step 3.2: Advance the keyboard interaction.

Well, Last development step when I did the minimal weather app, I recognized there was a problem with the keyboard — It didn’t appear when I click the mouse (I have to use the mac keyboard) as well as not hide away when I click Return and search. So this time around, I want to work around the problem to make the UX feel right.

So why didn’t the keyboard show up on the preview last time? The reason is I didn’t do anything wrong! It’s all because I was using the Simulator on my mac, so It simply didn’t show! If simulate on my own Iphone, It worked! To make it show up on Mac Simulator, I had to go to Hardware/Keyboard and uncheck the “Connect Hardware keyboard” or Shift Command K.

Why the keyboard didn’t go away when I click return button (Search)? I should have added the searchBar.resignFirstResponder() to hide the keyboard right when users have done with the input and hit return.

I also add this line to hide the keyboard when users don’t want to search and click elsewhere on the screeen:

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

I had learned the technique here:

5.What’s next

I know in this steps, the music was a bit simple and acted as just a background music. My plan for upcoming steps is to make it more advanced so that it may apply to multiple weather conditions, turning the weather app into a kind of an experience more than just showing weather!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.