An Audio Mixer Component Plugin for Vue.js

Audio Mixer is a customizable audio mixer component for your Vue.js application.

javascript audio mixer, audio mixer api, html audio mixer, vue audio mixer, javascript dj mixer, audio mixing website, node js audio mixer, audio name mixer online

Javascript Browser Audio Recorder From Web Page With jQuery | AudioRecorder

How to make use of it:

Install and download:

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

1. Import the necessary component and 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. Start 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;
    }
 
  }
}

Use directly from a CDN

<div id="app">
  <div>
    <div style="text-align: center;">

      <div style="position:relative; display: inline-block; ">
        <vue-audio-mixer 
            :config="config" 
            size="medium" 
            theme="dark" 
            :show-pan="true"
            :show-total-time="true"
        />
      </div>

    </div>

  </div>
</div>

Install via NPM

<template>

  <div>
    <div style="text-align: center;">

      <div style="position:relative; display: inline-block; ">
        <vue-audio-mixer 
          :config="config" 
          size="medium" 
          theme="dark" 
          :showPan="true"
          :showTotalTime="true"
        />
      </div>

    </div>

  </div>

</template>

Available props

Events

Audio Mixer Component Plugin/Github

See Demo And Download

Official Website(julescole): Click Here

This superior jQuery/javascript plugin is developed by julescole. For extra Advanced Usages, please go to the official website.