亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

微信小程序?qū)崿F(xiàn)播放音頻

 更新時間:2022年06月24日 11:59:39   作者:示羊online  
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)播放音頻,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

本文實(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í)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評論