Original subtitles

0 So now that we've seen how a simple package such as the English words package works, and how it gets 1

downloaded and incorporated into our project and automatically updated as well every time we run packages 2

get, we're now ready to go ahead and incorporate a audio file playing package. 3

So let's go ahead and just search for it. 4

Let's search for play audio file. 5

Now sometimes you might have to play around with the search terms a little bit in order to get to the 6

package that you need. 7

But if we scroll through this list, we can see that we probably don't want a video player. 8

We probably do want something that plays audio files simultaneously. 9

And there's also this one which plays audio files. 10

There's something that allows us to play audio in the background while the screen is off, which sounds 11

less like what we want. 12

And so we're kind of choosing between audio players and audio player. 13

Now notice because the authors are naming these names, 14

they might often sound very similar. 15

And this one's only different by an s. 16

So let's take a look at the scores. Audio players has a score of 96 whereas audio player only has 93. 17

So let's pick this one with the higher score. 18

Now you've already seen how we can incorporate these packages into our project. 19

I'm going to set this as a challenge for you. 20

Go ahead and incorporate the audio players' plug in into your Xylophone project going through those three 21

steps that we did in the last lesson. 22

Now, 23

it's important that when you're programming, don't feel like you have to memorize anything. 24

It's important that you understand what's going on. 25

But there's always the docs and Google whenever you get stuck, whenever you can't remember how to do 26

something. Google and docs, they're your best friends as a developer. 27

Don't ever let anyone make you feel bad for looking up things in Google or Stack Overflow or in the 28

docs such as how to add a package. 29

There are so many places that'll tell you how to do this. 30

As we mentioned before, when you're using packages the first place to go when you're installing it, is 31

of course the installing tab. 32

And usually here it will have the instructions for you to install the package. 33

So let's follow their steps. 34

So first things first. 35

Let's go ahead and copy this line of code and add it to our dependencies. 36

So that's inside our pubspec.yaml and we're going to delete the English word package now because 37

we don't need it anymore. And we're going to paste in our new package that we need. 38

So I'm going to go ahead and run packages get as the second step, and that will remove our English 39

words package that we had from previously. 40

And it should include now our audio players package. So let's take a look inside our Dart packages once more. 41

The English words is gone but the audio players is now in. 42

So we're ready to go ahead and import this new package. 43

We can go ahead and simply copy this line of code and replace where we imported our English words with 44

this new import instruction to say that in this file, main.dart, we want to use this audioplayers 45

.dart file that we incorporated just now. So now that we've got our package in our project, we're ready 46

to actually use it to play some sound. 47

Let's take a look at the read me to see how we can do this. 48

Now it's important to read through most of the documentation before you get started because you'll discover 49

that there's a section called Playing audio which seems like the right thing to use. 50

But if you scroll down a little bit more, 51

it tells you that for local assets, which is what we have, files that are packaged together with our project, 52

you have to use the AudioCache class. 53

So let's scroll down and find it. 54

Here it is, AudioCache. 55

And this plays local assets 56

and here's the full documentation. 57

So here it tells us, this is how we play an audio using AudioCache. 58

First we have to switch out the import from importing audio players to importing AudioCache. So let's 59

copy that and let's replace this line of code. 60

And what that does is it tells our project to use this particular file that plays audio instead of this 61

file that plays audio from the Internet, 62

so remote files 63

right? 64

But what we want is to be a to play it from our assets folder. 65

This is the one that we need. Now, 66

the next thing it tells us to do is to create a new player using the code that we just imported. So we're 67

going to do that in here. 68

I'm going to delete all of this and instead of having some text, I'm going to have a flat button. And 69

this flat button will have a onPressed that gets triggered when it gets pressed, and the child is just 70

going to be some text that says 'Click me.' Now, what should happen when this button gets pressed? 71

Well, we want to play a sound from our assets folder. 72

So we have to go and build our player first. 73

Now this code is a little bit outdated and there's a new way that we would write this in Dart 2. 74

In all of this course, we've been working with the latest syntax or the latest way of writing Dart code, 75

and that's Dart 2.0. 76

So in Dart 2, the way that we would create audio player is we would write something like final. And we'll 77

give it a name, we'll call it player. 78

We're going to set it to equal the player that comes from audio cache, so we'll say audio cache. 79

And finally we're going to finish off with a set of parentheses. 80

So that line of code is all we need to do to create our new player that plays cached audio, so audio 81

that's in our local assets. 82

So now that when our button gets pressed we create a new player and then we just have to tell it what 83

to play. 84

And we specify the name of the file inside the parentheses of this play function. 85

So let's go ahead and type that out. 86

Let's say player.play and the file name 87

Let's play note1.wav. Now, notice that previously when we were using images and we were specifying 88

a file that we want to display, we would add in the name of the folder as well. 89

So in this case, we would be writing something like assets/note1.wav. But 90

very helpfully, the audio players package actually already assumes that your file is inside a folder 91

called assets, and you don't have to write the full file path. All you need to do is to give it the name 92

of the sound file that's inside the assets folder. 93

So it's very important that your file structure looks like this. And this is why all of our sounds are 94

inside a folder that's called assets. 95

And if we changed the name of this folder, then it won't work. 96

But on the plus side, we can now write much less and it looks a lot better when we're saying our audio 97

player should play this particular sound. 98

So that's the theory of it. 99

It's time to actually put it into practice and run it and see if it works. 100

Now even though we're used to hitting save or using the hot reload, 101

in my experience when you're working with audio players and you've just set it up to start playing, the 102

first thing to do is actually to stop your app if it's currently running and restart it from cold. And 103

this allows it to update things in the background and actually make sure it gets hold of the right files 104

for you. Once that's done, you should see our flat button in the center of the screen that says the words 105

'click me'. 106

And when you click on it, you might get a pop up that asks you for permission for Runner, which refers 107

to your iOS app. 108

Now if you're running your app on an Android emulator, then this shouldn't be a problem. 109

Similarly if you're running it on a physical device such as your iPhone or your Android phone, then you 110

won't see this pop up either. 111

But make sure when it asks you for any permissions just go ahead and click ok and allow it. 112

And now every time you click on the button, we hear note 1 being played. 113

There's usually a lot of output in the console and it's telling you all sorts of things like what it's 114

trying to do. 115

Now all of this text actually comes from the audio players package that we incorporated. 116

But as long as you don't see any red or any errors, then don't worry about all of these messages too 117

much. Success right? 118

We managed to get a sound to play with very few lines of code. 119

We didn't have to do very much for this to start working. And that's all thanks to incorporating these 120

open source Flutter packages and powering up our app to be able to do so much with so few lines of code. 121

Now in the next lesson, 122

we're going to try and see how we can play all of our sounds by hooking them up to different buttons. 123

So for all of that and more, I'll see you in the next lesson.