微信小程序?qū)崿F(xiàn)播放音頻
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)播放音頻的具體代碼,供大家參考,具體內(nèi)容如下
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/btn_stop@2x.png' 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(); //創(chuàng)建音頻實(shí)例 ? ? 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: '確認(rèn)刪除', ? ? ? success(res) { ? ? ? ? if (res.confirm) { ? ? ? ? ? console.log('用戶點(diǎn)擊確定') ? ? ? ? ? that.removeLove(); ? ?? ? ? ? ? } else if (res.cancel) { ? ? ? ? ? console.log('用戶點(diǎn)擊取消') ? ? ? ? } ? ? ? } ? ? }) ? }, ? 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('已審核 不能刪除') ? ? } ? }, //圖片點(diǎn)擊 放大 識別 ? previewImage(e) { ? ? let url = e.currentTarget.dataset.item ? ? wx.previewImage({ ? ? ? current: "scene_img", ? ? ? urls: url.split(',') ? ? }) ? } })
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)錄音與音頻播放功能
- 微信小程序?qū)崿F(xiàn)音頻文件播放進(jìn)度的實(shí)例代碼
- 微信小程序多音頻播放進(jìn)度條問題
- 微信小程序獲取音頻時長與實(shí)時獲取播放進(jìn)度問題
- IOS中微信小程序播放緩存的音頻文件的方法
- 微信小程序page的生命周期和音頻播放及監(jiān)聽實(shí)例詳解
- 微信小程序開發(fā)之錄音機(jī) 音頻播放 動畫實(shí)例 (真機(jī)可用)
- 微信小程序-圖片、錄音、音頻播放、音樂播放、視頻、文件代碼實(shí)例
- 微信小程序 audio音頻播放詳解及實(shí)例
- 微信小程序?qū)崿F(xiàn)播放音頻功能
相關(guān)文章
極酷的javascirpt,讓你隨意編輯任何網(wǎng)頁
極酷的javascirpt,讓你隨意編輯任何網(wǎng)頁...2007-02-02使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解
今天小編就為大家分享一篇使用bootstrap實(shí)現(xiàn)下拉框搜索功能的實(shí)例講解,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08javascript GUID生成器實(shí)現(xiàn)代碼
javascript GUID生成器實(shí)現(xiàn)代碼, 需要的朋友可以參考下。2009-10-10Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法
今天小編就為大家分享一篇Layui之table中的radio在切換分頁時無法記住選中狀態(tài)的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個計算當(dāng)年還剩多少時間的倒數(shù)計時程序
這篇文章主要介紹了JavaScript 網(wǎng)頁中實(shí)現(xiàn)一個計算當(dāng)年還剩多少時間的倒數(shù)計時程序,需要的朋友可以參考下2017-01-01Bootstrap基本樣式學(xué)習(xí)筆記之表單(3)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之表單基本樣式的相關(guān)資料,為大家分享了三種表單樣式,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12PHP abstract與interface之間的區(qū)別
本文是對PHP中abstract與interface之間的區(qū)別進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11再談JavaScript中bind、call、apply三個方法的區(qū)別與使用方式
這篇文章主要介紹了Javascript中bind、call、apply三個方法的使用方式,需要的朋友可以參考下2022-05-05