微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語音播放效果

本文實(shí)例為大家分享了微信小程序類似平常微信語音聊天的效果，不會(huì)互相干擾播放狀態(tài)，供大家參考，具體內(nèi)容如下

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括蓬萊網(wǎng)站建設(shè)、蓬萊網(wǎng)站制作、蓬萊網(wǎng)頁制作以及蓬萊網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，蓬萊網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到蓬萊省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

根據(jù)開發(fā)的需求，先理清一下思路，點(diǎn)擊語音播放與暫停/停止，切換下一個(gè)語音等；
小程序?qū)τ赼udio的組件的一些api方法已經(jīng)不支持了，詳情可以參看：微信小程序audio組件文檔

微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語音播放效果

嗯嗯，這下子，該怎么辦呢？

就如上面提到，小程序1.60版本后，給開發(fā)者提供了這個(gè)wx.createInnerAudioContext()api…具體使用可以看文檔；

好的，現(xiàn)在該上代碼了！

-wxml結(jié)構(gòu)：

<block wx:for="{{audioArr}}" wx:key="content" wx:for-item="v" wx:for-index="key">
 <view class='output-audio'>

 <!-- 默認(rèn)狀態(tài) -->
 <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>

 <!-- 當(dāng)前正在播放狀態(tài) -->
 <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

//創(chuàng)建audio控件
const myaudio = wx.createInnerAudioContext(); 

Page({

 /**
 * 頁面的初始數(shù)據(jù)
 */
 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;

 //切換顯示狀態(tài)
 for (var i = 0; i < audioArr.length; i++) {
 audioArr[i].bl = false;
 }
 audioArr[key].bl = true;
 
 myaudio.play();
 
 //開始監(jiān)聽
 myaudio.onPlay(() => {
 that.setData({
 audioArr: audioArr
 })
 })

 //結(jié)束監(jiān)聽
 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;
 //切換顯示狀態(tài)
 for (var i = 0; i < audioArr.length; i++) {
 audioArr[i].bl = false;
 }
 audioArr[key].bl = false;

 myaudio.stop();
 //停止監(jiān)聽
 myaudio.onStop(() => {
 audioArr[key].bl = false;
 that.setData({
 audioArr: audioArr,
 })
 })
 //結(jié)束監(jiān)聽
 myaudio.onEnded(() => {
 audioArr[key].bl = false;
 that.setData({
 audioArr: audioArr,
 })
 })
 }, 

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面加載
 */
 onLoad: function (options) {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
 */
 onReady: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面顯示
 */
 onShow: function () {

 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面隱藏
 */
 onHide: function () {
 
 },

 /**
 * 生命周期函數(shù)--監(jiān)聽頁面卸載
 */
 onUnload: function () {
 
 },

 /**
 * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動(dòng)作
 */
 onPullDownRefresh: function () {
 
 },

 /**
 * 頁面上拉觸底事件的處理函數(shù)
 */
 onReachBottom: function () {
 
 },

 /**
 * 用戶點(diǎn)擊右上角分享
 */
 onShareAppMessage: function () {
 
 }
})

完整代碼可訪問本人github

為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

分享名稱：微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語音播放效果
分享路徑：http://www.aaarwkj.com/article26/gopijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、網(wǎng)站策劃、做網(wǎng)站、用戶體驗(yàn)、、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

欧美一级特黄大片做受成人-亚洲成人一区二区电影-激情熟女一区二区三区-日韩专区欧美专区国产专区

微信小程序?qū)崿F(xiàn)類似微信點(diǎn)擊語音播放效果