 Jason? Yeah. Okay. Great pleasure to. Okay. So this is a new format talk that we're doing for JSBOO. These are short talks. We're calling them crisp talks. They're about 15 to 20 minutes, including questions. They are all about wall factor. And these are, this is stuff where the developers have actually, this isn't stuff that they've done for work or anything. This is stuff that they've done for themselves. They've investigated it and they've come up with some really cool projects. The first one in line is Jason Justice, a bunch of people from Bangalore, Jason, I'll recognize him, give big round of applause for Jason. Jason is a developer at Bang the Table. JavaScript has been this playground for the last couple of years with endless personal projects. Hyperbole. And it keeps him occupied. He loves architecting web apps, and he became a fan of Angular and Backbone, designs interfaces, learns illustration, and he is actually making a bunch of progress with his comic book on Git. So, like, that's cool as it sounds. He is doing his presentation on HTML5 audio and I don't want to give you any more details about it. Jason, take it away, man. Hello. Good afternoon, folks. Here I'm going to talk about HTML5 about it. Before going to the presentation slides, let's play some deeper music. Now you guys can hear me. Thank you, Sushu. Actually, what I'm done here is, this guy is a guitarist. So, he asked me, like, is it possible to have a free app where Amplifier that he can play at home and all? So, now you can hear me? Hello? Yeah. Hello? Yeah. Okay, then Sushant asked me, like, do you have any free apps, like, any Amplifier that he can go and put it as guitar and just start playing and learn music? So, I was like, okay, let's give it a try and then I made this app. This is actually a crap thing. I know. So, but here it's actually I'm showing, like, I'm connecting this guitar and connect it to a browser and I'm using some JavaScript, like, cool stuff is called Web Audio and making his dream come true, like. So, like, so once more I'm going to talk about Web Audio API. It's like, the name is JavaScript is a DJ, but actually I like to make it JavaScript as a rockstar because I started with a DJ app but end with a rock app to, like, save the rock. So, yeah. And one thing is, like, my name is Jason, not Jason. Like, a lot of people say it's like Jason, oh, Jason. Yeah. So, before that Web Audio, we can go through the evolution of audio and web. You know, like in late 1996, I think Internet Explorer came with that BG, BG songs. Everybody who started STM at that time, they know the BG song. You put a source in that and when the page start loading, it start playing. There is no control of that. And later, then they come the Adobe Flash. It's like super cool stuff, a lot of things. Some, like, missiles going there, boom, a lot of games, a lot of interaction, a lot of stuffs in Flash. But, like, and, you know, Steve Jobs doesn't like Flash and later on, a lot of people at the same time, the HTML5 started introducing AudioTag. So, right now we have the AudioTag. It's like, okay, the AudioTag do is, like, it's help you by loading your music files and handle the buffering, it decode and start playing. You also get streaming facility. But still, what the question is, why you need a Web Audio stuff? So, the Web Audio is like, you know, there are a lot of musicians around there. I know a couple of people here who play guitar, tabla and all. But, for a musician, time is very precious, right? You want to, like, if you miss a time, not, you're lost. Then, that's one of the main point what Web Audio is giving. It's, like, precise timeline. And it's also, like, routing effects. Okay, there are a couple of effects nodes are there. You can make it effects. You can make it funky, rocket effects, a lot of good stuff that you can do that. So, these are the basic stuff. Like, you can also analyze the audio. Like, you connect to an audio source and you can analyze the audio and you can make beautiful visualization and things like that. Or you can download. Like, okay, you're playing something. If you want to record, you can use the analyzer to record the data. So, that's Web Audio API. It's, like, a brief note. Web Audio API is, like, some high-level JavaScript API. It was started by Google Chrome and W3, some people in W3C. And it's based on routing, audio routings, like, architecture or something. It's the basic architecture we used for almost all the audio apps. Hence, they're using the same architecture and same style of writing. And it's based on directive graph. Okay. So, and modern Web Audio is, like, you can use Web Audio and you can make beautiful games, audio processing applications. Like, Angry Bird right now, they're using Web Audio. Like, you can make some 3D games and all. It's very good. So, let's see how this, how we can do, like, how to make a simple snippet to play a song. Just, on the top, it's like, it's like audio context is written. It's actually, I'm initializing an audio context. And using the XHR, I'm loading an mp3 file and it's decoding, decoding the mp3 file. Then you will get the PCM data. So, and the decoder takes the PCM data and it will decode the data and keep it in the buffer. And here, actually, I created, I told you, it's like everything based on a direct graph. So, direct graph, there are nodes. So, all all the components of your Web Audio stuff are nodes. So, first you create this buffer source node and you say, okay, this is my buffer. Take the buffer and the Ajax will handle and the decoding part give the buffer and you say connect to the destination source. It's like the speaker. And you start playing. So, this is a symbol node. This actually looks like this. You have a source and destination. You just directly connect to that. But in between this source and destination, you can use, like you can add a lot of effects. You can a lot of, like, like low pass filters, high pass filters. They're actually built in, actually you come, Web Audio has come with all these filters and all you can use it your own. And this is like a code, small code snippet. It's like I'm saying, like you can schedule your time. Here it's actually in this loop, actually I'm saying, like, okay, take this buffer and play this particular mp3 file on each seconds. So, just context dot now. Here it's, you can see the context dot now. It's like taking the current context and add one more second to that. It's actually all the context and everything timing in Web Audio is in seconds. Not in milliseconds. It's in seconds. So, you can schedule, okay, say, like if somebody gonna hit the ender and in a game you can say, okay, then play the fire sound. You can schedule that. Okay, you just schedule, okay, after this time you change the background sound. You can schedule that easily without using your normal set timeout. And another interesting stuff is spatial. You can like you can create a 3D area like this and okay, I put some sound over there. And if I'm standing here, I can hear only some people voice. And if I, when I try to go and reach there, the sound gets started increasing and increasing. It's normally you can see like in 3D games. The game games that you play in 3D games you can see, like, if you go like if you walk around, you can see some voice coming around and if you pass the voice it start getting fading and fading and fading. So, the same thing you can like implement it in Web Audio. This is like small snippet showing that. This is actually I'm creating a panel and I'm setting the position of the panel. Okay, go to 0, 0, minus 30 and I'm setting, okay, I'm the current listener say x, y, z value. So, this is the spatial and the FX. FX is like super cool stuff. If you just start using the FX, it's like more what you can create beautiful stuff like what the app, what I made for you can make reverb for this amplifier application. You can create, you can handle like these are the basic filters that Web Audio is providing and you can play with all, you can combine each other, you know. So, yeah, if you go and more and more and into deep in Web Audio, you can find a lot of great stuff in Web Audio. It's like very beautiful, super cool stuff and you will get seriously you will get like everybody likes that because you can play around with that. It's like super cool thing. So, I think if people go and try it, then you will find that how super cool is JavaScript. That's all. You will be actually I was like in JavaScript right now more because actually it's JavaScript. It's not C, C++ nothing, it's JavaScript. It's actually from your browser and here is like some of resources what I use for preparing and all. Actually, the book written by Boris Moss is like a super cool book and it give a lot of information like 180 pages but you can read it in one stretch but you will get a big bunch of information about audio and Web Audio thing. The basic physics and all. And the community is like super cool community. You can take this URLs and go. The community is like super cool community, good support. Even in the night I just send a mail like hey Chris, I'm having this problem and Chris replied me in the morning oh man this is like very easy go and check this link. It's like super cool support and all. And yeah this one more demo. Let's see and this demo is I'm going to demo about spatial sound like I've just created a 3D area and I've just put some sound somewhere and you go and walk there you can feel that just hello and this app is called Ron Asylum something like Asylum and this is a 3D space where you can hear a background song music and some telephone is ringing but you don't know where is the telephone actually I put the telephone music behind the pillar and if you go to the pillar you can hear that the ring is getting high and high. Now if I move back the sound again is introduced so and if I go to this place there is some system activated or some fancy robotic noises this is actually so and this is actually a demo like you can make super cool 3D games thank you then you start creating 3D games like 3JS library is available there is super cool 3D library go and take the library and you have the web audio you can make like course if you have every game like call of duty you can make call of duty in your browser and you can play with your friend because yeah it's very easy to do that because there is simple coding you know and yeah thanks a lot Jason how did you read the MIDI input from using javascript? yeah I actually use that get use of media stream and you can enable and when you enable that you can see actually when I try to the net is too slow so when you try to do that there is some microphone will come in the top and it will ask you which source you want to make it as a microphone so it's connected using an USB and there I will get the option like which do I need to use the standard microphone on my lap or I need to use that so I take it as a USB and we pass to the buffer that's how I am going no no I am reading it from USB I didn't try it in MIDI it works because I have seen a demo by Chris Wilson he is using a MIDI DJ player and connecting it to the and he is reading from that yeah that doesn't use the audio stream I think that uses the gamepad API that uses the controller that comes with Xbox where he uses some very sure about the MIDI player and all have you done anything with speech to text app or have you done anything with speech to text app or cool are you aware of solutions yeah I was aware of that but I tried to do that but make it okay questions well the next guy is setting up so you have three minutes right let me ask you the question dude what are the problems you faced with this like it's obviously coming through a browser and the output performance on that isn't the best so what are the problems that you face problems actually the problems are like if you have the basic stuff like filters but the problem I face is how can I make this amp is actually just high pass filter but if he said he want attack and I was like what is attack this is like okay something in guitar you it's a super version of distortion exactly like okay then I need to know a little bit of physics and a little bit about sound and out and that's the basic problem but it's very easy like even I don't know anything about music I only used to listen to music it is like there are a lot of stuff like notes like in music and everything is specified in that manner like you can play this not in this not in this time and out and that's the only difficulty what I found in like I would understand the terms and the things in music that's all the problem but it feels it seems very very interesting actually it works in chrome and firefox it works on chrome it's working on firefox and opera is working and in iOS safari iOS 7 is supporting right now android and I see the microsoft guys I think web audio works in I actually the firefox they have a similar type of like web audio type of thing it's called audio data API but it gets integrated and right now they make it into standard any more questions big round of applause for jason justice everybody and this is the best audience I go to see doctor