Integrating YouTube’s API on Angular to download music without a backend.
Tags: angular, node, serverless, aws
Published: 2021-09-17 00:31:32

We will create a web app to download music from YouTube using KOR Connect.
--------------------------------------------------------------------------

The first thing we will have to do is create a connection between KOR Connect and the YouTube API.

The YouTube API can be found here [https://rapidapi.com/ytjar/api/youtube-mp36/-lex.europa.eu](https://rapidapi.com/ytjar/api/youtube-mp36/-lex.europa.eu)

Create a KOR Connect account here if you don’t already have one [https://korconnect.io](https://korconnect.io)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tb6fzpmgzb2nom7kvn46.png)



To create this connection we will follow the steps in this link:

[https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html](https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0sjxzulpdjzdyiyjg3p.png)

If you would like, you can test your connection with Postman or another API testing tool.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuq67dr9ic15n6l6d2x2.png)

Now we will create our project in Angular, for this, we will use the following command.

```
ng new youtube-to-mp3
```

Now we will install a library to give styles to our app, for this we will use the command:

```
ng add @angular/material
```

Here is the link to the documentation of how we integrated the library in the project

[https://material.angular.io/](https://material.angular.io/)

Finally, we will create our _home component_, for this, we will use the following command:

```
ng generate component home
```

Once our Angular project is created we will go to KOR Connect and navigate into the YouTube API connection, then select “View Details.”

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/86z5gl58ubkiqql0rsn7.png)

Then click the “Snippets” tab and select the angular snippet.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dj4by2v53vwqi88nwe7.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bezqgjwx57buetvzp354.png)

Inside this snippet, it will ask us to install some libraries. After we install the libraries we will configure our project as indicated by the snippet.

Once everything is configured we will now modify the code to adapt it to the functionality of our Angular app.

The first thing we must do is change the name of the requestApi to createLink, we will add some variables to save the API response in the home.component.ts file, our code should look like this:

```
import { Component, OnInit } from '[@angular/core](http://twitter.com/angular/core)';  
import { ReCaptchaV3Service } from 'ngx-captcha';  
import { HttpClient } from '[@angular/common](http://twitter.com/angular/common)/http';[@Component](http://twitter.com/Component)({  
  selector: 'app-home',  
  templateUrl: './home.component.html',  
  styleUrls: \['./home.component.scss'\],  
})  
export class HomeComponent implements OnInit {  
  siteKey: string = 'yourSnippetSiteKey';  
  URL: string = '';  
  loader: boolean = false;  
  info: any = null;constructor(  
    private reCaptchaV3Service: ReCaptchaV3Service,  
    private http: HttpClient  
  ) {}ngOnInit(): void {}createLink() {  
    this.loader = true;  
    this.info = null;  
    this.reCaptchaV3Service.execute(this.siteKey, 'homepage', (token) => {  
      const headers = {  
        token,  
        'x-api-key': 'yourSnippetXAPIKey',  
      };let code;if (this.URL.includes('youtube.com')) {  
        code = this.URL.replace('[https://www.youtube.com/watch?v='](https://www.youtube.com/watch?v='), '');  
      }if (this.URL.includes('youtu.be')) {  
        code = this.URL.replace('[https://youtu.be/'](https://youtu.be/'), '');  
      }this.http  
        .get(  
          \`[https://yourSnippetURL/dl?id=${code}\`](https://clemensk.korconnect.io/youtube-music/dl?id=${code}`),  
          { headers }  
        )  
        .subscribe((response) => {  
          this.info = response;  
          this.loader = false;  
          this.URL = '';  
        });  
    });  
  }  
}
```

Now we will add our UI interface to app.component.html, the code should look like this:

```
<mat-card>  
  <form class="example-form">  
    <mat-form-field class="example-full-width" appearance="fill">  
      <mat-label>PASTE THE YOUTUBE LINK HERE</mat-label>  
      <input matInput placeholder="URL" name="URL" \[(ngModel)\]="URL" />  
    </mat-form-field>  
  </form>  
  <div class="example-button-container">  
    <button mat-fab color="primary" (click)="createLink()">  
      <mat-icon>library\_music</mat-icon>  
    </button>  
  </div>  
</mat-card>  
<div class="container">  
  <div class="middle" \*ngIf="loader">  
    <div class="bar bar1"></div>  
    <div class="bar bar2"></div>  
    <div class="bar bar3"></div>  
    <div class="bar bar4"></div>  
    <div class="bar bar5"></div>  
    <div class="bar bar6"></div>  
    <div class="bar bar7"></div>  
    <div class="bar bar8"></div>  
  </div>  
  <div class="info" \*ngIf="info">  
    <h4>{{info.title}}</h4>  
    <a mat-raised-button href="{{info.link}}" color="warn">  
      Download  
      <mat-icon>file\_download</mat-icon>  
    </a>  
  </div>  
</div>
```

Finally, we will add the necessary styles inside the home.component.scss file, the code should look like this:

```
mat-form-field {  
  width: 100%;  
}.info.ng-star-inserted {  
    margin: 25% 0;  
    text-align: center;  
}body {  
  margin: 0;  
  padding: 0;  
  box-sizing: border-box;  
  background: #000;  
}.middle {  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%);  
  position: absolute;  
}.bar {  
  width: 10px;  
  height: 70px;  
  background: #fff;  
  display: inline-block;  
  transform-origin: bottom center;  
  border-top-right-radius: 20px;  
  border-top-left-radius: 20px;  
  /\*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); \*/  
  animation: loader 1.2s linear infinite;  
}.bar1 {  
  animation-delay: 0.1s;  
}.bar2 {  
  animation-delay: 0.2s;  
}.bar3 {  
  animation-delay: 0.3s;  
}.bar4 {  
  animation-delay: 0.4s;  
}.bar5 {  
  animation-delay: 0.5s;  
}.bar6 {  
  animation-delay: 0.6s;  
}.bar7 {  
  animation-delay: 0.7s;  
}.bar8 {  
  animation-delay: 0.8s;  
}[@keyframes](http://twitter.com/keyframes) loader {  
  0% {  
    transform: scaleY(0.1);  
  }50% {  
    transform: scaleY(1);  
    background: yellowgreen;  
  }100% {  
    transform: scaleY(0.1);  
    background: transparent;  
  }  
}
```

Once we are ready to deploy the project to production we have to change the Connection Mode from Test Mode to Production Mode, this will turn on additional security.

[Here](https://kor-comunity.gitlab.io/kor-connect/adir/TESTINGPRODUCTIONMODES.html) is some additional information pertaining to Testing and Production Modes on KOR Connect.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6erjn1e9idfzd0kqym3k.png)

We have our app to download music from YouTube using KOR Connect.

[https://youtube-to-mp3.kor-test.com](https://youtube-to-mp3.kor-test.com/)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isf894123toj1r88cle0.png)