vue项目微信邀请函音乐组件自动播放

1.下载howler

npm i howler

2.在使用的组件引入

 import { Howl } from 'howler';

使用audio标签测试，在安卓上面不能自动播放（IOS没有测试），就算加上微信的监听事件也是不行，改成下面这种IOS和安卓都可以正常播放，完整代码如下： 

<template>
  <div>音乐组件</div>
  <button @click="handlerPause">暂停</button>
</template>
<script setup>
import { Howl } from 'howler';
import assetsBgm from './llh.mp3';
const isPause = ref(false);
// Web Audio 初始化
const soundBgm = new Howl({
  src: [assetsBgm],
  loop: true,
  preload: true,
});

// 音频资源 load 之后通过微信桥接触发播放
soundBgm.on('load', () => {
  window.WeixinJSBridge &&
    window.WeixinJSBridge.invoke(
      'getNetworkType',
      {},
      () => {
        soundBgm.play();
      },
      false,
    );
});
const handlerPause = () => {
  console.log('暂停');
  // soundBgm.stop();//停止
  soundBgm.pause(); //暂停
  if (isPause.value) soundBgm.play();
  isPause.value = !isPause.value;
};
console.log('soundBgm====', soundBgm);
</script>
<style lang="less" scoped></style>