A plug and play audio plugin for Motion Canvas
npm install motion-canvas-multitrackbash
npm init @motion-canvas@latest
`
Next install the npm package motion-canvas-multitrack
`bash
npm i motion-canvas-multitrack
`
After successfully installing the plugin, create an empty audio folder where audio files will be stored and created:
`
project/
* ├── audio/
├── node_modules/
├── public/
├── src/
├── .gitignore
├── package-lock.json
├── package.json
├── tsconfig.json
└── vite.config.ts
`
Next, go to the src/project.ts file and import MultiTrack() from motion-canvas-multitrack/editor-plugin. Note that experimentalFeatures is added and set to true
`ts
import { makeProject } from '@motion-canvas/core'
import example from './scenes/example?scene'
import MultiTrack from 'motion-canvas-multitrack/editor-plugin';
export default makeProject({
plugins: [MultiTrack()],
experimentalFeatures: true,
scenes: [example],
});
`
For the final step, open the config file vite.config.ts and add MultiTrackPlugin(). This plugin is responsible for fetching the audio files. Don't forget to add /audio/multi-track.json and /audio/ in the ignored array.
`ts
import MultiTrackPlugin from './MultiTrack/vite/backend'
import ffmpeg from '@motion-canvas/ffmpeg'
import { defineConfig } from 'vite'
import MultiTrackPlugin from 'motion-canvas-multitrack';
export default defineConfig({
plugins: [
MultiTrackPlugin(),
motionCanvas(),
ffmpeg(),
],
server: {
watch: {
ignored: ["/audio/multi-track.json", "/audio/"]
}
}
});
`
Start the server with npm start and if everything went well, a new tab has appeared in the left panel. You can now begin adding audio files to the audio folder.
Rendering
To render with the audio from MultiTrack, go to the video settings tab and select MultiTrack` in the dropdown in Rendering
|