uni安卓app扫码枪收付款语音播报

需求了解

• 场景：超市支付过程中，对用户进行语音提醒
• 设备：安卓端app设备
• 难点：扫码枪扫码会弹出键盘影响美观，windows浏览器中音频播放正常，安卓机app与浏览器上没反应

思路：

1. 提醒用户进行扫码支付
2. 码枪扫描二维码
3. 扫码成功，提醒用户正在支付中
4. 支付成功提醒已支付

解决步骤

- 第1步：解决扫码枪会弹出键盘的问题

介绍：扫码枪会将扫描到的数据自动代入到获取焦点的输入框中，并且触发输入框的“Enter”事件 一开始是想用uni的键盘隐藏事件，但是隐藏会影响键盘的焦点，于是乎网上各种百度，找到了uniapp-keyboard-listener插件，插件地址：ext.dcloud.net.cn/plugin?id=2…

我是通过NPM方式安装使用的，代码如下：

<template>
    <keyboard-listener @keyup="onKey" @keyup.enter='checkId'></keyboard-listener>
</template>
<script>
    import keyboardListener from '@/components/keyboard-listener/keyboard-listener'
    export default {
        components: { keyboardListener },//引入keyboardListener组件
        data() {
            return {
                idNum: '',//扫描码
                logs:[]
            }
        },
        methods: {
            onKey(event){//按键松开事件
                this.logs.push(event.key)			
            },			
            checkId(){
                let str = this.logs.join(',')//转成字符串
                let newStr = str.split(',').map(item => item.trim()).join('');//去掉字符串之间的逗号组成一整个字符串
                this.idNum = newStr.replace('Enter', '');//因人而异，我需要删除扫描码中的‘Enter’字符串
            }
        }
    }
</script>

- 第2步：解决音频播放的问题

使用uni的createInnerAudioContext()方法

问题合集： base64音频，会间隔提示，怀疑base64返回的字段太长，线上mp3地址不会存在这种问题。 于是后端直接返回文件流，

代码如下：

<script>
    export default {
        data() {
            return {
                music: null, //存放音频    
            }
        },
        methods: {
            //提交订单，提醒用户进行扫码支付
            postOrder(){
              if (this.music) {//判断音频是否存在
                this.musicDestory()
              }
              this.musicPlay('提醒用户进行扫码支付的音频')
            },
            //扫码成功，提醒用户正在支付中
            scanSuccess(){
              this.musicDestory()
              this.musicPlay('./static/4.wav')//本地音频文件
            },
            orderSuccess(){
              this.musicDestory()
              //${this.BASEURL}/music?money=${money}为接口地址，因为后端返回文件流，这样可以直接打开文件
              this.musicPlay(`${this.BASEURL}/music?money=${money}`)
            },
            //播放音频
            musicPlay(data) {//data为音频地址
              this.music = uni.createInnerAudioContext();//创建并返回内部 audio 
              this.music.autoplay = true;//自动播放
              this.music.loop = false;//不循环
              this.music.src = data;//音频的数据链接，用于直接播放
              this.music.volume = 1;//音量。范围 0~1
              this.music.startTime = 0;//开始播放的位置（单位：s），默认 0
              this.music.play();//播放（H5端部分浏览器需在用户交互时进行）
            },
            //音频停止播放
            musicDestory(){
              this.music.pause();//暂停
              this.music.destroy();//销毁当前实例
            }
        }
    }
</script>