Integrating YouTube’s API on Angular to download music without a backend.
Clemenshemmerling
Posted on September 17, 2021
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
To create this connection we will follow the steps in this link:
https://kor-comunity.gitlab.io/kor-connect/adir/GETSTARTED.html
If you would like, you can test your connection with Postman or another API testing tool.
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
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.”
Then click the “Snippets” tab and select the angular snippet.
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 is some additional information pertaining to Testing and Production Modes on KOR Connect.
We have our app to download music from YouTube using KOR Connect.
https://youtube-to-mp3.kor-test.com
Posted on September 17, 2021
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
September 17, 2021