帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue.js(vue-audio-mixer)音频播放器组件

帝国模板之家 2020-12-28 网页特效 评论

描述:

适用于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;
    }
 
  }
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言