【记录11】微信浏览器打开H5首页自动播放音频（Vue3）（howler.js）_浏览器,自动播放声音

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

介绍  howler.js

Howler.js 是一个专注于Web音频处理的开源JavaScript库，由James Simpson开发并维护。howler.js 使在所有平台上使用 JavaScript 中的音频变得简单可靠。

1、安装howler.js

安装howler.js，我是用uniapp(vue3)写的H5，在项目中直接npm安装

npm install howler
2、项目中引入
 
import { Howl } from 'howler';
3、实例化Howl
 
	const soundBgm = new Howl({
		src: ['bgm.mp3','bgm.webm','bgm.ogg'],// 提供多个格式
		autoplay: true, // 是否自动播放，默认为false
  		loop: true, // 是否循环播放，默认为false
		volume: 0.5, // 音量大小，范围是0-1，默认为1
 		preload: true // 是否预加载音频，默认为true
		onplay: function() {
			console.log('播放')
		onpause: function() {
			console.log('暂停')
		onstop: function() {
			console.log('停止')
4、微信浏览器打开页面自动播放
 
 音频资源 load 之后通过微信桥接触发播放 
	//你可以写在onLoad或onShow中，我这是写在setup中
	soundBgm.on('load', () => {
		window.WeixinJSBridge && window.WeixinJSBridge.invoke('getNetworkType', {}, () => {
			soundBgm.play();
		}, false);
function getMusic(el, showMusic = true) {
    var className = 'play'
    // var trigger = 'ontouchend' in document ? 'touchstart' : 'click'
    var $musci = document.createElement('div')
    $myaudio.
				之前一直用微信的jssdk监听：也就是网上常用的代码
<audio style="; height: 0" id="mymusic" preload="auto" src="../static/videos/bg-music.mp3" loop="loop"></audio>
function audioAutoPlay(id){  
   var audio = document.getElementById(id);  
    audio.play()
				【记录2】in ./node_modules/vuex/dist/vuex.esm-bundler.js export ‘inject‘ (imported as ‘inject‘) was not