Introduction

Extracting the audio track from existing videos can be very useful. This is for example when we want to make our video playlists accessible on the go in audio format. Without any server-side code, let’s explore how we can easily get audio tracks from videos.

Codesandbox

The final project can be viewed on Codesandbox.

You can find the complete source code on my Github repository.

Requirements

To be able to follow along with this tutorial, knowledge of HTML, CSS, and JavaScript is recommended. Vue.Js knowledge is not required but would be helpful.

Setup

Nuxt.Js project

Nuxt.Js is an intuitive Vue.Js framework. It boasts to make web development simpler and more powerful by being easier to learn, master, and more powerful. To set up our project, you are required to have installed Yarn and NPM v5.2+ or v6.1+. We will use the create-nuxt-app utility, open the terminal in your working directory of preference:

1yarn create nuxt-app nuxtjs-video-to-audio-converter
2
3# OR
4
5npx create-nuxt-app nuxtjs-video-to-audio-converter
6
7# OR
8
9npm init nuxt-app nuxtjs-video-to-audio-converter

This will trigger a series of prompts aimed at customizing the project for you. Here are our recommended defaults:

Project name: nuxtjs-video-to-audio-converter

Programming language: JavaScript

Package manager: Yarn

UI framework: TailwindCSS

Nuxt.js modules: N/A

Linting tools: N/A

Testing frameworks: None

Rendering mode: Universal (SSR / SSG)

Deployment target: Server (Node.js hosting)

Development tools: N/A

What is your Github username: <your-github-username>

Version control system: Git

Once the setup is complete, feel free to run it:

1cd nuxtjs-video-to-audio-converter
2
3yarn dev
4
5# OR
6
7npm run dev

@nuxtjs/cloudinary

Cloudinary is a media management platform with powerful SDKs and APIs. These integration tools allow us to make the most of our content. Let us install the recommended Nuxt.Js plugin @nuxtjs/cloudinary:

1yarn add @nuxtjs/cloudinary
2
3# OR
4
5npm install @nuxtjs/cloudinary

Add the package in the modules section of our nuxt.config.js file:

1// nuxt.config.js
2
3export  default  {
4
5...
6
7modules: [
8
9'@nuxtjs/cloudinary'
10
11]
12
13...
14
15}

To configure our project, let's add a cloudinary section to the same file:

1// nuxt.config.js
2
3export  default  {
4
5...
6
7cloudinary: {
8
9cloudName:  process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
10
11useComponent:  true
12
13}
14
15}

We can see in the snippet above we reference a NUXT_ENV_CLOUDINARY_CLOUD_NAME variable from our environment. These are referred to as environment variables. They allow us to configure variables in our environment rather than in our codebase. This can be either for security reasons or because the values are dependent on the environment our project is deployed in.

To create our env file which stores our variable, create a .env file in the root folder of the project

1touch .env

Now we can add our variables. You can find your Cloudinary cloud name in your account dashboard. If you don't have an account, feel free to register here.

1<!-- .env -->
2
3NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>

Uploading our video file

To extract the audio track from the video, we will first upload the video onto Cloudinary, our media management platform. We will start by creating a simple HTML upload form.

1<!-- pages/index.vue -->
2
3<template>
4
5...
6
7<form action="#"  @submit.prevent="submit"  >
8
9...
10
11<input
12
13accept="video/*"
14
15@change="handleFile"
16
17id="file"
18
19type="file"
20
21/>
22
23...
24
25<p v-if="uploading"  >
26
27Uploading...
28
29</p>
30
31...
32
33<button v-else  type="submit">
34
35Upload
36
37</button>
38
39...
40
41</form>
42
43...
44
45</template>

As configured in the project, the handleFile method will be triggered once we select a file. This method will save the file in our state. On form submission, the submit method will be triggered. This is the method responsible for uploading the file to Cloudinary.

1// pages/index.vue
2
3<script>
4
5export default {
6
7data()  {
8
9return {
10
11uploading:  false,
12
13video:  null,
14
15cloudinaryVideo:  null,
16
17};
18
19},
20
21...
22
23methods: {
24
25async  handleFile(e)  {
26
27this.video  =  e.target.files[0];
28
29},
30
31async  readData(f)  {
32
33return new Promise((resolve)  =>  {
34
35const  reader  =  new  FileReader();
36
37reader.onloadend  =  ()  =>  resolve(reader.result);
38
39reader.readAsDataURL(f);
40
41});
42
43},
44
45async  submit()  {
46
47this.uploading  =  true;
48
49const videoData  =  await  this.readData(this.video);
50
51this.cloudinaryVideo  =  await  this.$cloudinary.upload(videoData,  {
52
53upload_preset:  "default-preset",
54
55folder:  "nuxtjs-video-to-audio-converter",
56
57});
58
59this.uploading  =  false;
60
61},
62
63},
64
65};
66
67</script>

The submit method reads the data from the file and sends it to the nuxtjs-video-to-audio-converter folder in Cloudinary. This is done by utilizing the default-preset upload preset. To create the upload preset, open the create upload preset page. We recommend using the following defaults:

Name: default-preset

Signing mode: Unsigned

Unique filename: True

Delivery type: Upload

Access mode: Public

Obtaining audio track

To obtain the audio track, we are going to apply the format transformation casting the upload from video to audio format.

1// pages/index.vue
2
3<script>
4
5export default {
6
7...
8
9computed: {
10
11audioUrl()  {
12
13return  this.cloudinaryVideo
14
15?  this.$cloudinary.video.url(this.cloudinaryVideo.public_id,  {
16
17format:  "mp3",
18
19})
20
21:  "";
22
23},
24
25},
26
27...
28
29};
30
31</script>

We will use the above-computed property to render the audio player as well as a download button.

1<!-- pages/index.vue -->
2
3...
4
5<div v-if="cloudinaryVideo">
6
7<audio controls  autoplay>
8
9<source :src="audioUrl"  type="audio/mpeg"  />
10
11Your browser does not support the audio element.
12
13</audio>
14
15<a :href="audioUrl"  target="_blank"  >
16
17Download
18
19</a>
20
21</div>
22
23...

Conclusion

We can do much more after extracting the audio track as well. Cloudinary's documentation is a good resource to help us understand what is possible. Dive in and learn Cloudinary's value to your platform.