小程序ios音频播放没声音问题的解决

小程序提供了录音和播放音频的能力，从基础库 1.6.0 开始支持了wx.getRecorderManager()，录音都采用wx.getRecorderManager()提供的api，播放音频文件采用wx.createInnerAudioContext()提供的api

导入录音和播放音频功能

const recorderManager = wx.getRecorderManager();    // 录音功能
const innerAudioContext = wx.createInnerAudioContext(); // 播放音频

注册录音结束事件

// 录音结束
recorderManager.onStop((res) => {
 console.log('recorder stop');
 const { tempFilePath } = res; // 录音的本地临时文件
 // ... 播放音频
 innerAudioContext.src = tempFilePath ;
 innerAudioContext.play();
});

开始录音

const options = {
 duration: 10000,
 sampleRate: 44100,
 numberOfChannels: 1,
 encodeBitRate: 192000,
 format: 'aac',
 frameSize: 50
}
recorderManager.start(options);

options是一些音频的配置，具体的配置可以查看 官方文档

这样就创建了一个简单的音频录音和播放功能

ios播放音频文件没有声音

在开发过程中发现在开发者工具和安卓测试机上都能正常录音和播放录音文件，但是在ios手机上发现音频文件播放没有声音，百度查看没有发现有遇到类似的问题，只能自己各种测试，最后发现ios手机是静音模式！！！果然取消静音模式就能够正常播放了。

其实仔细查看api文档， innerAudioContext 对象的属性列表中发现一个属性 obeyMuteSwitch ，这个属性可以在静音模式下播放音频文件，并且有声音！！！

是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音，默认值 true

可以通过设置obeyMuteSwitch为false开启在静音模式下播放音频！解决了ios静音模式下播放音频文件没有声音的问题！

innerAudioContext.obeyMuteSwitch = false;

在开发小程序的过程中遇到问题还是应该多查看api文档，才能更加快速的解决遇到的bug！

附 小程序开发文档链接

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序page的生命周期和音频播放及监听实例详解

    微信小程序page的生命周期和音频播放及监听实例详解

    一.界面的生命周期 /** * 监听页面加载, * 页面加载中 */ onLoad:function(){ var _this = this console.log('index---------onload()') /** * 监听音乐播放 */ wx.onBackgroundAudioPlay(function() { console.log('onBackgroundAudioPlay') }), /** * 监听音乐暂停 */ wx.onBackgroundAudioPause(func

  • 微信小程序 audio音频播放详解及实例

    微信小程序 audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

  • 微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    微信小程序开发之录音机 音频播放 动画实例 (真机可用)

    趁着周末用微信小程序做了个简易录音机.跟大家分享,欢迎批评! 老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里值得说一说的是录音.微信的录音API后,如果录音时间太短,会录音失败.所以fail的时候还是需要处理一下.录音时间的限制和微信语音是一样的.60秒. 3.我在录音完成后才加载列表. 下图就是从微信存储的文件里获取到的列表信息.有储存路径,

  • IOS中微信小程序播放缓存的音频文件的方法

    很多时候我们都想把数据预先缓存到本地,节省带宽.但是最近在处理微信小程序播放缓存到本地的音频文件的时候,遇到一些小问题,然后对于安卓和IOS需要采用不同的播放策略. 首先,如果哪怕用audio标签来播放在线的音频文件,假如服务端没有实现断点续传,IOS是无法播放的,这个需要注意. 对于缓存在小程序的音频(wx.saveFile(OBJECT)保存的音频),IOS只能通过播放背景音乐的接口播放,其它播放方法都没有成功实践,而对于安卓,内部 audio 上下文 innerAudioContext 对

  • 小程序ios音频播放没声音问题的解决

    小程序提供了录音和播放音频的能力,从基础库 1.6.0 开始支持了wx.getRecorderManager(),录音都采用wx.getRecorderManager()提供的api,播放音频文件采用wx.createInnerAudioContext()提供的api 导入录音和播放音频功能 const recorderManager = wx.getRecorderManager(); // 录音功能 const innerAudioContext = wx.createInnerAudioC

  • 微信小程序多音频播放进度条问题

    微信小程序多音频播放进度条问题

    真的脑子疼,小程序的音频组件居然没有进度控制的功能,网上的方法又很少,逻辑通了就好写了. 1.所有音频播放.停止按钮使用状态切换控制 2.当点击某个音频播放时,首先将所有音频的状态置为停止状态,然后将当前音频置为播放状态 3.滚动条插件配合音频控件一起使用 4.播放状态时滚动条的长度随音频进度变化而变化,时间也要显示 5.拖动滚动条时,音频的当前时间随滚动条变化而变化 1.wxml <text class="left_text">{{item.currentProcess}

  • 微信小程序  audio音频播放详解及实例

    微信小程序  audio音频播放详解及实例

     微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名 类型 默认值 说明 id String   video 组件的唯一标识符, src String   要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String   默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name

  • 微信小程序获取音频时长与实时获取播放进度问题

    首先在没有播放音频之前,居然拿不到总时长 但是在播放之后也需要设置setTimeout来获取 所以在监听音频播放进度更新事件中获取.顺便获取当前播放进度 按照官方的写法 audioPlayed: function () { myAudio.play() setTieout(() => { myAudio.onTimeUpdate(() => { console.log(myAudio.duration) //总时长 console.log(myAudio.currentTime) //当前播放

  • 微信小程序实现音频文件播放进度的实例代码

    问题描述 在微信小程序中经常会用到控制文件播放的滑块,通过滑块可控制音频播放进度,下面即用代码实现. 解决方案 首先用.wxml与 .wmss 代码实现进度条的效果,再通过 .js 文件控制进度条的进度和进度条的时间显示. .wxml中(播放进度结构的代码): <view class="content-play-progress"> <text>{{play.currentTime}}</text> <view> <slider a

  • 微信小程序录音与播放录音功能

    小程序中提供了两种录音的API 旧版录音功能 首先启动录音,然后停止录音即可拉到音频的临时地址 启动录音: var that = this; wx.startRecord({ success: function (res) { // 调用了停止录音接口就会触发这个函数,res.tempFilePath为录音文件临时路径 var tempFilePath = res.tempFilePath that.setData({ src: tempFilePath }) }, fail: function

  • 微信小程序实现音乐播放器

    微信小程序实现音乐播放器

    今天继续玩小程序的api,看着别人例子跟着做一个小程序,留下一个脚印吧.末尾附上github源码地址.实现以下微信小程序的音乐播放器,先看下效果图 界面做的确实挺丑的,先上wxss文件 //index.wxss .button-style{ background-color: #eee; border-radius: 8rpx; margin: 20rpx; } 只是顶一个简单的按钮的圆角和间距,颜色这个我还是用primary这个小绿色. 下面是index.wxml文件 //index.wxml

  • 微信小程序实现自动播放视频模仿gif动图效果实例

    微信小程序实现自动播放视频模仿gif动图效果实例

    需求背景: 在小程序页面插入gif动态图,但gif图一般体积比较大,转而用自动播放视频的模式来模拟gif图的效果,丰富页面展示.自动播放的视频,无控制条,无声音,自动循环播放. 技术难点: 因为微信小程序在同一个页面,存在多个视频时(建议不超过3个视频),会出现卡顿甚至闪退的情况. developers.weixin.qq.com/community/d- 方案: 参考小程序社区讨论方案,当视频未出现在屏幕可视区域时,用图片占位,出现在屏幕中,把图片替换成视频,并且自动播放. 代码注意点: vi

  • 微信小程序iOS下拉白屏晃动问题解决方案

    这篇文章主要介绍了微信小程序iOS下拉白屏晃动问题解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 问题 感觉ios的小程序每个页面都可以下拉出现白屏 有时页面带有滑动的属性会跟着晃动,体验不是很好 解决办法: 先禁止页面下拉 <config> { navigationBarTitleText: "购物车", disableScroll:true } </config> 这样的话页面整个都拉不动了,下面溢

随机推荐