IOS在微信app内访问uni-app H5无法静音播放音频

IOS在微信app内访问uni-app H5无法静音播放音频

开发环境 版本号 项目创建方式
Windows Windows 11 家庭中文版23H2 HBuilderX 
产品分类：uniapp/H5

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：4.66

浏览器平台：微信内置浏览器

浏览器版本：不明

示例代码：
```html
<template>
<button [@click](/user/click)="playAudioVolume0">静音播放</button>
<button [@click](/user/click)="playAudioVolume1">播放声音</button>
</template>  
<script setup>
import { ref } from 'vue';
import { onLoad } from '[@dcloudio](/user/dcloudio)/uni-app'
let audioInstance = ref(null)
onLoad(()=>{
initAudio()
})
const initAudio = ()=>{
audioInstance.value = uni.createInnerAudioContext()
audioInstance.value.src = "/static/14141.mp3"
audioInstance.value.volume = 0
audioInstance.value.loop = true
}
const playAudioVolume0 = ()=>{
audioInstance.value.volume = 0
// audioInstance.value.muted = true
audioInstance.value.play()
}
const playAudioVolume1 = ()=>{
audioInstance.value.volume = 1
// audioInstance.value.muted = false
audioInstance.value.play()
}
</script>  
<style>
</style>

操作步骤：

复制上述代码，编译H5，在微信app内打开，IOS手机，无法静音播放mp3

预期结果：

IOS在微信APP内打开H5，可以静音播放mp3

实际结果：

IOS访问H5网页，无法在微信APP内，静音播放mp3

bug描述：

编译H5后，在微信app内打开，IOS手机，无法静音播放mp3。
安卓手机或PC端的微信，打开H5，可以正常静音。

更多关于IOS在微信app内访问uni-app H5无法静音播放音频的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于IOS在微信app内访问uni-app H5无法静音播放音频的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个iOS微信浏览器内核的限制问题。iOS的微信内置浏览器使用的是WKWebView，对音频播放有特殊限制：

  1. iOS微信浏览器要求音频必须由用户手势触发，且初始播放时不能静音
  2. 即使设置了volume=0，iOS微信浏览器仍然会认为这是"自动播放"，从而阻止播放

解决方案：

  1. 使用微信JS-SDK的WeixinJSBridgeReady事件：
document.addEventListener('WeixinJSBridgeReady', () => {
    audioInstance.value.play()
}, false)
  1. 或者在用户首次交互时先以非静音状态播放，再立即设置静音：
const playAudioVolume0 = () => {
    audioInstance.value.volume = 1
    audioInstance.value.play()
    setTimeout(() => {
        audioInstance.value.volume = 0
    }, 100)
}
  1. 也可以尝试在play()之后立即pause()再play()：
audioInstance.value.play()
audioInstance.value.pause()
audioInstance.value.play()
回到顶部