微信小程序 条形加载读取进度 切换音频进度。简单实现(官方文档)
生活随笔
收集整理的這篇文章主要介紹了
微信小程序 条形加载读取进度 切换音频进度。简单实现(官方文档)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
自定義實現音頻播放,連接如下
https://blog.csdn.net/qq_35349982/article/details/102778340
這個是官方的音頻
wxml文件 。主要是 slider標簽的屬性
<view class="page"><view class="page__hd"><text class="page__title">audio</text><text class="page__desc">音頻</text></view><view class="page__bd"><view class="section section_gap"><audio src="{{current.src}}" poster="{{current.poster}}" name="{{current.name}}" author="{{current.author}}" action="{{audioAction}}" bindplay="audioPlayed" bindtimeupdate="audioTimeUpdated" controls></audio></view></view><view class="section section_gap"><text class="section__title">播放</text><view class="body-view"><button bindtap="playAudio">播放</button></view></view><view class="section section_gap"><text class="section__title">暫停</text><view class="body-view"><button bindtap="pauseAudio">暫停</button></view></view><view class="section section_gap"><text class="section__title">進度</text><view class="body-view"><slider bindchange="timeSliderChanged" bindchanging="Changed" value="{{sliderV}}" max="{{sliderMax}}" left-icon="cancel" right-icon="success_no_circle"/></view></view> </view>js文件 。主要是滑動的監聽函數。設置一個bool值
Page({data: {bo:true,sliderV:0,sliderMax: 414,current: {poster: 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000',name: '此時此刻',author: '許巍',src: 'https://img.kuang100.net/daoyou/yinping/1568713339138.mp3',},audioAction: {method: 'pause'}},audioPlayed: function (e) {console.log('audio is played')},audioTimeUpdated: function (e) {if (this.data.bo) {console.log("正在播放")//設置滾動條this.setData({sliderV: e.detail.currentTime,bo: true});this.duration = e.detail.duration;}},timeSliderChanged: function (e) {console.log("拖動完成")if (!this.data.bo){this.setData({bo:true,audioAction: {method: 'setCurrentTime',data: e.detail.value}});}},Changed: function(e) {console.log("正在拖動")this.setData({bo: false});},playAudio: function () {this.setData({audioAction: {method: 'play'}});},pauseAudio: function () {this.setData({audioAction: {method: 'pause'}});}, })代碼倉庫地址:https://gitee.com/gy297879328/applet_development.git
總結
以上是生活随笔為你收集整理的微信小程序 条形加载读取进度 切换音频进度。简单实现(官方文档)的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微信小程序 map 点击图标回到自己
- 下一篇: 微信小程序 条形加载读取进度 切换音频进