Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
0
1
00:00:00,210 --> 00:00:06,960
So now that we've seen how a simple package such as the English words package works, and how it gets
1
2
00:00:06,960 --> 00:00:13,530
downloaded and incorporated into our project and automatically updated as well every time we run packages
2
3
00:00:13,560 --> 00:00:20,520
get, we're now ready to go ahead and incorporate a audio file playing package.
3
4
00:00:20,520 --> 00:00:22,680
So let's go ahead and just search for it.
4
5
00:00:22,740 --> 00:00:26,190
Let's search for play audio file.
5
6
00:00:26,190 --> 00:00:31,110
Now sometimes you might have to play around with the search terms a little bit in order to get to the
6
7
00:00:31,110 --> 00:00:32,790
package that you need.
7
8
00:00:32,790 --> 00:00:37,990
But if we scroll through this list, we can see that we probably don't want a video player.
8
9
00:00:38,010 --> 00:00:42,890
We probably do want something that plays audio files simultaneously.
9
10
00:00:43,110 --> 00:00:46,010
And there's also this one which plays audio files.
10
11
00:00:46,090 --> 00:00:51,030
There's something that allows us to play audio in the background while the screen is off, which sounds
11
12
00:00:51,030 --> 00:00:52,540
less like what we want.
12
13
00:00:52,590 --> 00:00:56,850
And so we're kind of choosing between audio players and audio player.
13
14
00:00:56,850 --> 00:01:00,610
Now notice because the authors are naming these names,
14
15
00:01:00,720 --> 00:01:02,870
they might often sound very similar.
15
16
00:01:02,880 --> 00:01:05,340
And this one's only different by an s.
16
17
00:01:05,970 --> 00:01:12,710
So let's take a look at the scores. Audio players has a score of 96 whereas audio player only has 93.
17
18
00:01:12,720 --> 00:01:15,830
So let's pick this one with the higher score.
18
19
00:01:16,050 --> 00:01:21,920
Now you've already seen how we can incorporate these packages into our project.
19
20
00:01:22,020 --> 00:01:24,060
I'm going to set this as a challenge for you.
20
21
00:01:24,060 --> 00:01:30,930
Go ahead and incorporate the audio players' plug in into your Xylophone project going through those three
21
22
00:01:30,930 --> 00:01:33,660
steps that we did in the last lesson.
22
23
00:01:36,480 --> 00:01:36,840
Now,
23
24
00:01:36,850 --> 00:01:42,100
it's important that when you're programming, don't feel like you have to memorize anything.
24
25
00:01:42,100 --> 00:01:44,730
It's important that you understand what's going on.
25
26
00:01:44,950 --> 00:01:50,380
But there's always the docs and Google whenever you get stuck, whenever you can't remember how to do
26
27
00:01:50,380 --> 00:01:55,300
something. Google and docs, they're your best friends as a developer.
27
28
00:01:55,300 --> 00:02:00,730
Don't ever let anyone make you feel bad for looking up things in Google or Stack Overflow or in the
28
29
00:02:00,730 --> 00:02:03,120
docs such as how to add a package.
29
30
00:02:03,130 --> 00:02:06,320
There are so many places that'll tell you how to do this.
30
31
00:02:06,400 --> 00:02:11,680
As we mentioned before, when you're using packages the first place to go when you're installing it, is
31
32
00:02:11,680 --> 00:02:13,600
of course the installing tab.
32
33
00:02:13,720 --> 00:02:19,210
And usually here it will have the instructions for you to install the package.
33
34
00:02:19,210 --> 00:02:22,390
So let's follow their steps.
34
35
00:02:22,440 --> 00:02:23,450
So first things first.
35
36
00:02:23,460 --> 00:02:27,750
Let's go ahead and copy this line of code and add it to our dependencies.
36
37
00:02:27,750 --> 00:02:33,000
So that's inside our pubspec.yaml and we're going to delete the English word package now because
37
38
00:02:33,000 --> 00:02:38,040
we don't need it anymore. And we're going to paste in our new package that we need.
38
39
00:02:38,040 --> 00:02:45,540
So I'm going to go ahead and run packages get as the second step, and that will remove our English
39
40
00:02:45,540 --> 00:02:48,930
words package that we had from previously.
40
41
00:02:49,170 --> 00:02:57,460
And it should include now our audio players package. So let's take a look inside our Dart packages once more.
41
42
00:02:57,760 --> 00:03:02,220
The English words is gone but the audio players is now in.
42
43
00:03:02,260 --> 00:03:05,470
So we're ready to go ahead and import this new package.
43
44
00:03:05,470 --> 00:03:12,610
We can go ahead and simply copy this line of code and replace where we imported our English words with
44
45
00:03:12,670 --> 00:03:20,200
this new import instruction to say that in this file, main.dart, we want to use this audioplayers
45
46
00:03:20,200 --> 00:03:29,020
.dart file that we incorporated just now. So now that we've got our package in our project, we're ready
46
47
00:03:29,020 --> 00:03:31,960
to actually use it to play some sound.
47
48
00:03:31,960 --> 00:03:35,620
Let's take a look at the read me to see how we can do this.
48
49
00:03:35,650 --> 00:03:41,980
Now it's important to read through most of the documentation before you get started because you'll discover
49
50
00:03:42,010 --> 00:03:46,650
that there's a section called Playing audio which seems like the right thing to use.
50
51
00:03:46,810 --> 00:03:49,080
But if you scroll down a little bit more,
51
52
00:03:49,080 --> 00:03:55,750
it tells you that for local assets, which is what we have, files that are packaged together with our project,
52
53
00:03:56,080 --> 00:03:58,910
you have to use the AudioCache class.
53
54
00:03:58,930 --> 00:04:02,290
So let's scroll down and find it.
54
55
00:04:02,620 --> 00:04:04,060
Here it is, AudioCache.
55
56
00:04:04,540 --> 00:04:06,550
And this plays local assets
56
57
00:04:06,550 --> 00:04:09,130
and here's the full documentation.
57
58
00:04:09,280 --> 00:04:14,060
So here it tells us, this is how we play an audio using AudioCache.
58
59
00:04:14,200 --> 00:04:21,130
First we have to switch out the import from importing audio players to importing AudioCache. So let's
59
60
00:04:21,130 --> 00:04:24,830
copy that and let's replace this line of code.
60
61
00:04:24,940 --> 00:04:33,520
And what that does is it tells our project to use this particular file that plays audio instead of this
61
62
00:04:33,520 --> 00:04:36,160
file that plays audio from the Internet,
62
63
00:04:36,160 --> 00:04:37,300
so remote files
63
64
00:04:37,300 --> 00:04:37,540
right?
64
65
00:04:37,960 --> 00:04:43,040
But what we want is to be a to play it from our assets folder.
65
66
00:04:43,060 --> 00:04:45,200
This is the one that we need. Now,
66
67
00:04:45,220 --> 00:04:54,380
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
68
00:04:54,380 --> 00:04:55,900
going to do that in here.
68
69
00:04:55,910 --> 00:05:03,120
I'm going to delete all of this and instead of having some text, I'm going to have a flat button. And
69
70
00:05:03,180 --> 00:05:09,720
this flat button will have a onPressed that gets triggered when it gets pressed, and the child is just
70
71
00:05:09,720 --> 00:05:18,040
going to be some text that says 'Click me.' Now, what should happen when this button gets pressed?
71
72
00:05:18,040 --> 00:05:21,400
Well, we want to play a sound from our assets folder.
72
73
00:05:21,580 --> 00:05:25,390
So we have to go and build our player first.
73
74
00:05:25,390 --> 00:05:32,210
Now this code is a little bit outdated and there's a new way that we would write this in Dart 2.
74
75
00:05:32,410 --> 00:05:37,900
In all of this course, we've been working with the latest syntax or the latest way of writing Dart code,
75
76
00:05:38,410 --> 00:05:40,360
and that's Dart 2.0.
76
77
00:05:40,390 --> 00:05:47,650
So in Dart 2, the way that we would create audio player is we would write something like final. And we'll
77
78
00:05:47,650 --> 00:05:49,550
give it a name, we'll call it player.
78
79
00:05:49,630 --> 00:05:56,380
We're going to set it to equal the player that comes from audio cache, so we'll say audio cache.
79
80
00:05:56,530 --> 00:05:59,950
And finally we're going to finish off with a set of parentheses.
80
81
00:06:00,550 --> 00:06:08,890
So that line of code is all we need to do to create our new player that plays cached audio, so audio
81
82
00:06:09,010 --> 00:06:11,770
that's in our local assets.
82
83
00:06:11,770 --> 00:06:18,310
So now that when our button gets pressed we create a new player and then we just have to tell it what
83
84
00:06:18,310 --> 00:06:18,790
to play.
84
85
00:06:19,480 --> 00:06:27,850
And we specify the name of the file inside the parentheses of this play function.
85
86
00:06:27,850 --> 00:06:30,030
So let's go ahead and type that out.
86
87
00:06:30,040 --> 00:06:34,360
Let's say player.play and the file name
87
88
00:06:34,450 --> 00:06:43,560
Let's play note1.wav. Now, notice that previously when we were using images and we were specifying
88
89
00:06:43,620 --> 00:06:48,320
a file that we want to display, we would add in the name of the folder as well.
89
90
00:06:48,330 --> 00:06:55,080
So in this case, we would be writing something like assets/note1.wav. But
90
91
00:06:55,080 --> 00:07:03,210
very helpfully, the audio players package actually already assumes that your file is inside a folder
91
92
00:07:03,210 --> 00:07:09,840
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
93
00:07:10,020 --> 00:07:12,820
of the sound file that's inside the assets folder.
93
94
00:07:13,350 --> 00:07:19,290
So it's very important that your file structure looks like this. And this is why all of our sounds are
94
95
00:07:19,290 --> 00:07:22,140
inside a folder that's called assets.
95
96
00:07:22,400 --> 00:07:26,550
And if we changed the name of this folder, then it won't work.
96
97
00:07:26,550 --> 00:07:32,760
But on the plus side, we can now write much less and it looks a lot better when we're saying our audio
97
98
00:07:32,760 --> 00:07:36,370
player should play this particular sound.
98
99
00:07:38,030 --> 00:07:39,510
So that's the theory of it.
99
100
00:07:39,530 --> 00:07:44,390
It's time to actually put it into practice and run it and see if it works.
100
101
00:07:44,440 --> 00:07:49,340
Now even though we're used to hitting save or using the hot reload,
101
102
00:07:49,340 --> 00:07:55,190
in my experience when you're working with audio players and you've just set it up to start playing, the
102
103
00:07:55,190 --> 00:08:02,860
first thing to do is actually to stop your app if it's currently running and restart it from cold. And
103
104
00:08:02,860 --> 00:08:07,990
this allows it to update things in the background and actually make sure it gets hold of the right files
104
105
00:08:07,990 --> 00:08:17,060
for you. Once that's done, you should see our flat button in the center of the screen that says the words
105
106
00:08:17,150 --> 00:08:18,060
'click me'.
106
107
00:08:18,260 --> 00:08:26,480
And when you click on it, you might get a pop up that asks you for permission for Runner, which refers
107
108
00:08:26,480 --> 00:08:28,760
to your iOS app.
108
109
00:08:28,790 --> 00:08:33,710
Now if you're running your app on an Android emulator, then this shouldn't be a problem.
109
110
00:08:33,710 --> 00:08:39,200
Similarly if you're running it on a physical device such as your iPhone or your Android phone, then you
110
111
00:08:39,200 --> 00:08:40,610
won't see this pop up either.
111
112
00:08:40,730 --> 00:08:46,100
But make sure when it asks you for any permissions just go ahead and click ok and allow it.
112
113
00:08:46,100 --> 00:08:51,510
And now every time you click on the button, we hear note 1 being played.
113
114
00:08:52,900 --> 00:08:59,110
There's usually a lot of output in the console and it's telling you all sorts of things like what it's
114
115
00:08:59,110 --> 00:09:00,340
trying to do.
115
116
00:09:00,340 --> 00:09:06,060
Now all of this text actually comes from the audio players package that we incorporated.
116
117
00:09:06,130 --> 00:09:11,500
But as long as you don't see any red or any errors, then don't worry about all of these messages too
117
118
00:09:11,500 --> 00:09:14,010
much. Success right?
118
119
00:09:14,040 --> 00:09:18,900
We managed to get a sound to play with very few lines of code.
119
120
00:09:18,990 --> 00:09:25,440
We didn't have to do very much for this to start working. And that's all thanks to incorporating these
120
121
00:09:25,440 --> 00:09:33,240
open source Flutter packages and powering up our app to be able to do so much with so few lines of code.
121
122
00:09:34,720 --> 00:09:36,230
Now in the next lesson,
122
123
00:09:36,370 --> 00:09:43,010
we're going to try and see how we can play all of our sounds by hooking them up to different buttons.
123
124
00:09:43,090 --> 00:09:46,240
So for all of that and more, I'll see you in the next lesson.
13688
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.