Audio Mixer Component For Vue - Flauto

Install & Download:

# NPM
$ npm i vue-audio-mixer --save

Description:

A customizable audio mixer component for your Vue.js powered app.

How to use it:

1. Import the component and necessary stylesheet into the project.

import VueAudioMixer from 'vue-audio-mixer';
import 'vue-audio-mixer/dist/vue-audio-mixer.min.css';

2. Add the vue-audio-mixer component to the template.

<vue-audio-mixer 
  :config="config" 
  size="medium" 
  @loaded="loadedChange"
  @input="setConfig" 
  :showPan="true"
  :showTotalTime="true"
/>

3. Initialize the audio mixer and add your own tracks as follows:

export default {
  name: 'App',
  components: {
    VueAudioMixer
  },
  data : function(){     
    return {
      is_loaded:false,
      newconfig:{},
      config: {
        "tracks":[
            {
                "title":"Title",
                "url":"/path/to/audio",
                "pan":-30,
                "gain":0.5,
                "muted":false,
                "hidden":false
            },
            {
                "title":"Title",
                "url":"/path/to/audio",
                "pan":81,
                "gain":1.08,
                "muted":false,
                "hidden":false
            }
        ],
        "master":{
            "pan":0,
            "gain":1,
            "muted":false
        }
      }
    }  
  },
  created(){
    this.newConfig = this.config;
 
  },
  beforeDestroy() {
  },
  methods:{
    loadedChange(loaded)
    {
      this.is_loaded = loaded;
    },
 
    setConfig(newVal)
    {
      this.newConfig = newVal;
    }
 
  }
}