Vue.js（vue-audio-mixer）音频播放器组件

 website 下载

描述：

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

使用方法

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