本文實例為大家分享了微信小程序類似平常微信語音聊天的效果，不會互相干擾播放狀態，供大家參考，具體內容如下
根據開發的需求，先理清一下思路，點擊語音播放與暫停/停止，切換下一個語音等；
小程序對于audio的組件的一些api方法已經不支持了，詳情可以參看：微信小程序audio組件文檔
嗯嗯，這下子，該怎么辦呢？
就如上面提到，小程序1.60版本后，給開發者提供了這個wx.createInnerAudioContext()api…具體使用可以看文檔；
好的，現在該上代碼了！
-wxml結構：
<block wx:for="{{audioArr}}" wx:key="content" wx:for-item="v" wx:for-index="key"> <view class='output-audio'> <!-- 默認狀態 --> <view class='audio' wx:if="{{v.bl==false}}" bindtap='audioPlay' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}"> <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-ico.png' /> <label class='time'>{{v.time}}</label> </view> <!-- 當前正在播放狀態 --> <view class='audio' wx:if="{{v.bl==true}}" bindtap='audioStop' data-key="{{key}}" data-id="{{v.id}}" data-bl="{{v.bl}}"> <image class='ico' src='https://xcx.quan5fen.com/Public/xcx-hitui/image/imgs-jyh/yuyin-gif.gif' /> <label class='time'>{{v.time}}</label> </view> </view></block>-wxss樣式：
page{ background: #f0f0f0;}.output-audio{ width: 150rpx; margin: 30rpx; }.output-audio .audio{ padding: 20rpx; border-radius: 10rpx;background-color: #fff;border: 1px solid #f0f0f0; overflow: hidden; }.output-audio .audio .ico{ width: 26rpx; height: 30rpx; float: left;}.output-audio .audio .time{ float: right; font-size: 24rpx;}-js方法：
// pages/audio/audio.js//創建audio控件const myaudio = wx.createInnerAudioContext(); Page({ /** * 頁面的初始數據 */ data: { //音頻列表 audioArr: [ { id: '000', src: 'https://s320.xiami.net/928/19928/1882512413/1772277226_1513175794617.mp3?ccode=xiami_web_web&expire=86400&duration=182&psid=485902a766977ecaae347a4cc851e8da&ups_client_netip=113.70.219.174&ups_ts=1551680441&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1772277226&fn=1772277226_1513175794617.mp3&vkey=Bac0e9fde3983f090cef0a37e1cb73ef7', time: '30s', bl: false }, { id: '001', src: 'https://s128.xiami.net/764/33764/2104642547/1810384080_1551417116476_5598.mp3?ccode=xiami_web_web&expire=86400&duration=181&psid=6320a01db73a6fdb9632f5800fc93fe5&ups_client_netip=113.70.219.174&ups_ts=1551680537&ups_userid=0&utid=ljH9FKf0Um0CAQ7fs+HVAPRw&vid=1810384080&fn=1810384080_1551417116476_5598.mp3&vkey=B54b264178201f6737c9bb5ff4bbce3d0', time: '50s', bl: false }, ] }, //音頻播放 audioPlay: function (e) { var that = this, id = e.currentTarget.dataset.id, key = e.currentTarget.dataset.key, audioArr = that.data.audioArr, vidSrc = audioArr[key].src; myaudio.src = vidSrc; myaudio.autoplay = true; //切換顯示狀態 for (var i = 0; i < audioArr.length; i++) { audioArr[i].bl = false; } audioArr[key].bl = true; myaudio.play(); //開始監聽 myaudio.onPlay(() => { that.setData({ audioArr: audioArr }) }) //結束監聽 myaudio.onEnded(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) }, // 音頻停止 audioStop: function (e) { var that = this, key = e.currentTarget.dataset.key, audioArr = that.data.audioArr; //切換顯示狀態 for (var i = 0; i < audioArr.length; i++) { audioArr[i].bl = false; } audioArr[key].bl = false; myaudio.stop(); //停止監聽 myaudio.onStop(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) //結束監聽 myaudio.onEnded(() => { audioArr[key].bl = false; that.setData({ audioArr: audioArr, }) }) }, /** * 生命周期函數--監聽頁面加載 */ onLoad: function (options) { }, /** * 生命周期函數--監聽頁面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數--監聽頁面顯示 */ onShow: function () { }, /** * 生命周期函數--監聽頁面隱藏 */ onHide: function () { }, /** * 生命周期函數--監聽頁面卸載 */ onUnload: function () { }, /** * 頁面相關事件處理函數--監聽用戶下拉動作 */ onPullDownRefresh: function () { }, /** * 頁面上拉觸底事件的處理函數 */ onReachBottom: function () { }, /** * 用戶點擊右上角分享 */ onShareAppMessage: function () { }})完整代碼可訪問本人github
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
