Vue音频混音器组件 - vue-audio-mixer

Vue音频混音器组件 - vue-audio-mixer
插件名称 vue-audio-mixer
发布时间 2020年11月27日
插件作者 julescole

适用于Vue.js的应用程序的可自定义音频混音器组件。

安装和下载:

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

如何使用它:

1.将组件和必要的样式表导入项目。

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

2.将vue-audio-mixer组件添加到模板。

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

3.初始化音频混合器,并添加您自己的音轨,如下所示:

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;
    }
 
  }
}

变更日志:

v1.1.7(2020年12月28日)

  • 更新

v1.1.6(2020年12月16日)

  • 减少内存使用

v1.1.4(2020年12月15日)

  • 增加的最大宽度

v1.1.3(2020年12月14日)

  • 提高性能