代码
JS
// pages/meddledetails/meddledetails.jsvar 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:'',},/*** 生命周期函数--监听页面加载*/onLoad: function(options) {var that = this;//全局监听停止事件 监听浮窗关闭事件bgMusic.onStop(() => {that.setData({starttime: '00:00',isOpen: false,offset: 0})})//全局监听音乐播放暂停事件bgMusic.onPause(() => {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: app.globalData.token,id: that.data.id}// console.log(param)wx.showLoading({title: '加载中',})var url = config.meddle_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() {// this.onLoad(this.data.option)},/*** 生命周期函数--监听页面显示*/onShow: function() {// if (this.data.options){// this.onLoad(this.data.options)// }},/*** 点击播放*/listenerButtonPlay: function () {var that = thisif (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.titlebgMusic.epname = that.data.list.titlebgMusic.src = that.data.audiosrc; //播放音乐的地址 网址bgMusic.onTimeUpdate(() => {//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,})})//播放结束bgMusic.onEnded(() => {that.setData({starttime: '00:00',isOpen: false,offset: 0})// console.log("音乐播放结束");return false;})bgMusic.play();bgMusic.onPlay(() => {// console.log('播')that.setData({isOpen: true,})})// that.setData({// isOpen: true,// })},//暂停播放listenerButtonPause(e) {var that = this// console.log('暂停播放')bgMusic.pause()// that.setData({// isOpen: false,// })bgMusic.onPause(() => {// console.log("结束");that.setData({isOpen: false,})})},//停止播放listenerButtonStop() {// console.log('停止播放')var that = thisbgMusic.stop()},// 进度条拖拽sliderChange(e) {var that = thisvar 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 = thisthat.listenerButtonStop() //停止播放// console.log("离开")},/*** 生命周期函数 监听隐藏卸载*/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
.audioPlayer{width: 100%;height: 400rpx;margin-bottom: 30rpx;box-sizing: border-box;padding: 20rpx 30rpx;}.player{width: 100%;height: 100%;position: relative;}.audioBack{width: 100%;height: 100%;}.audioControls{width: 100%;height: 80rpx;background:#fff;opacity: .8;position: absolute;bottom: 0;color: white;font-size: 6pt;line-height: 80rpx;text-align: center;}.audioControls .bottom{width: 60rpx;height: 100%;}.audioControls .bottom image{margin-top: 30%;margin-left: 30%;width: 50rpx;height: 50rpx;}.audioControls .slider{width: 520rpx;height: 100%;}/* .slider{} */.slider slider{width: 100%;margin-left: 10%;margin-right: 0;}.audioControls .time{width: 30%;height: 100%;margin-right: -19px;}
