Creating the Audio object dynamically : Round 2
In the last video we will created dynamically the audio object using the new HTML5 API for JavaScript while in this video we will show you an alternative way to do the same thing.
Video Transcript
00:00All right, before we wrap up this topic, I wanted to show you another way of doing the exact same
00:04thing, only in a shorter, more modern, more object-oriented type of way. All right, so
00:10in this scenario, we're not even going to put anything inside of our HTML document. So because
00:14of that, I don't need that div layer anymore. And instead, I don't need the line in line nine
00:20where I'm adding that sound zone. And I'm not going to create an element. Instead of that,
00:24I'm going to create a new audio object by typing the words new audio, and then opening
00:29and closing a round bracket. Once I created the new audio element, I don't have to do set attribute,
00:36I could continue setting it the same way. Or I could just set the value of auto play,
00:41and just define the value to be equal to auto play. So that that equals it's the same thing.
00:47Now we're going to keep the same thing for lines 12 and 13. But for lines
00:5215, basically, we're going to do just set the source value, again, to be equal to the sound path.
01:00Last but not least, we don't need to add the element onto the stage anymore, and we could
01:05delete this extra line of code. So literally, it cuts down our code, it makes it look prettier.
01:10If we click on the Save button, we could go into our browser and test it out,
01:14click on refresh, and we should be seeing our music playing out as well.
01:22Learning better is better. Now before I wrap up this video, I just wanted to say one more thing.
01:27So if we go back into our editor, we could also instead of setting the auto play,
01:32just as much as we've done previously and previous, like we've done with the video player,
01:37we could pause and play our sound. So in the same level, I could just click on the play
01:41button. If you took our video course, the play and pause functionalities work the exact same
01:48way, which will run through them. So one feature is the play, the other is the pause, and we just
01:53trigger the method. So I'm just going to save that and click on play, and then without setting
01:57the auto play, I'm actually telling the browser after I've set the source, I'm telling it that
02:02I want to actually play it. So if we go to our browser, we should see that it will play out.
02:06Zero to geek. And that's it about this video. Learning better is better.