• 效果图

  
  
  image.png

• 小程序官网

• 项目如果多页面需求播放音频功能

  • app.js 全局创建 wx.createInnerAudioContext() 对象

App({
  onLaunch: function () {
    this.audioContext = wx.createInnerAudioContext();
    this.audioContext.onPlay(() => {
      wx.hideLoading();
      console.log('开始播放')

    })
    this.audioContext.onPause(() => {
      console.log('暂停')

    })
    this.audioContext.onStop(() => {
      console.log('停止')

    })
    this.audioContext.onEnded(() => {
      console.log('结束')

    })
    this.audioContext.onError((res) => {
      wx.hideLoading();
      console.log(res);
      
    })
  },
  $request,
  globalData: {
    userInfo: null,
    
  },
})

• 页面使用

const app = getApp()
//播放
    app.audioContext.src = this.data.recordPath + '.wav';
    app.audioContext.play()

//暂停
   app.audioContext.pause();
//停止
  app.audioContext.stop();

• 聊天页面播放同一段录音停止
• js

/**
   * 播放音频
   */
  playAudio(e) {
    
    let {file_path, id,gid} = e.currentTarget.dataset.audio
    wx.stopVoice()
    this.setData({
      audioStuas:false,
      gid :e.currentTarget.dataset.gid
    })
    let {audioSaveID} = this.data
  
    app.audioContext.src = file_path + '.wav';

    if (audioSaveID === id) {
      
      app.audioContext.stop();
      //初始化
      this.setData({
        audioSaveID: '',
        gid :''
      })
    } else {
      //不是同一个语音 直接播放其它，将此次语音记录
      app.audioContext.play()
      this.setData({
        audioSaveID: id
      })
      app.audioContext.onEnded(() => {
        
        this.setData({
          audioSaveID: '',
          gid :''
        })
      })
    }
  },
//页面离开结束音频
  onUnload: function () {
    app.audioContext.stop()
  },

• wxml

<view class="wrap">
  <scroll-view scroll-y="true" class="scroll-view">
    <view class="time">{{beginDate}}</view>
    <view wx:for="{{msgList}}" wx:key="index">
      <view class="right" wx:if="{{item.participant === 1}}">
        <view class="content">{{item.contentDetail[0]}}</view>
        <view class="icon icon_warp">
          <image class="icon" src="../../src/staic/images/lwlx.png"></image>
        </view>
      </view>
      <view class="left" wx:else>
        <view class="icon icon_warp">
          <image class="icon" src="../../src/staic/images/lwl2x.png"></image>
        </view>
        <view class="content" bindtap="playAudio" data-audio='{{item}}' data-gid="{{index}}">
      <view class="play">
      <image wx:if="{{gid != index}}" src="../../src/staic/images/4lwl2x.png"></image>
      <image wx:else src="../../src/staic/images/yuyinicon@2x.png"></image>
      </view>
      <view>
              {{item.contentDetail[0]}}
      </view>
    
        </view>
      </view>
    </view>
    <view class="time">「{{telephone}}」已挂断，本次通话{{totalSeconds}}秒</view>
  </scroll-view>
</view>

• wxss

.wrap {

  padding: 0 30rpx;
}

.scroll-view {
  margin-bottom: 98rpx;

}

.time {
  text-align: center;
  margin-top: 32rpx;
  color: #999999;
  font-size: 20rpx;
}

.bottom_win {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 98rpx;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon {
  width: 74rpx;
  height: 74rpx;

}

.right,
.left {
  display: flex;
  font-size: 30rpx;
  align-items: center;
  margin-top: 32rpx;
}


.play image {
  height: 48rpx;
  width: 48rpx;
}

.right {
  justify-content: flex-end;

}

.right .icon_warp {
  margin-left: 15rpx;
}

.left .icon_warp {
  margin-right: 15rpx;
}
.content {
  color: #3C3C3C;
  padding: 20rpx;

  background-color: #fff;
}

.left .content {
  display: flex;
  margin-right: 86rpx;

  justify-content: space-between;
  align-items: flex-start;
  background-color: #BAE4FF;
  border-radius: 0 18rpx 18rpx 18rpx;
}

.right .content {
  margin-left: 86rpx;
  border-radius: 18rpx 0 18rpx 18rpx;
}