微信小程序-感应周围超声波音频，获取周围商品信息的开发实践

突然想起之前参与开发微信小程序的感应超声波获取周围商品信息，点击获取到的商品信息播放语音的开发项目，就总结一下经验

1.首先要创建一个一个播放器的标签，因为获取到的信息是多个，数组格式

在外部class="li"的父盒子里，我绑定当前事件是【播放 audioPlay】还是【暂停后的继续播放 audioPause】，在内部的语音播放器里则绑定事件【暂停 playEnd】

<view class="li" bindtap="{{item.autoplay?'audioPause':'audioPlay'}}" data-index="{{index}}" wx:for="{{audioList}}" hidden="{{item.hidden}}">
    // 头部显示的图像
   <view class="li-top">                    
      <image src="{{item.head_img}}"></image>                    
   </view>
    // 商品的信息
   <view class="li-bottom f666 weui-flex">
      <view class="li-l">{{item.describe}}</view>
         <view class="li-r">
            // 是否播放时的动画
           <image src="{{localImg}}noPlay.gif" wx:if="{{item.autoplay}}"></image>
           <image src="{{localImg}}play.png" wx:else></image>
     </view>
   </view>
    // 语音播放器
   <audio src="{{item.audio}}" class="myAudio" controls bindended="playEnd" id="myAudio" data-index="{{index}}"></audio>
 </view>

 外形view已经搭建好了，现在开始核心部分创建语音播放器对象和获取监听超声波：

1.创建语音播放器对象

onReady(e) {
    // 使用 wx.createAudioContext 获取 audio 上下文 context
    this.audioCtx = wx.createAudioContext('myAudio');
  },

2.onLoad里初始化detector方法，当时是跟第三方合作的，他们给写好的方法，我大致看了一下，里面有手机终端的应用版本是否支持语音播放，地理位置的获取，超声波是否异常等等判断。

onLoad(options) {
    detector.init({
      // 这只是个demo,请联系百蝠获取appkey,同时布署自己的buyfull token service
      appKey: '',
      buyfullTokenUrl: '接口的地址',
      // abortTimeout: 3000, // 单次网络请求超时
      // detectTimeout: 5000, // 总超时
      debugLog: false, // true可以打开debugLog
    });
    // 用户拒绝录音授权后会弹出提示框，每次运行只会打开一次
    // 请把openSettingTemp中的模板import进来，具体请查看index.wxml和index.wxss
    openRecordSetting.bindRecordSettingForPage(this, detector);
  },

3.在onShow里开始监听，方法如下：

// 百福
  doDetect() {
    const thiz = this;
    if (!this.isDetecting) {
      this.isDetecting = true;
      this.retryCount = 3;
    }
    detector.detect({
      version: 'v2', // 针对qieshu.net上的帐号请使用v2
      // userID: "xxxxxxx" //可选，可以以后台报表数据中作为统计数据的一个参数
    }, (result) => {
      console.log('检测结束,结果是', result);
      if (result.count > 0) {
        const info = result.allTags;
        const audioList = thiz.data.audioList;
        for (let i = 0; i < audioList.length; i++) {
          const el = audioList[i];
          const num = 0;
          for (let j = 0; j < info.length; j++) {
            const elj = info[j];
            if (el.key === elj) {
              el.hidden = false;
            }
          }
        }
        thiz.setData({
          info,
          audioList,
        });
      } else {
        console.log(`result is null, power is (dB):${result.sortByPowerResult[0].power}|${result.sortByPowerResult[1].power}`);
      }
      thiz.isDetecting = false;
    }, (errorCode) => {
      console.log(errorCode, 'errorCode');
      // 检测无结果或有错误都会回调
      if (errorCode >= 4 && errorCode <= 8) {
        // errocode 4-8 都和网络以及超时有关，可以自行设计重试和报错机制,或者延长abortTimeout和detectTimeout
        if (--thiz.retryCount > 0) {
          console.log(`retry count:${thiz.retryCount}`);
          thiz.doDetect();
        } else {
          thiz.isDetecting = false;
          detector.debug();
        }
      } else {
        thiz.isDetecting = false;
        detector.debug();
      }
    });
  },

大致就是这样的,end。