微信小程序播放语音|audio播放mp3|audio播放音频在IOS|苹果手机上外放没声音,戴上耳机就有声音【解决办法记录】

以前项目中遇到的问题,今天同事问到了,在这里记录一下

语音播放使用的 wx.createInnerAudioContext()

诡异问题记录:
在安卓上都没问题,语音发送接收之后播放都没问题,就是在 IOS 上播放没声音,戴上耳机就可以听到声音,不戴耳机就没声音,音量加到最大还是没声音…

看手册:

有一个 API 叫 wx.setInnerAudioOption
在这里插入图片描述
obeyMuteSwitch 选项 默认值:true(仅在 iOS 生效)是否遵循静音开关,设置为 false 之后,即使是在静音模式下,也能播放声音

原因找到了,IOS 有一个静音的按钮(向下拨动就静音的那个开关),这里设置一下播放的时候是否遵循静音开关,因为默认是遵循,所以大家上班中都处于静音状态,那么播放的时候不管你声音调整多大,都会没声音,而耳机模式下就不存在这个问题,所以 这样处理一下:

可以做下版本兼容,版本不够的可以提示微信升级(我那里没做兼容 -.-)

// 设置不遵循静音开关播放
wx.setInnerAudioOption({
  obeyMuteSwitch: false
})

这里有一个官方推荐的版本比较的方法:【查看

// 官方版
// 版本对比  兼容
function compareVersion(v1, v2) {
  v1 = v1.split('.')
  v2 = v2.split('.')
  const len = Math.max(v1.length, v2.length)
 
  while (v1.length < len) {
    v1.push('0')
  }
  while (v2.length < len) {
    v2.push('0')
  }
 
  for (let i = 0; i < len; i++) {
    const num1 = parseInt(v1[i])
    const num2 = parseInt(v2[i])
 
    if (num1 > num2) {
      return 1
    } else if (num1 < num2) {
      return -1
    }
  }
 
  return 0
}

const version = wx.getSystemInfoSync().SDKVersion;
if (compareVersion(version, '2.3.0') >= 0) {
  wx.setInnerAudioOption({
    obeyMuteSwitch: false
  })
}else{
  wx.showModal({
    title: '提示',
    content: '当前微信版本过低,静音模式下可能会导致播放音频失败,请升级到最新微信版本后重试。'
  })
}
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,能够编译到 iOS、Android、Web(包括微信小程序)以及各种 H5 应用等平台。当涉及到微信小程序时,uni-app 提供了丰富的API和组件,使得开发者能够方便地实现包括音频播放在内的各种功能。 微信小程序音频样式主要是指如何通过小程序的界面和交互设计来展示音频播放的控制和信息。通常,音频样式包括以下几个方面: 1. 播放器的界面布局:这是用户接触的第一层面,通常包括播放/暂停按钮、进度条、声音大小控制、当前播放时间显示以及总时长显示等。开发者可以使用微信小程序提供的组件如 `<audio>` 来实现。 2. 自定义样式:开发者可以使用 CSS 对 `<audio>` 组件进行样式定制,包括颜色、大小、位置以及响应式布局等,以满足不同的设计需求。 3. 交互设计:合理的用户交互设计可以提升用户体验,比如点击封面图可以直接播放音频、长按播放按钮显示更多操作选项等。 微信小程序中,音频组件的使用示例代码如下: ```html <template> <view> <audio id="myAudio" src="your-audio-src.mp3" controls="true" controlsList="nodownload" autoplay="false" loop="false" initial-time="0" preload="auto" poster="your-poster-image.jpg" ></audio> </view> </template> ``` 在上述代码中,`<audio>` 组件用于嵌入音频内容,`src` 属性设置音频文件的 URL,`controls` 属性决定是否显示默认播放控件。`controlsList` 和 `preload` 等属性提供更细粒度的控件定制和播放行为设置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值