Hey what is up everybody this is Caleb Stoltze with Deb's slow dot com.
And today we're going to be building an awesome app called scribe that basically is going to use iOS
10 new speech framework to analyze an audio file and transcribe it into text just like you can with
Siri voice dictation or with Siri.
Obviously some cool uses for this might be a camera app where when you hold it out to take a selfie
and say cheese it can analyze the word cheese and then know that you want to take a photo and then it'll
take a photo for you.
Very cool.
So like lots of very very voice driven type tasks.
This app is going to work a little bit like this.
So basically you're going to click on that red circle button right there and watch what happens when
it plays my recording.
Nice.
Click it again.
Right.
Just might be.
Now I've never made.
OK so as you can see when we click the button here it loads a an audio file that I have prerecorded
and then it basically will get it will begin the analysis using the speech framework will analyze the
audio and then convert it into text and will basically drop it into a text field that we have right
here.
Now there are a couple of things to know when we are using the speech framework.
You must get permission to use it just like you would with MAP kit or anything else regarding the user's
personal information recording of their voices would be their personal information.
Even though this app is not going to be recording their voice using their microphone.
It's still a requirement to get it to work.
And we'll talk about that later.
So let's go ahead and get rid of that and I want to show you some of the available resources online
regarding the speech recognition API.
There is not very much on it online yet because I think it's still in beta actually.
But what we're going to do today works really well.
So if you want you can go to the WWE DC 2016 videos and you can watch a video.
Five hundred nine.
And this is going to basically give you the nuts and bolts of the speech recognition API.
It's really cool actually and there's a lot of amazing uses for this and it always makes me think of
what is possible and just the potential of opening up an API like this to developers.
So I would recommend watching this as kind of a prerequisite to finishing this video.
And then of course you're going to want to go through the Iowa 10 documentary called What's new in Iowa
s and there's an entire section here called Speech recognition.
And I'm just going to kind of breezed through this really quick and then we'll get right into making
that up.
So basically you can recognize and transcribe speech into text.
It can be from both real time live audio and prerecorded audio.
So each speech recognition that you want to do requires a recognizer a request and a recognition task.
So the recognizer basically recognizes there is speech in this audio the request basically will pull
the file from wherever it's stored whether it's live or on your device like you recorded an audio session
before and then you want to analyze it and transcribe it.
And then the recognition task basically puts those two together.
So it'll run the file through and then basically the result will provide that that transcription that
we want.
So we'll get into this later.
And just like we said before we're going to be using what's called an s speech recognition usage description.
We're going to add that key to our apps info up the list and it'll basically pop up a prompt that will
ask us for permission to use speech recognition and this will probably actually be an app guideline
in the future.
But it says here when you adopt speech recognition in your app.
Be sure to indicate to users that their speech is being recognized and that they should not make sensitive
utterances at the time.
So if they're talking about something secure and they're nervous about it being leaked out you just
basically need to tell them don't make a bad choice of what you're saying with our app.
OK.
So that is that.
Let's go ahead and pull open a shiny new X code project in X code beta.
At the time of this recording I'm using X code beta 8.00 beta 3.
And so just go ahead click Create a new X code project single view application is fine and let's call
this scribe let's give it a cool name.
We don't need anything else here.
No core data no unit tests.
Click next.
And I'm going to save it to my desktop just like that.
OK.
Super cool.
So by the way yes that is the name of my phone.
I use that so that people don't try to connect to my hotspot without my authorization.
Anyway moving on.
So we are going to go ahead and start by building out our UI first and then afterwards we're going to
go ahead and code up some code.
So let's begin by adding in a view to the top to drag it up here.
And this is just going to be a banner bar.
It's not necessary.
But I like making my apps look nice even if they serve a really simple purpose.
So I'm going to make it 55 high.
Give it a color of red and if you want you if you want to use this red the next color is D.B 1.
See one see.
So there you go.
All right.
So let's give this some constraints.
Let's pin it to the top left and right and give it a fixed height of 55.
Next up we're going to give it a label and let's drop that down there right in the center.
Let's call this scribe and let's make it a little bigger here and recentre again Center the text and
the font that I like to use when you select custom I like to use Avenir next.
I just think it looks really cool it's nice and round and clean.
So let's do that and maybe I'll bump it up to 20.
And I want to give it a white color that looks good.
OK.
So next let's go ahead and center this in this red container that it's in.
You know what.
Actually that's not going to do what I want.
That's going to put it in the center of our app.
So let's select both the text and our view.
Sometimes you may have to go over here and select both.
And now on the line constraint menu do horizontal and vertical centers that should be good.
OK.
So let's think we need our record button we need a message that says play and transcribe and we need
a text field.
So let's go ahead and add those UI button drag it in here.
That looks good.
And I'm going to make this a square by going to my attributes my size inspector sorry and let's make
it size 60 by 60 go back to the attributes inspector remove the text by selecting that deleting it and
pressing Enter and then we want the background color down here at the bottom of our button to match
our red color on the top.
Now don't worry that this is not yet round.
I'm going to teach you how to round it out and make it look really nice.
So let's just go ahead position that may be there that looks.
Yeah that looks good.
OK so now I need play and transcribe.
So select this you I label press command d to duplicate it.
And I'm just going to drag it down here to the bottom if it will let me.
Please be nice.
There we go.
OK.
So we're going to center that bad boy.
And we want to set this color of this label too dark gray and we want to stretch it out a bit.
And we want to send it again just doing some cleanup work here play.
And what transcribe.
Awesome.
So there's that.
That is in place the button it's looking good.
And you know what we need to do some constraints here so click on your label and let's go ahead and
let's give it horizontal constraint in the container and pin it to the bottom eight just like that.
This one we're going to want to do kind of a similar thing.
We're going to want to give it a fixed height and a fixed width and let's go ahead and pin it to the
bottom just like that.
But we also need to center it in the container horizontally.
So do that and that alignment constraint and click Add one constraint and next All we need to do is
add an hour you text field and our UI is almost done.
Oh I'm sorry.
You I text view.
So we're going to drop in one just like that.
And you see how it snaps 20 to the left.
We want it to be about the same at the top so just kind of eyeball it and we can perfect it later.
We want it 20 from here as well just for aesthetics purposes give it some constraints.
We were close.
Actually we can go ahead and remove this and we can say 20 here 20 here 20 here and click add four constraints
OK.
There we go.
And it's giving us a little error there.
Let's move it down.
OK.
Now I'm trying to figure out why it is not allowing me to do what I want.
It's giving me this weird number thing.
Let's go ahead and try that again.
Let's delete it and let's actually go ahead and leave constraints margins on and let's just say 0 0
0 0 pretty sure that'll give us what we want.
Oh never mind.
No no no this is good.
We want it to be 20 from this 20 from this.
And then the margin is actually it's OK to be zero.
So let's let's change this to be 20 and let's go back whoops there we go.
And we want this constraint for the bottom space to also be 20 OK.
So now it's still giving us a weird problem.
We can we can check that out later.
But for now this looks pretty good.
So let's go ahead and the attributes inspector.
Let's go ahead and change the font to from system to wups to custom.
Go ahead and give it Avenir next.
And I'm going to bump it up to size.
I think 18 is good.
Yeah.
Let's let's make this look a little trendier make it a light color and let's center it.
Of course let's bump the color down to dark gray.
And you know what I think this is pretty good but in the original app I left a little message here just
so that people know what to do.
So if you double click here I type something like this.
Tap the button below to transcribe the audio embedded in this app.
And I said that because our app is actually going to have a preloaded audio file that will kind of do
all the heavy lifting and then yes I'm just telling them that there is an embedded audio file.