2023年7月11日发(作者：)

微信⼩程序：⾳乐播放器带进度条代码JS// pages/meddledetails/ config = require('../../')var util = require('../../utils/')var WxParse = require('../../wxParse/');var app = getApp()const innerAudioContext = InnerAudioContext();const bgMusic = kgroundAudioManager()Page({ /** *

页⾯的初始数据 */ data: { list: [], id: '', state: '', isOpen: false, //播放开关 starttime: '00:00', //正在播放时长 duration: '00:00', //总时长 showTime2: '00:00', offset:'', }, /** *

⽣命周期函数--监听页⾯加载 */ onLoad: function(options) { var that = this; //全局监听停⽌事件

监听浮窗关闭事件 (() => { a({ starttime: '00:00', isOpen: false, offset: 0 }) }) //全局监听⾳乐播放暂停事件 e(() => { a({ isOpen: false, }) }) a({ id: , options: options, }) //去调⽤接⼝ ade(options) // lization(); // dio(); }, /** *

调取接⼝

获取⼲预详情 */ loadTrade: function(options) { var that = this; var param = { openid: , token: , id: } // (param) ading({ title: '加载中', }) var url = _detail; quest(url, param, function(res) { // () ading() if ( == 1) { e('desc', 'html', , that, 5); var list = ;

a({ list: list, state: _collect, audiosrc: , }); } else { ast({ title: , icon: 'none', duration: 2000, }) } }) }, /** *

⽣命周期函数--监听页⾯初次渲染完成 */ onReady: function() { // () }, /** *

⽣命周期函数--监听页⾯显⽰ */ onShow: function() { // if (s){ // (s) // }

}, /** *

点击播放 *

点击播放 */ listenerButtonPlay: function () { var that = this if () { (); (); a({ isOpen: true, }) return false; }

// setInterval(() => { // kgroundAudioPlayerState({ // success: (res) => { // let status = // let duration = on // var duration1 = Time(duration); // if (status === 1) { // a({ // // cpTime: cpTime, // duration: duration1, // }) // } // } // }) // }) //bug ios

播放时必须加title

不然会报错导致⾳乐不播放 = = = rc; //播放⾳乐的地址

⽹址 Update(() => { //on总时长 tTime当前进度 // (tTime) var duration = on; var offset = tTime; // ('播放' + offset) var currentTime = parseInt(tTime); 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(on); var sec = currentTime % 60; if (sec < 10) { sec = "0" + sec; }; var starttime = min + ':' + sec; /* 00:00 */

a({ offset: currentTime, starttime: starttime, max: max, }) }) //播放结束 d(() => { a({ starttime: '00:00', isOpen: false, offset: 0 }) // ("⾳乐播放结束"); // ("⾳乐播放结束"); return false; }) (); (() => { // ('播') a({ isOpen: true, }) }) // a({ // isOpen: true, // }) }, //暂停播放 listenerButtonPause(e) { var that = this // ('暂停播放') () // a({ // isOpen: false, // }) e(() => { // ("结束"); a({ isOpen: false, }) })

}, //停⽌播放 listenerButtonStop() { // ('停⽌播放') var that = this () },

//

进度条拖拽 sliderChange(e) { var that = this var offset = parseInt(); // ('进度条拖拽进度条拖拽进度条拖拽') // (offset) (); (offset); a({ isOpen: true, }) },

/** *

⽣命周期函数

监听页⾯卸载 */ onUnload: function() { // ('监听页⾯卸载') var that = this erButtonStop() //停⽌播放 // ("离开") }, /** *

⽣命周期函数

监听隐藏卸载 */ onHide: function() { onHide: function() { // ('监听隐藏卸载') // //暂停播放 // (); // // // // a({ // isPlayAudio: false, // }); }, formatTime: (time) => { time = (time); var m = (time / 60).toString(); m = < 2 ? '0' + m : m; var s = (time - parseInt(m) * 60).toString(); s = < 2 ? '0' + s : s; return m + ':' + s; },

})WXML {{starttime}} layer{ 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;}