需求点

  1. 语音播放不跟随系统铃声模式。
  2. 语音播放支持扬声器/听筒播放。
  3. 扬声器模式下播放检测到距离接近需要息屏(防误触)并实时转换为听筒播放,距离远离需亮屏并转回扬声器播放。
  4. 听筒模式下播放检测距离变化不需要切换播放声道,但距离接近需要息屏(防误触),距离远离需要亮屏。

分析需求

首先明确一点,语音播放支持扬声器/听筒播放,那就只能使用plus.audio.createPlayer来实现,而切换播放声道,可以使用plus.audio.createPlayer创建出来实例的setRoute()方法。
由3.4点需求,明确在播放语音时需要添加距离监听器,这里可以使用plus.proximity.watchProximity来实时监听设备接近距离。
最后一个接近息屏,远离亮屏的需求,先把前面的做了,再看看如何实现吧。

实现

this.playMode:播放声道(扬声器 0,听筒 1)
this.playState:play回调中播放参数

  1. 距离监听器
this.watchProximity = plus.proximity.watchProximity((distance) => {/*** iOS端接近为0,远离为Infinity* Android端接近为0,远离为5*/if (this.playMode === 0) {// 扬声器模式下,需要对声道进行实时修改this.voicePlayer.pause();if (distance !== 0) {// 扬声器this.voicePlayer.setRoute(0);} else {// 听筒this.voicePlayer.setRoute(1);}this.voicePlayer.resume();}
});
  1. 初始化播放器
this.voicePlayer = plus.audio.createPlayer({ src: 'xxx' });
this.voicePlayer.setRoute(this.playMode);
// 监听自然播放完成
this.voicePlayer.addEventListener('ended', () => {// 销毁正在监听设备距离的监听器if (this.watchProximity) {plus.proximity.clearWatch(this.watchProximity);this.watchProximity = null;}console.log('播放完毕了');
});
// 监听音频可以开始播放事件
this.voicePlayer.addEventListener('play', () => {// 首次播放时会执行两次回调if (this.playState !== 2) {// plus.audio.ROUTE_SPEAKER:扬声器 0// plus.audio.ROUTE_EARPIECE:听筒 1this.voicePlayer.setRoute(this.playMode);this.playState++;}
});
// 监听音频播放错误事件
this.voicePlayer.addEventListener('error', (err) => {console.log('报错err', err);// 销毁正在监听设备距离的监听器if (this.watchProximity) {plus.proximity.clearWatch(this.watchProximity);this.watchProximity = null;}
});
  1. 播放
// 在正确的地方调用播放
this.voicePlayer.play();

播放后,发现语音在iOS端,是默认存在接近息屏,远离亮屏的现象(默认行为);但是Android端在播放的时候,始终是亮屏的,看来Android端还需要自己实现。
播放时,初始播放模式为扬声器模式,接近切换为听筒,远离切换回扬声器,在iOS端是能完美表现的,切换无延迟;Android端切换是存在延迟的,好在延迟不影响播放。
播放时,初始播放模式为听筒模式,Android端第一次播放音频会存在几秒钟的卡顿延迟,且该卡顿是占播放时间的,也就是说第一次播放时不完整的,目前也没有什么比较好的方案解决(暂时搁置)。

Android端实现播放时接近息屏,远离亮屏

该如何下手呢?博主查阅了plus几乎所有的API,都没有能找到相关的内容,看来又只能上Android官网找了。
直接上Android官网找跟电源相关的API,发现了PowerManager,在其中找到了一个电平模式PROXIMITY_SCREEN_OFF_WAKE_LOCK,具体如下:
这不就是我想要的答案吗?事不宜迟,说干就干!

由于PowerManager电源管理类是属于全局唯一的,故使用也不能像播放音频那样随随便便new一个实例出来,他需要借助Android的主实例对象plus.android.runtimeMainActivity()来调用获取。
this.platform: 当前手机平台
this.wakeLock:唤醒锁

// Android端需要设置唤醒模式才能在接近传感器激活时关闭屏幕,iOS端自带了
if (this.platform === 'android') {let main = plus.android.runtimeMainActivity();let Context = plus.android.importClass('android.content.Context');let PowerManager = plus.android.importClass('android.os.PowerManager');let pm = main.getSystemService(Context.POWER_SERVICE);// 32代表PROXIMITY_SCREEN_OFF_WAKE_LOCK,唤醒锁定电平:当接近传感器激活时关闭屏幕let status = pm.isWakeLockLevelSupported(PowerManager.PROXIMITY_SCREEN_OFF_WAKE_LOCK);// 系统支持该唤醒模式if (status) {this.wakeLock = pm.newWakeLock(PowerManager.PROXIMITY_SCREEN_OFF_WAKE_LOCK, 'TAG');this.wakeLock.acquire();}
}

在刚刚初始化播放器时添加的监听事件中,增加对唤醒模式资源的释放

// 监听自然播放完成
this.voicePlayer.addEventListener('ended', () => {// 销毁正在监听设备距离的监听器if (this.watchProximity) {plus.proximity.clearWatch(this.watchProximity);this.watchProximity = null;}// 释放唤醒锁if (this.wakeLock) {this.wakeLock.release();this.wakeLock = null;}console.log('播放完毕了');
});
// 监听音频播放错误事件
this.voicePlayer.addEventListener('error', (err) => {console.log('报错err', err);// 释放唤醒锁if (this.wakeLock) {this.wakeLock.release();this.wakeLock = null;}// 销毁正在监听设备距离的监听器if (this.watchProximity) {plus.proximity.clearWatch(this.watchProximity);this.watchProximity = null;}
});

至此,所有的需求都圆满完成了!

总结

随着对uniapp的深入了解,越来越多功能点的实现,开发人员不止需要把视角放在前端,还需要转战到Android、iOS官方查阅相关的API文档才能实现。
按照这个趋势,博主认为凡是手机系统底层实现了的功能,但uniapp未实现的,都可以通过plus.android或者plus.ios通过调用相关功能类来实现,这泥潭算是越陷越深了。
总而言之,Keep learning…

uniapp实现语音播放功能相关推荐

  1. uniapp 微信语音播放功能(整理)

    1.在你的小程序中,加上可调用插件,设置-第三方设置-添加插件:微信同声传译. 2.把源码视图 中的appid替换成你自己的appid(点击详情-可查看appid) data(){return{pla ...

  2. uni-app 实现语音播放实现思路和代码

    #uni-app 实现语音播放功能demo == 思路 1== 从消息列表中筛选出单独的语音列表, 在消息列表中添加字段,语音列表的index和消息列表中的index对应 语音列表添加标识,区分播放状 ...

  3. 树莓派作主板的四轮驱动小车,通过VNC控制,有语音播放功能,Python编程。

    树莓派作主板的四轮驱动小车,通过VNC控制,有语音播放功能,Python编程. 主要特点: *四轮驱动,动力强,可载重二十公斤. *前进,后退,转向灵活行驶. *手动五档位(包括倒档).车轮直径越大速 ...

  4. html调用百度地图语音播报,实现百度地图导航演示的语音播放功能

    在上面,百度地图导航演示是本地导入的,那么如何在此基础上实现导航语音广播呢? 首先,为应用程序申请语音广播(也称为注册) SDK具有内置的百度TTS语音广播功能,在使用该应用程序之前,需要对应用程序进 ...

  5. 多多云手机【语音引流】创新吸粉模式 -- 语音播放功能模块开发教程

    多多云手机[语音引流]创新吸粉模式,接口完全免费开放给开发者,可用于第三方APP语音引流软件开发,互联网引流等等,例如微商语音吸粉.游戏语音推广.应用喊话推广,替代传统枯燥的文字引流方法,自动化的操作 ...

  6. 在移动或者PC页面上使用类似于微信语音播放功能

    1.首先看看页面截图: 功能: (1) 根据语音的长度自动展示出语音的时长,而且未播放时,语音条后面有个小红点,表示未播放 (2) 当点击语音条时,会播放相应的语音,语音条并且会变成动态播放状态,类似 ...

  7. html 语音转换成文本,vue项目或网页上实现文字转换成语音播放功能

    一.在网页上实现文字转换成语音 方式一: 摘要:语音合成:也被称为文本转换技术(TTS),它是将计算机自己产生的.或外部输入的文字信息转变为可以听得懂的.流利的口语输出的技术. 1. 使用百度的接口: ...

  8. vue3实现语音播放功能

    onMounted(() => {var lockReconnect = false; //避免ws重复连接var ws = null; // 判断当前浏览器是否支持WebSocketvar w ...

  9. uniapp语音播放Android端细节进阶实现

    承接上回语音功能的实现<uniapp实现语音播放功能>,仍存在有瑕疵,问题如下: 1. 语音播放时,会直接打断后台正在播放的音乐,播放完毕无自动恢复音乐 2. 语音播放的输出(耳机/扬声器 ...

  10. 智能垃圾桶语音芯片应用设计方案介绍,WT588F02B-8S

    WT588F02B语音芯片在智能垃圾桶上的应用设计方案介绍 智能化已经成为一种时代趋势,现今人们的需求使智能化家居成为必不可少的一部分.而垃圾桶是人们日常生活中不可或缺的家具,甚至街道上也定点有垃圾回 ...

最新文章

  1. SimCSE:用于句子嵌入的对比学习
  2. es scroll 时间_游标查询 Scroll | Elasticsearch: 权威指南 | Elastic
  3. Netflix如何通过支持TLS 1.3提供更安全高效的播放体验
  4. java 字符长度 中文_java判断中文字符串长度的简单实例
  5. 《Code:The Hidden Language Of Computer Hardware and Software》 ——笔记
  6. [css] 说说你对GPU的理解,举例说明哪些元素能触发GPU硬件加速?
  7. mysql复制安全性_从MySQL复制功能中得到一举三得实惠
  8. FB宣布将回购60亿美元股票 首席会计官将离职
  9. 任务并行VS数据并行
  10. Memcached学习一:Memcached安装使用
  11. DrawIndexedPrimitiveUP这个函数
  12. 查看HTML请求(request)中的标头(Headers)信息
  13. 【设计模式和面向对象设计】拾零(持续更新,个人零散笔记)
  14. 梦网云通讯平台单条短信发送接口single_send说明
  15. 菜鸟教程笔记:TypeScript
  16. android循环录制,按键精灵安卓版为什么我录制的脚本无法循环
  17. 将一个文件夹拖入MyEclipse的时候,提示destination folder must be accessible
  18. 如何在网上赚钱,也可以在家兼职赚钱的5个网上项目分享给大家
  19. 国产操作系统银河麒麟V10桌面系统文件共享配置
  20. 为什么大家都愿意进入外企?

热门文章

  1. c 程序设计语言试卷,C语言程序设计试题及答案
  2. redmibook pro 14 arch linux alsamixer 检测不到声卡
  3. 【芯片学习】X86 CPU 发展历史与分析——1971~2020——明白Intel架构的变迁
  4. java blog 引擎_推荐10个Java开源CMS系统
  5. 中国互联网公司大盘点
  6. Spss-kmeans聚类分析操作
  7. 计算机怎么禁用软件网络访问,Windows10系统下禁止软件联网的两种方法
  8. 电子元器件简介——场效应管篇
  9. 昆仑通态和S7 1200在线模拟仿真通讯
  10. 2022年最新iOS面试题(附答案)