1
00:00:00,240 --> 00:00:06,420
This is the lesson where we're going to show you how you can play sounds MP three files using JavaScript,

2
00:00:06,610 --> 00:00:09,390
I've created a brand new folder called Sound.

3
00:00:09,540 --> 00:00:12,240
I've added in three different AMP 3s.

4
00:00:12,460 --> 00:00:16,440
So we've got a Barch, we've got a cougar and we've got a lion.

5
00:00:16,450 --> 00:00:19,170
So we're on an animal theme for this lesson.

6
00:00:19,600 --> 00:00:26,760
We're going to be using the JavaScript method where we can create using the HTML audio element.

7
00:00:26,760 --> 00:00:29,370
We can scroll down to where the examples are.

8
00:00:29,490 --> 00:00:34,020
We've got a variable horn where we create a new audio object.

9
00:00:34,020 --> 00:00:40,740
So just as we did with the date in JavaScript specifying where the file is and the file that we want

10
00:00:40,740 --> 00:00:48,510
to utilize and then we can play the file, you can get also information in regards to that particular

11
00:00:48,510 --> 00:00:48,960
element.

12
00:00:49,230 --> 00:00:54,960
So we see that we are still creating that same object, but we can get duration, pause, muted and

13
00:00:54,960 --> 00:00:55,610
volume.

14
00:00:56,160 --> 00:00:58,920
Lets copy this out and we're going to bring it into our code.

15
00:00:59,250 --> 00:01:03,300
And I'm going to update this to match where our MP three files are.

16
00:01:03,690 --> 00:01:06,330
Siembra, we do have a folder called Sound.

17
00:01:06,540 --> 00:01:11,940
So I'm going to link to those files and we do have an EP three called Barch.

18
00:01:11,940 --> 00:01:13,140
So that's MP3.

19
00:01:15,240 --> 00:01:17,440
We can save that, answered a horn.

20
00:01:17,580 --> 00:01:23,460
We're going to use the variable name Barch add event listener, so we're making sure that the data is

21
00:01:23,460 --> 00:01:30,810
loaded and this is a short form for function with newer formats of JavaScript so we can bring it back

22
00:01:30,810 --> 00:01:33,810
into the function format as well as previously.

23
00:01:34,900 --> 00:01:40,140
And instead of horn, we'll just get the duration of this particular clip.

24
00:01:41,340 --> 00:01:42,960
So when we reload.

25
00:01:44,780 --> 00:01:53,690
And I'll console log out the value of duration, also going to shrink the side menu there and we'll

26
00:01:53,690 --> 00:01:56,220
clean it up a bit, using the brackets beautifies.

27
00:01:56,630 --> 00:02:01,330
So when we refresh, we see that's the duration of that particular clip.

28
00:02:01,610 --> 00:02:06,440
And as mentioned here, we can get paused, muted volume and so on.

29
00:02:06,980 --> 00:02:08,990
Muted So that's Barque.

30
00:02:10,730 --> 00:02:16,340
And you can see all of the values are going to be contained within Barch and if we output muted.

31
00:02:18,130 --> 00:02:25,120
We can see that muted is false, so it's not mirrored next, let's add in some additional elements on

32
00:02:25,120 --> 00:02:28,000
the page so we can play that particular sound.

33
00:02:30,390 --> 00:02:38,820
I'm going to set up a button and this just going to be a regular button and we'll just call it plate

34
00:02:39,810 --> 00:02:41,120
using JavaScript.

35
00:02:41,140 --> 00:02:42,300
So I'm going to use const.

36
00:02:43,890 --> 00:02:47,610
And I can also use Consed for the bark object, because that's not going to change.

37
00:02:50,300 --> 00:03:00,770
I'll call it button using document, query, selector, select the button I want and we're going to

38
00:03:00,770 --> 00:03:03,070
add an event listener on that button.

39
00:03:03,980 --> 00:03:07,250
So I'm going to update this to be button add event listener.

40
00:03:07,460 --> 00:03:14,630
The event listener that we're looking listening for is click and if it gets clicked, then we're going

41
00:03:14,630 --> 00:03:17,930
to see all of those values so we get false still.

42
00:03:20,320 --> 00:03:25,120
And that means that once we click it, we can also invoke plea.

43
00:03:27,930 --> 00:03:29,130
So we can play the sound.

44
00:03:30,540 --> 00:03:37,260
So we've got our dog dog barking sound if you try to load it without the element.

45
00:03:38,480 --> 00:03:45,020
The MP three being loaded, you could encounter some errors and some issues, so it is advised that

46
00:03:45,200 --> 00:03:52,590
usually you have a trigger to trigger off that playing of whatever sound you're trying to invoke.

47
00:03:52,850 --> 00:03:54,580
So go ahead and try this out for yourself.

48
00:03:54,800 --> 00:04:00,620
You can use the empathy's that I've included within the course as well as you can use your own MP Empathy's

49
00:04:00,920 --> 00:04:07,970
set up a play button, create a new audio object that links to wherever the file is located.

50
00:04:07,970 --> 00:04:09,680
The MP three file is located.

51
00:04:09,950 --> 00:04:17,960
And then when you click your play button, go ahead and play your MP3 file in JavaScript using JavaScript

52
00:04:18,080 --> 00:04:19,200
within your browser.

53
00:04:19,250 --> 00:04:20,210
Try it out for yourself.

54
00:04:20,570 --> 00:04:24,830
And coming up, we're going to extend on what we've learned in this lesson and we're going to do a whole

55
00:04:24,830 --> 00:04:27,380
bunch more with the audio and sounds.