⼩程序：⾳乐播放器带进度条
代码
JS
// pages/meddledetails/meddledetails.js
var config =require('../../config.js')
var util =require('../../utils/utils.js')
var WxParse =require('../../wxParse/wxParse.js');
var app =getApp()
const innerAudioContext = wx.createInnerAudioContext();
const bgMusic = wx.getBackgroundAudioManager()
Page({
/**
* 页⾯的初始数据
*/
data:{
list:[],
id:'',
state:'',
isOpen:false,//播放开关
starttime:'00:00',//正在播放时长
duration:'00:00',//总时长
showTime2:'00:00',
offset:'',
},
/**
* ⽣命周期函数--监听页⾯加载
*/
html播放音乐代码onLoad:function(options){
var that = this;
/
/全局监听停⽌事件监听浮窗关闭事件
that.setData({
starttime:'00:00',
isOpen:false,
offset:0
})
})
//全局监听⾳乐播放暂停事件
that.setData({
isOpen:false,
})
})
that.setData({
id: options.id,
options: options,
})
//去调⽤接⼝
that.loadTrade(options)
// this.Initialization();
// this.loadaudio();
},
/**
* 调取接⼝获取⼲预详情
*/
loadTrade:function(options){
var that = this;
var param ={
openid: app.globalData.openid,
token: ken,
id: that.data.id
}
/
/ console.log(param)
wx.showLoading({
title:'加载中',
})
var url = ddle_detail;
util.postrequest(url, param,function(res){
// console.log(res.data)
wx.hideLoading()
if(res.data.status ==1){
WxParse.wxParse('desc','html', res.data.info.desc, that,5);
var list = res.data.info;
that.setData({
list: list,
state: list.is_collect,
audiosrc: list.audio,
});
}else{
wx.showToast({
title: res.data.info,
icon:'none',
duration:2000,
})
}
})
},
/**
* ⽣命周期函数--监听页⾯初次渲染完成
*/
onReady:function(){
// Load(this.data.option)
},
/**
* ⽣命周期函数--监听页⾯显⽰
*/
onShow:function(){
// if (this.data.options){
// Load(this.data.options)
// }
},
/**
* 点击播放
* 点击播放
*/
listenerButtonPlay:function(){
var that = this
if(that.data.offset){
bgMusic.play();
bgMusic.seek(this.data.offset);
that.setData({
isOpen:true,
})
return false;
}
// setInterval(() => {
//  wx.getBackgroundAudioPlayerState({
/
/    success: (res) => {
//      let status = res.status
//      let duration = res.duration
//      var duration1 = this.formatTime(duration);
//      if (status === 1) {
//        that.setData({
//          // cpTime: cpTime,
//          duration: duration1,
//        })
//      }
//    }
/
/  })
// })
//bug ios 播放时必须加title 不然会报错导致⾳乐不播放
bgMusic.title = that.data.list.title
bgMusic.epname = that.data.list.title
bgMusic.src = that.data.audiosrc;//播放⾳乐的地址⽹址    TimeUpdate(()=>{
//bgMusic.duration总时长  bgMusic.currentTime当前进度// console.log(bgMusic.currentTime)
var duration = bgMusic.duration;
var offset = bgMusic.currentTime;
// console.log('播放' + offset)
var currentTime =parseInt(bgMusic.currentTime);
if(parseInt(currentTime /60).toString().length <=1){
var min ="0"+parseInt(currentTime /60)
}else{
var min =parseInt(currentTime /60);
}
// var min = "0" + parseInt(currentTime / 60);
var max =parseInt(bgMusic.duration);
var sec = currentTime %60;
if(sec <10){
sec ="0"+ sec;
};
var starttime = min +':'+ sec;/*  00:00  */
that.setData({
offset: currentTime,
starttime: starttime,
max: max,
})
})
//播放结束
that.setData({
starttime:'00:00',
isOpen:false,
offset:0
})
// console.log("⾳乐播放结束");
// console.log("⾳乐播放结束");
return false;
})
bgMusic.play();
// console.log('播')
that.setData({
isOpen:true,
})
})
// that.setData({
//  isOpen: true,
// })
},
//暂停播放
listenerButtonPause(e){
var that = this
// console.log('暂停播放')
bgMusic.pause()
// that.setData({
//  isOpen: false,
// })
// console.log("结束");
that.setData({
isOpen:false,
})
})
},
/
/停⽌播放
listenerButtonStop(){
// console.log('停⽌播放')
var that = this
bgMusic.stop()
},
// 进度条拖拽
sliderChange(e){
var that = this
var offset =parseInt(e.detail.value);
// console.log('进度条拖拽进度条拖拽进度条拖拽') // console.log(offset)
bgMusic.play();
bgMusic.seek(offset);
that.setData({
isOpen:true,
})
},
/**
* ⽣命周期函数监听页⾯卸载
*/
onUnload:function(){
// console.log('监听页⾯卸载')
var that = this
that.listenerButtonStop()//停⽌播放
// console.log("离开")
},
/**
* ⽣命周期函数监听隐藏卸载
*/
onHide:function(){
onHide:function(){
// console.log('监听隐藏卸载')
// //暂停播放
/
/ innerAudioContext.pause();
// // //
// this.setData({
//  isPlayAudio: false,
// });
},
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;
},
})
WXML
<view class='audioPlayer'>
<view class='player'>
<image src='{{list.image}}'class=''></image>
<view class='audioControls'>
<view class='flex'>
<view class='bottom'>
<!--按钮-->
<view wx:if="{{isOpen}}">
<image src='/images/play_end.png' bindtap="listenerButtonPause"/>
</view>
<view wx:else>
<image src='/images/play_start.png' bindtap="listenerButtonPlay"/>
</view>
</view>
<view class='slider'>
<slider bindchanging="sliderChange" block-size="12px" step="2" value="{{offset}}" max="{{max}}" selected-color="#4c9dee"/> </view>
<view class='time'>
{{starttime}}
<!--/{{showTime2}}  wx:if="{{isOpen}}"-->
</view>
</view>
</view>
</view>
</view>
WXSS

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。