微信小程序点播插件_微信小程序:slider插件与音频的联动

本文介绍如何在微信小程序中使用slider插件与音频进行联动,包括创建音频容器、监听slider滑动、获取音频详情以及监控音频播放进度。通过slider控制音频播放位置,并实时更新播放时间。
摘要由CSDN通过智能技术生成

.wxml:

                   { {now_time?now_time:'00:00'}}                { {AudioDetail.audio_length}}            

.js:

const innerAudioContext = wx.createInnerAudioContext();//创建音频容器Page({    /*** 页面的初始数据*/    data: {        slider_value: 0//设置初始滑块位置为0    },    /*** 生命周期函数--监听页面加载*/    onLoad: function (options) {        this.setData({            slider_value: 0,            now_time: 0        });        innerAudioContext.seek(0);//设置音频初始位置为0        this.getAudioDetail();//获取一品        this.audioListen();    },    /*** 生命周期函数--监听页面卸载*/    onUnload: function () {        innerAudioContext.pause();//退出页面时,暂停音频    },

/*** 监听slider*/    listenerSlider: function (e) {        //获取滑动后的值        console.log(e.detail.value);        var per = e.detail.value / 100;        var long = per * this.data.audio_length;        this.setData({           

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值