DEV Community

Cover image for Integrating YouTube’s API on Angular to download music without a backend.
Clemenshemmerling for KOR Connect

Posted on • Updated on

Integrating YouTube’s API on Angular to download music without a backend.

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

Create a KOR Connect account here if you don’t already have one https://korconnect.io
Alt Text

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

https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html

Alt Text

If you would like, you can test your connection with Postman or another API testing tool.
Alt Text

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

ng new youtube-to-mp3
Enter fullscreen mode Exit fullscreen mode

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

ng add @angular/material
Enter fullscreen mode Exit fullscreen mode

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

https://material.angular.io/

Finally, we will create our home component, for this, we will use the following command:

ng generate component home
Enter fullscreen mode Exit fullscreen mode

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

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

Alt Text

Alt Text

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 = '';  
        });  
    });  
  }  
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;  
  }  
}
Enter fullscreen mode Exit fullscreen mode

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 is some additional information pertaining to Testing and Production Modes on KOR Connect.

Alt Text

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

https://youtube-to-mp3.kor-test.com

Alt Text

Discussion (0)