微信小程序實現播放音頻
本文實例為大傢分享瞭微信小程序實現播放音頻的具體代碼,供大傢參考,具體內容如下
wxml:
<!-- 語音 --> <view wx:if="{{content.mp3.length > 0 }}"> <view class='audio' bindtap='musicStart'> <view class='audio_btn'> <image src='/img/btn_play3.png' class='image-full' wx:if="{{playStatus}}"></image> <!-- 未播放--> <image src='/img/[email protected]' class='image-full' wx:else catchtap='canel_handover'></image> <!-- 播放中--> </view> <view class='audio_pro'> <slider class="drag" step="10" value="{{curTimeVal}}" max="{{duration}}" backgroundColor="#efefef" activeColor="#90BED5" /> </view> <text class='audio_text'>{{formatedPlayTime}}</text> </view> </view>
wxss:
/* 傳語音 */ .audio{ display:flex; position:relative; height:140rpx; line-height:140rpx; background:#f7f7f7; width:690rpx; margin:0 auto; } .audio_img{ position: absolute; top:-15rpx; right:-15rpx; width:30rpx; height:30rpx; } .audio_btn{ width:88rpx; height:88rpx; margin-top:28rpx; margin-left:42rpx } .audio_pro{ margin-top:36rpx; margin-left:20rpx; width:410rpx; } .audio_text{ font-weight: bold; margin-left:36rpx; color:#90BED5; font-size: 10pt }
js:
const app = getApp(); let innerAudioContext = wx.createInnerAudioContext(); //創建音頻實例 Page({ data: { content : {}, formatedPlayTime: '00:00', playStatus : true, //未播放的圖片 curTimeVal: 0, }, // 音頻播放 musicStart: function (e) { let that = this that.setData({ playStatus : false}) var musicUrl = that.data.content.mp3[0] //音頻url console.log('musicUrl', musicUrl) innerAudioContext.src = musicUrl; innerAudioContext.autoplay = true innerAudioContext.play(); innerAudioContext.onTimeUpdate((res) => { console.log('onTimeUpdate', res) console.log("duratio的值:", innerAudioContext.duration) that.setData({ duration: innerAudioContext.duration.toFixed(2) * 100, curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100, formatedPlayTime: this.formatTime(innerAudioContext.currentTime) }) if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) { that.setStopState(that) } innerAudioContext.onEnded(() => { that.setStopState(that) }) }) }, updateTime: function () { let that = this; innerAudioContext.onTimeUpdate((res) => { console.log(res) console.log("duratio的值:", innerAudioContext.duration) that.setData({ duration: innerAudioContext.duration.toFixed(2) * 100, curTimeVal: innerAudioContext.currentTime.toFixed(2) * 100, formatedPlayTime: this.formatTime(innerAudioContext.currentTime) }) }) if (innerAudioContext.duration.toFixed(2) - innerAudioContext.currentTime.toFixed(2) <= 0) { that.setStopState(that) } innerAudioContext.onEnded(() => { that.setStopState(that) }) }, canel_handover() { // innerAudioContext.offPause(); //取消錄音暫停 innerAudioContext.pause(); //語音暫停 this.setData({ playStatus: true }) }, setStopState: function (that) { that.setData({ curTimeVal: 0, formatedPlayTime: 0, playStatus: true, //圖片展示為未播放 }) innerAudioContext.stop(); // }, formatTime: (time) => { time = Math.floor(time); var m = Math.floor(time / 60).toString(); m = m.length < 2 ? '0' + m : m; var s = (time - parseInt(m) * 60).toString(); s = s.length < 2 ? '0' + s : s; return m + ':' + s; }, onLoad: function (options) { console.log('options', options) var that = this var id = options.jsonStr app.agriknow.LoveHouseOthers(id).then(res => { var result = res.data.Data[0] that.setData({ content: result }) }).catch(err => { console.log(err) }) }, remove(){ var that = this wx.showModal({ title: '提示', content: '確認刪除', success(res) { if (res.confirm) { console.log('用戶點擊確定') that.removeLove(); } else if (res.cancel) { console.log('用戶點擊取消') } } }) }, onShow: function (){ var that = this setTimeout(function () { that.setData({ loading: false }) }, 1000) }, removeLove(){ var id = this.data.content.id if (this.data.content.status == 1 || this.data.content.status == '1'){ app.agriknow.removeLove(id).then(res => { if (res.data.Code == 200) { app.way.toast('刪除成功') setTimeout(function () { app.way.nav('/pages/mine/passLove/passLove') }, 1000) } else { app.way.alert('刪除失敗') } }).catch(err => { console.log(err) }) }else{ app.way.modal('已審核 不能刪除') } }, //圖片點擊 放大 識別 previewImage(e) { let url = e.currentTarget.dataset.item wx.previewImage({ current: "scene_img", urls: url.split(',') }) } })
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。