F2eAudio

音频组件，用于音频处理。

使用

<F2eAudio ref="f2eAudio"></F2eAudio>

import { F2eAudio } from '@go/ui';

export default defineComponent({
  components: {
    F2eAudio,
  },
  methods:{
    audioCtrl(name?, state:boolean = true, loopOrResume:boolean = false, fadeDuration:number = 0){
      Reflect.get(this.$refs,'f2eAudio').audioCtrl(name, state, loopOrResume, fadeDuration);
    },
  }
})

vite3 setup 常用写法

<F2eAudio
  :audioAssets="audioAssets"
  ref="f2eAudio"
  autoPlay
  webAudio
  controls
></F2eAudio>

<script setup lang="ts">
  import { F2eAudio } from "@go/ui";
  import { ref, provide } from "vue";
  
  const audioAssets = import.meta.glob("./assets/**/*.mp3", { eager: true });
  const f2eAudio = ref(null);
  const audioCtrl = (
    name?,
    state: boolean = true,
    loopOrResume?: boolean = false,
    fadeDuration: number = 0
  ) => {
    f2eAudio.value.audioCtrl(name, state, loopOrResume, fadeDuration);
  };
  provide("audioCtrl", audioCtrl);
  
</script>

展现默认样式

<F2eAudio controls></F2eAudio>

TIP

如果想在部分页面隐藏音乐按钮，请使用 v-show 而不是 v-if。

传入音频资源

<F2eAudio :audioAssets="audioAssets"></F2eAudio>

// vite2
const audioAssets = import.meta.globEager('./assets/**/*.mp3');

// vite3
const audioAssets = import.meta.glob('./assets/**/*.mp3', { eager: true });

export default defineComponent({
  data(){
    return {
      audioAssets: audioAssets, // 默认读取 assets 下所有 mp3 资源
    }
  },
})

TIP

可以不配置，默认读取 assets 下所有 mp3 资源。

传入 CDN 音频资源

初始化时传入

在此传入的资源会进行 loading 处理。

<F2eAudio :audioAssets="audioAssets"></F2eAudio>

// vite2
const audioAssets = import.meta.globEager('./assets/**/*.mp3');

// vite3
const audioAssets = import.meta.glob('./assets/**/*.mp3', { eager: true });

Object.assign(audioAssets, {
  'audioAssetsName': 'https://sales.ws.126.net/f2e/20220126_audio_test/assets/fireworks_single.0d369df8.mp3',
})

export default defineComponent({
  data(){
    return {
      audioAssets: audioAssets,
    }
  },
})

执行时传入

在此传入的资源不会进行 loading 处理。

<F2eAudio ref="f2eAudio" />

export default defineComponent({
  mounted(){
    Reflect.get(this.$refs,'f2eAudio').addAudioAssets({
      'audioAssetsName': 'https://sales.ws.126.net/f2e/20220126_audio_test/assets/fireworks_single.0d369df8.mp3',
    })
  },
})

背景音乐自动播放

<F2eAudio autoPlay :bgmName="bgmName"></F2eAudio>

export default defineComponent({
  data(){
    return {
      bgmName: 'bgm', // 默认值
    }
  },
})

TIP

bgmName 可以不写，默认值为 bgm，自动播放仅支持微信与 IOS 网易新闻客户端。

自定义音乐按钮样式

<F2eAudio v-slot="{audioStatus}">
  <div class="music" :class="audioStatus" @click="audioCtrl"></div>
</F2eAudio>

.music .f2e-audio-icon{
  &.normal{
  }
  &.active{
  }
}

TIP

使用此方式，会覆盖 controls 的样式，可以去除 controls 属性。

修改默认样式

:deep(.f2e-audio) .f2e-audio-icon{
  &.normal{
  }
  &.active{  
  }
}

使用 WebAudio

<F2eAudio webAudio></F2eAudio>

不预加载音频资源

<F2eAudio :preload="false"></F2eAudio>

手动加载资源：

Reflect.get(this.$refs,'f2eAudio').audioPreload(); // 加载所有资源

Reflect.get(this.$refs,'f2eAudio').audioPreload('audio_click'); // 加载名为 audio_click 的音频资源

Reflect.get(this.$refs,'f2eAudio').audioPreload(['audio_click', 'audio_result']); // 可传资源名称的数组

控制音频的方法

提供音频控制的内置方法。

audioCtrl

export default defineComponent({
  methods:{
    audioCtrl(name?, state:boolean = true, loopOrResume:boolean = false, fadeDuration:number = 0){
      Reflect.get(this.$refs,'f2eAudio').audioCtrl(name, state, loopOrResume, fadeDuration);
    },
  }
})

音频控制的合集方法，不传值，为音乐开关按钮的点击事件；
name：资源名称，如 ./assets/audio/click.mp3 则传 click 值；
state: 状态，播放 true，暂停 false ，默认 true;
loopOrResume: 当 state 为 true 时，该值用来设定音频是否循环；
loopOrResume: 当 state 为 false 时，该值用来设定是否记录当前的播放时间，仅在 webAudio 下使用；
fadeDuration: 音频渐入渐出的时间，单位 s，仅在 webAudio 下使用；

audioPause

export default defineComponent({
  methods:{
    audioPause(name?, resume:boolean = false, fadeDuration:boolean = 0){
      Reflect.get(this.$refs,'f2eAudio').audioPause(name, resume, fadeDuration);
    },
  }
})

音频暂停的方法，该方法会跳过音乐 Icon 状态的限制；
name：资源名称，如 ./assets/audio/click.mp3 则传 click 值；
resume: 是否记录当前的播放时间，仅在 webAudio 下使用;
fadeDuration: 音频渐入渐出的时间，单位 s，仅在 webAudio 下使用；

audioPlay

export default defineComponent({
  methods:{
    audioPlay(name?, loop:boolean = false, fadeDuration:boolean = 0){
      Reflect.get(this.$refs,'f2eAudio').audioPlay(name, loop, fadeDuration);
    },
  }
})

音频播放的方法，该方法会跳过音乐 Icon 状态的限制；
name：资源名称，如 ./assets/audio/click.mp3 则传 click 值；
loop: 设定音频是否循环，默认 false;
fadeDuration: 音频渐入渐出的时间，单位 s，仅在 webAudio 下使用；

audioPauseAll

export default defineComponent({
  methods:{
    audioPauseAll(){
      Reflect.get(this.$refs,'f2eAudio').audioPauseAll();
    },
  }
})

暂停所有正在播放的音频；

audioReplay

export default defineComponent({
  methods:{
    audioReplay(name,loop:boolean = false){
      Reflect.get(this.$refs,'f2eAudio').audioReplay(name,loop);
    },
  }
})

DOM 音频暂停后从头播放；

audioPreload

export default defineComponent({
  methods:{
    audioPreload(names?){
      Reflect.get(this.$refs,'f2eAudio').audioPreload(names);
    },
  }
})

手动加载音频资源的方法，names 参数类型可选；
空：加载所有资源；
String: 资源文件名称;
Array[String]: 数组，数组元素为资源文件名称；

F2eAudio #

使用 #

vite3 setup 常用写法 #

展现默认样式 #

传入音频资源 #

传入 CDN 音频资源 #

初始化时传入 #

执行时传入 #

背景音乐自动播放 #

自定义音乐按钮样式 #

修改默认样式 #

使用 WebAudio #

不预加载音频资源 #

控制音频的方法 #

audioCtrl #

audioPause #

audioPlay #

audioPauseAll #

audioReplay #

audioPreload #