Bootstrap

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(); //播放
  }
};
;