Howler.js音频播放终极解决方案(可自动播放)

官网: https://howlerjs.com/

主要特点：*可以设置成自动声音播放。*而无需点击

支持的格式：
支持很多音频格式以兼容各种浏览器。具体有：MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.

其他特性：
–支持3D游戏
–自动缓存
–支持淡入淡出效果
–轻量
–纯JS
–无第三方依赖
–模块化

1.安装

npm install howler

vue3 使用

import { Howl } from "howler";

const flag = ref(true);

const sound = new Howl({
  src: ["christmas.mp3"],
  autoplay: true,
  loop: true,
  volume: 1,
  onend: function () {
    console.log("Finished!");
  },
});

const click = () => {
  if (flag.value) {
    flag.value = false;
    sound.pause(); // 暂停
  } else {
    flag.value = true;
    sound.play(); //播放
  }
};