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-converter23# OR45npx create-nuxt-app nuxtjs-video-to-audio-converter67# OR89npm 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-converter23yarn dev45# OR67npm 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/cloudinary23# OR45npm install @nuxtjs/cloudinary
Add the package in the modules
section of our nuxt.config.js
file:
1// nuxt.config.js23export default {45...67modules: [89'@nuxtjs/cloudinary'1011]1213...1415}
To configure our project, let's add a cloudinary
section to the same file:
1// nuxt.config.js23export default {45...67cloudinary: {89cloudName: process.env.NUXT_ENV_CLOUDINARY_CLOUD_NAME,1011useComponent: true1213}1415}
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 -->23NUXT_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 -->23<template>45...67<form action="#" @submit.prevent="submit" >89...1011<input1213accept="video/*"1415@change="handleFile"1617id="file"1819type="file"2021/>2223...2425<p v-if="uploading" >2627Uploading...2829</p>3031...3233<button v-else type="submit">3435Upload3637</button>3839...4041</form>4243...4445</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.vue23<script>45export default {67data() {89return {1011uploading: false,1213video: null,1415cloudinaryVideo: null,1617};1819},2021...2223methods: {2425async handleFile(e) {2627this.video = e.target.files[0];2829},3031async readData(f) {3233return new Promise((resolve) => {3435const reader = new FileReader();3637reader.onloadend = () => resolve(reader.result);3839reader.readAsDataURL(f);4041});4243},4445async submit() {4647this.uploading = true;4849const videoData = await this.readData(this.video);5051this.cloudinaryVideo = await this.$cloudinary.upload(videoData, {5253upload_preset: "default-preset",5455folder: "nuxtjs-video-to-audio-converter",5657});5859this.uploading = false;6061},6263},6465};6667</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.vue23<script>45export default {67...89computed: {1011audioUrl() {1213return this.cloudinaryVideo1415? this.$cloudinary.video.url(this.cloudinaryVideo.public_id, {1617format: "mp3",1819})2021: "";2223},2425},2627...2829};3031</script>
We will use the above-computed property to render the audio player as well as a download button.
1<!-- pages/index.vue -->23...45<div v-if="cloudinaryVideo">67<audio controls autoplay>89<source :src="audioUrl" type="audio/mpeg" />1011Your browser does not support the audio element.1213</audio>1415<a :href="audioUrl" target="_blank" >1617Download1819</a>2021</div>2223...
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.