更新记录

2.0.0(2022-01-28)

更新支持 uni_modules规范。修复部分手机无法自动播放

1.0.1(2021-07-23)

版本上线,有问题可以留言,持续更新


平台兼容性

Vue2 Vue3
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

插件介绍

插件原理

在微信浏览器中打开会调用微信浏览器独有的 api ,此 api 会有一个回调事件,把播放音频的函数放在回调用可以欺骗浏览器以为是用户触发的事件,这样就可以实习播放打开自动播放。

当前部分浏览器开始检测到微信的回调,检测到后就会判断出不是用户触发的事件,导致部分手机无法自动播放了。解决办法就是在用户打开页面的时候在页面上放置一层透明的元素,只要用户手指触摸或者滑动到屏幕就会调用播放音频。

使用环境

本插件只支持H5平台

插件使用

插件已支持 uni_modules 支持组件easycom,以下代码演示的是普通使用

改变图片与位置直接去修改源码即可,就懒得写props了

单页面使用

单页面使用比较简单,直接导入注册即可

<!-- HTML -->
<!-- musicSrc 传入音频链接,本地文件需要已根目录开头传递。如:/static/music.mp3 -->
<mumu-music musicSrc='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'></mumu-music>
// js
import mumuMusic from '@/uni_modules/mumu-music/components/mumu-music/mumu-music.vue'
    export default {
        components: {
            mumuMusic
        }
  }

多页面使用

应无法在 App.vue 中直接写入元素,只有另辟蹊径在 main.js 中进行注册,使用 js 代码追加到 body 中。

// main.js 中的代码
import mumuMusic from '@/uni_modules/mumu-music/components/mumu-music/mumu-music.vue'
// Vue.component 需要放在导入 Vue 之后即可。 Vue3同理
let mumuMusicEl = Vue.component('mumu-music', mumuMusic)
mumuMusicEl = new mumuMusicEl()
// musicSrc 传入音频链接,本地文件没有试过,大家可以试试
mumuMusicEl.$props.musicSrc='https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3'
mumuMusicEl = mumuMusicEl.$mount().$el
// 下面代码防止被网站抹去,加了个 :: 大家记得删除。注意!!!
document.body.append::Child(mumuMusicEl)

相关 API

可传属性(Props)

参数 说明 类型 默认值
sizi 图标大小(rpx) Number | String 80
musicSrc 音频链接(本地需要绝对路径) String 默认的音频链接
autoplay 是否自动播放 Boolean true

案例演示

img

支持作者

支持作者

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问