 Our next speaker is Hage Yapa from SourceBits, everybody. So Yapa has actually contributed code towards Express. He has a book that he's written on Express Web Application Development. Express Web Application Development. So he's a published author. And he works as an architect at SourceBits right now. So originally I think he wanted to talk about Express, he wants to do something a little more in team with the actual event and he'll tell you about that right now. Yep, sure. Am I audible? Alright, cool. Okay, so let's take a look at this GIF animation, you know. You can see this cat playing a guitar. So you know, a music was playing in her head. Oh yeah, I can hear something. So the same thing happened to me and I took it as a challenge. So my talk is GIF images, now it's sound. Alright, so that's me and I was talking about the challenge and the challenge was to add sound to GIF animations. It was accepted and accomplished and that's what I'm going to show you guys here. So right now we don't have any sound here. I will show you the version where it's got a sound and it is this one. Just a little bit. I do the new one and on. And let's take a look at the source code. Where is the audio? In the meantime, I think you guys can try to figure out how this might be working. You just have a GIF image and there is a sound playing out of it. It's crazy. Let's find out. Okay, so this is the source code again. Then you see that, you know, we are doing this IMJSRC. There's Johnny the GIF and you see something which is a little uncommon. Data audio volume 0.1 auto play. There is no evidence of any sound image here. And we can even... Oh, I'm so sorry, I really needed that. This is the source code of this thing. So, you know, the implementation is actually very simple. If I show you how it was done, you would know, oh yeah, yeah, yeah, yeah. That's the way it works. Oh, no, in the browser. I created a library out of this. It's called talking image. But if I show you the source code of talking image, you know, it's all optimized and, you know, it may seem a little complicated. So I'm going to show you the code which I started with. You know, it's very simple, very raw, very hacky. I think you guys would be able to follow it much better. So let's go back to source code. And this is it. Doing the general window.onload. And I get the URL of the thing called holder. There we have the SRC. You know, it's basically the URL of the image which has got an audio embedded in it. Okay. In a little while I'll show you how to embed audio to an image. So I think that, you know, I'm going to show you how to embed audio to an image right now. That's really good. So this is one image. And this is the MP3 which I like to embed through it. Okay. So what I'm going to do is that I'll copy both of them. This is actually from the talking image repository. So I don't want to spoil it. So we have Johnny the Jif and Johnny the MP3. The way to embed audio to the image is very, very simple. Okay. You just read it. Read Johnny the MP3. Appended to Johnny the Jif. You know what? Now you can see the file size here of Johnny the Jif. It's changed a little bit. The MP3 has been appended to it. Now if you load this Jif in your browser using the talking image, the MP3 embedded in it would be played. So this is how you append audio to an image. And going back to the extraction. So this is how we attach audio. Now going back to extraction. You know, we can very easily work with binary data in the browser using area buffer. Area buffer, you know, you see below. And then this might not be that handy to work with. So someone came up with the JavaScript library called jbinary to make it easier, which I'm using. And jbinary, we loaded an image which is located in the URL and the binary data comes here and we loop through the data and look for the MP3 tag. And we know that from that location onwards, that's the MP3 tag. And the thing is that we could be using files also. So we are detecting all files as well. You know, whatever is present there. And then we extract the sound component of the file which was downloaded and we create an audio element. And then we base64 encode the binary, set some attributes and append it to the body and then we just play it. That's how it works very simple. So just a URL where you can find the talking image library. So we have this might look like that for an upcoming movie, but it's something about talking image. And you know, things related with it. The good, the bad, the sad, the ugly and the best. The good part is that now you can add sound snippets to your images. And you know, you can show it as something with school. The bad part is that if people really start using this, it can get abused. You know, like you go to some website, you know, something is playing. If you're new, you don't know what to do. And in case of talking image, you just have to click on an image. But if someone uses this technique to randomly start playing audio, I think it's going to become very, very irritating. That's the bad part. The sad part is that Firefox refuses to play. Chris, which image is this audio? So unfortunately Firefox, Firefox won't play infantry audio. So, you know, if you give Firefox bulk, well and good, it will play and Safari will refuse to play. So, you know, you have this problem. You have to come up with something to make it easier. Maybe way two versions. I don't know. Maybe you guys come up with something. Fortunately, Chrome is really cool place. So the best part is not this. Guys, listen, best part is not talking image. The best part is the idea that you can create a container file extension of your own. It could be anything. It could be, you know, something that BLR. What the hell is BLR? Okay, you load it and you have defined yourself. What would be there in the BLR file? You know, it could be image. There could be some sound components. It could even be JavaScript CSS. You load it and then, you know, you see that nothing is loaded except some BLR file and how the hell is this crazy thing coming up with an image, some sound, some, you know, crazy JavaScript and some maybe even HTML. How does it happen? So basically that's the idea. Like it's about working with binary data in the browser. You can create your own file extension and your own file types. So I think that's the best part. And I hope that, you know, you guys do some interesting things and share it with me. So I'm really saying, actually, that is the best part, you know, the idea is the best part, you know, the library. So that's me again, in case, and as I was working on the talking image, I came upon an image which I found it was really hilarious. And I think it would be an interesting exercise for you guys to embed a sound to it and we share it. What the hell is going on? So what happens if the sound is a length of the sound is like different from the length of the video animation in your library? If you're the length of the sound file, it's like if it's playing for like two minutes and your animation only for like 20 seconds. Right. So, you know, it's really up to you how you want to do it. And I would not recommend that you use a big audio file for that. You know, short sound snippets or, you know, just move it out. Okay, wait, wait, wait, guys, I will show you something. You know, you know, the best way to do it, I will show you. This is an example of the best use case. Now you don't have to upload it to YouTube. Suppose in GIF file, I have made my JavaScript CSS and loaded and it's good. Some means in browsers, some code. Will that code be discoverable in developer tool like this background? If you load just the image, you cannot see it, but in the developer tool, we have the rendered view, then you will be able to see it. Since you call yourself Hackspar, I want every next questions to start with the word captain. Yes. Cat. All right. So now like we use sprites or something, right? So if I have a bunch of images, I put them together in a sprite and I can have my CSS sprites and everything put together. Now, how fast is this thing? So what if I could put all of my data together and, you know, load it all with a single network request and then break it at my will. So you think it's advisable or? You know, it really depends, you know, how big it is. So if the file size is, you know, relatively large, initially you might see a little delay, you know, is extracting the binary and calling the basics of all. There's a slight, you know, a little bit of delay, but after that, you know, I really don't see any delay. Okay. And would there be any security issues or something? Yes. You know what? Actually in the bad part, actually I forgot. You can. You can really, you know, because you may say that your browser may say something funny.exe, you know, it's not allowed. You know, maybe, you know, there's some, you know, security system which says, you know, exe file is not allowed. But, you know, you would embed the exe file in the j for whatever image and then you load it and using this thing, you extract the component and using the data URL. I think you could. I think I haven't tried it yet, but you could probably just download it. You know, you are recreating the binary in the browser and asking them, would you like to download this? You know, I think the possibilities are really endless because of many things. Awesome. We have time for one last question. Anyone? Okay. All right. Then big round of applause to Hageyapad. He's the reason we do this. He's the reason we do this. Cheers, food. I love your talk.