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.
The final project can be viewed on Codesandbox.
You can find the complete source code on my Github repository.
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.
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:
yarn create nuxt-app nuxtjs-video-to-audio-converter
# OR
npx create-nuxt-app nuxtjs-video-to-audio-converter
# OR
npm init nuxt-app nuxtjs-video-to-audio-converter
Code language: PHP (php)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:
cd nuxtjs-video-to-audio-converter
yarn dev
# OR
npm run dev
Code language: PHP (php)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:
yarn add @nuxtjs/cloudinary
# OR
npm install @nuxtjs/cloudinary
Code language: CSS (css)Add the package in the modules section of our nuxt.config.js file:
// nuxt.config.js
export default {
...
modules: [
'@nuxtjs/cloudinary'
]
...
}
Code language: JavaScript (javascript)To configure our project, let’s add a cloudinary section to the same file:
// nuxt.config.js
export default {
...
cloudinary: {
cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,
useComponent: true
}
}
Code language: JavaScript (javascript)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
touch .env
Code language: CSS (css)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.
<!-- .env -->
NUXT_ENV_CLOUDINARY_CLOUD_NAME=<cloudinary-cloud-name>
Code language: HTML, XML (xml)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.
<!-- pages/index.vue -->
<template>
...
<form action="#" @submit.prevent="submit" >
...
<input
accept="video/*"
@change="handleFile"
id="file"
type="file"
/>
...
<p v-if="uploading" >
Uploading...
</p>
...
<button v-else type="submit">
Upload
</button>
...
</form>
...
</template>
Code language: HTML, XML (xml)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.
// pages/index.vue
<script>
export default {
data() {
return {
uploading: false,
video: null,
cloudinaryVideo: null,
};
},
...
methods: {
async handleFile(e) {
this.video = e.target.files[0];
},
async readData(f) {
return new Promise((resolve) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result);
reader.readAsDataURL(f);
});
},
async submit() {
this.uploading = true;
const videoData = await this.readData(this.video);
this.cloudinaryVideo = await this.$cloudinary.upload(videoData, {
upload_preset: "default-preset",
folder: "nuxtjs-video-to-audio-converter",
});
this.uploading = false;
},
},
};
</script>
Code language: HTML, XML (xml)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
To obtain the audio track, we are going to apply the format transformation casting the upload from video to audio format.
// pages/index.vue
<script>
export default {
...
computed: {
audioUrl() {
return this.cloudinaryVideo
? this.$cloudinary.video.url(this.cloudinaryVideo.public_id, {
format: "mp3",
})
: "";
},
},
...
};
</script>
Code language: HTML, XML (xml)We will use the above-computed property to render the audio player as well as a download button.
<!-- pages/index.vue -->
...
<div v-if="cloudinaryVideo">
<audio controls autoplay>
<source :src="audioUrl" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<a :href="audioUrl" target="_blank" >
Download
</a>
</div>
...
Code language: HTML, XML (xml)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.
