微信小程序：音乐播放器带进度条

代码

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:'',},/*** 生命周期函数--监听页面加载*/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;}

微信小程序：音乐播放器带进度条相关推荐

微信小程序音乐播放器
趁周末做一个简单的微信小程序音乐播放器,源码已留. 播放列表首页wxml <swiper class="swiper" indicator-dots='{{swipterSe ...
（附源码）springboot+基于微信小程序音乐播放器的设计与实现毕业设计271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
springboot+基于微信小程序音乐播放器的设计与实现毕业设计-附源码271156
Springboot音乐播放小程序的设计与实现摘要本文设计了一种基于微信小程序的音乐播放器,系统为人们提供了方便快捷.即用即搜的音乐搜索播放服务,包括音乐资讯.音乐库推荐.交流论坛.注册登录.最 ...
微信小程序-音乐播放器
前言本文主要通过微信小程序的媒体API来实现一个简单的音乐播放器,主要实现的功能有音乐的切换.单曲循环.播放进度条的拖拽.播放与暂停和自定义音乐列表弹窗功能. 效果图主要目录文件 |--image ...
微信小程序——音乐播放器
音乐播放器前言主页三个标签页推荐页播放器页播放列表页逻辑前言使用swiper组件完成三个标签页的切换,并且实现轮播图.scroll-view组件完成滚动视图,使用微信小程序提供的音乐 ...
基于微信小程序音乐播放器
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...
01. 微信小程序音乐播放器
项目简介最近在学微信小程序,所以打算做一个音乐播放器的微信小程序. 项目需求(原型图) 这个是我做的原型图,比较简陋(有些界面直接用了网易云音乐小程序的截图,因为是仿着网易云音乐来做的) 首页播放 ...
java基于微信小程序音乐播放器分享系统 uniapp 小程序
音乐播放器小程序的设计主要是对系统所要实现的功能进行详细考虑,确定所要实现的功能后进行界面的设计,在这中间还要考虑如何可以更好的将功能及页面进行很好的结合,方便用户可以很容易明了的找到自己所需要的信息 ...
计算机实战项目、毕业设计、课程设计之含论文+辩论PPT+源码等]微信小程序音乐播放器小程序+后台管理系统
音乐播放器平台+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采用前后台前后分离 ...
java微信小程序音乐播放器分享系统
随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,音乐播放器小程序被用户普遍使用,为方便用户能够可以随时 ...

微信小程序：音乐播放器带进度条

JS

WXML

WXSS

微信小程序：音乐播放器带进度条相关推荐

最新文章

热门文章