效果图

HTML

<view class="box"><!-- 毛玻璃 --><view class="bgImage"><image src="{{img}}" /></view><view class="top"><view class="topcen" wx:if="{{showlyric===false}}"><image src="{{img}}" class="{{stop===true?'urlpi':'urlpic'}}"></image></view></view><!-- 滑块上面 --><view class="up"><view wx:for="{{up}}" wx:key="index" class="topfor"><image src="{{item}}" style="width:40rpx;height:40rpx"></image></view></view><!-- 滑块左右的时间 --><view class="timeall"><view class="time"><view>{{nowtime}}</view><view>{{showTotalTime}}</view></view></view><!-- 滑块 --><slider value="{{value}}" inactive-color="rgb(112, 112, 112)" active-color="red" class="mid" min="0" max="{{maxtiem}}" step="1" bindchange="change" bindchanging="changeing" /><!-- 下面icon --><view class="down"><view wx:for="{{down}}" wx:key="index" class="downfor"><!-- 播放/暂停按钮 --><image wx:if="{{index===2 && stop===true}}" src="{{item}}" bindtap="stop" style="width:90rpx;height:90rpx"></image><image wx:if="{{index===2 && stop===false}}" src="../../images/stop.png" bindtap="stop" style="width:90rpx;height:90rpx"></image><!-- 列表循环/单曲循环/随机播放图标 --><image wx:if="{{index===0 && cycle ===0}}" src="../../images/cycle.png" bindtap="random" style="width:45rpx;height:45rpx"></image><image wx:if="{{index===0 && cycle ===1}}" src="../../images/Single_cycle.png" bindtap="random" style="width:45rpx;height:45rpx"></image><image wx:if="{{index===0 && cycle ===2}}" src="{{item}}" bindtap="random" style="width:45rpx;height:45rpx"></image><!-- 其他图标 --><image wx:if="{{index===1}}" src="{{item}}" bindtap="above" style="width:45rpx;height:45rpx"></image><image wx:if="{{index===3}}" src="{{item}}" bindtap="following" style="width:45rpx;height:45rpx"></image><image wx:if="{{index===4}}" src="{{item}}" bindtap="stop" style="width:45rpx;height:45rpx"></image></view></view><!-- 歌词 --><view class="bom" bindtap="showlyric"><view catchlongtap="lyr"><scroll-view scroll-y="true" class="{{showlyric===true?'display':'none'}}" style="height:600rpx;" scroll-with-animation scroll-top="{{location*30}}" wx:if="{{showlyric===true}}" scroll-top="{{location*32}}" bindscroll="scroll" bindtouchstart="start" bindtouchend="end"><view style="height:284rpx"></view><view wx:for="{{lyric}}" wx:key="index" class="lyricfor" style="text-align:center;"><view class="{{location===index?'red1':''}}">{{item}}</view></view><view style="height:300rpx"></view></scroll-view></view></view><!-- 歌名,歌手 --><view class="song"><view style="margin-top:20rpx">{{songname}}</view><view class="singer"><view wx:for="{{singer}}" wx:key="index" style="margin-left:20rpx">{{item.name}}</view></view></view><!-- 滚动水平线 --><view class="center" wx:if='{{isScroll===true}}'><view class="center1"><view>{{lyrictimeshow}}</view><view bindtap="goto">播放</view></view></view>
</view>

JS

import dayjs from '../../lib/dayjs.min.js'
import api from "../../http/api"
let bg = wx.getBackgroundAudioManager() //全局变量
let lineTimeId = '';//水平线定时器
let isDelete = false;//是否删除开启的定时器
Page({/*** 页面的初始数据*/data: {cycle: 0, //控制(列表循环0)(单曲循环1)(随机2)stop: false, //暂停开始判断条件show: true, //定时器判断showTotalTime: "00:00",//总时长value: 0, //滑块绑定的值nowtime: '00:00',//当前播放的时长maxtiem: 0,//最大时长id: '',  //发请求用的idisScroll: false, //是否显示滚动水平线songname: '', //歌名singer: [],  //演唱者lyric: [],//歌词lyrictime: [],//歌词时间lyrictimeshow: '00:00',//横线指示的时间location: 0,locationValue: 0,//歌词滚动具体位置locationTime: 0,//歌词定位时间showlyric: false,//是否展示歌词url: '',  //用来装发送拿到url的请求img: '',  //用来装发送拿到图片的请求index: 0,  //用来接受拿到传入index的值idplay: [], //用来接收传入的id数组up: ['../../images/like.png','../../images/download.png','../../images/vip.png','../../images/comments.png','../../images/three.png'],down: ['../../images/random.png','../../images/On_a.png','../../images/pla.png','../../images/next.png','../../images/playlist.png'],},//歌词滚动scroll(e) {if (this.data.showlyric === true) {let i = parseInt(e.detail.scrollTop / 32);// console.log(e.detail.scrollTop, i, "i")this.setData({locationTime: this.data.lyric[i],lyrictimeshow: dayjs(this.data.lyrictime[i] * 1000).format("mm:ss")});}},//开始start(e) {console.log('开始')this.setData({isScroll: true,show: false})isDelete = false;if (lineTimeId) {clearTimeout(lineTimeId);lineTimeId = '';}},//歌词拖动点击播放goto(e) {//把(mm:ss)转化成(ss)let a = Number(this.data.lyrictimeshow.split(':')[0] * 60) + Number(this.data.lyrictimeshow.split(':')[1].split('.')[0]);//跳转console.log(a, "a")bg.seek(a)this.setData({show: true})},//结束end(e) {console.log('结束')isDelete = true;if (lineTimeId = !'') {lineTimeId = setTimeout(() => {if (isDelete === true) {this.setData({isScroll: false});lineTimeId = '';}}, 4000);}//定时器延时启动setTimeout(() => {this.setData({show: true})}, 4000)},//是否展示歌词showlyric() {if (this.data.showlyric === false) {this.data.showlyric = truethis.setData({showlyric: this.data.showlyric})} else if (this.data.showlyric === true) {this.data.showlyric = falsethis.setData({showlyric: this.data.showlyric,isScroll: false})}console.log(this.data.showlyric)},//控制播放顺序 列表循环/单曲循环/随机播放random() {if (this.data.cycle === 0) {this.data.cycle = 1this.setData({cycle: this.data.cycle})} else if (this.data.cycle === 1) {this.data.cycle = 2this.setData({cycle: this.data.cycle})} else if (this.data.cycle === 2) {this.data.cycle = 0this.setData({cycle: this.data.cycle})}},//定时器playmusic() {setInterval(() => {if (this.data.show === true) {this.data.showTotalTime = dayjs(bg.duration * 1000).format('mm:ss')this.data.nowtime = dayjs(bg.currentTime * 1000).format('mm:ss')this.data.maxtiem = parseInt(bg.duration)  //解析一个字符传并返回一个整数this.data.value = parseInt(bg.currentTime)this.setData({value: this.data.value,showTotalTime: this.data.showTotalTime,nowtime: this.data.nowtime,maxtiem: this.data.maxtiem})if (this.data.showlyric === true) {for (let i = 0; i < this.data.lyric.length; i++) {// console.log(this.data.value, this.data.lyrictime[this.data.lyric.length - 1])if (this.data.value > this.data.lyrictime[this.data.lyric.length - 1]) {//最后的歌词的时间比较this.setData({location: this.data.lyric.length - 1,lyrictimeshow: dayjs(this.data.lyrictime[this.data.lyric.length - 1] * 1000).format('mm:ss')});break;}// console.log(this.data.nowtime, this.data.lyric[i]);if (this.data.value >= this.data.lyrictime[i] && this.data.value < this.data.lyrictime[i + 1]) {// console.log("歌词滚动");this.setData({location: i,lyrictimeshow: dayjs(this.data.lyrictime[i] * 1000).format('mm:ss')});break;}}}// console.log(this.data.showTotalTime, "总时长mm-ss")// console.log(this.data.nowtime, "当前播放的时长mm-ss")// console.log(this.data.maxtiem, "最大时长s")// console.log(this.data.value, "value s")}}, 1000)},//滑动改变后change(event) {bg.seek(event.detail.value)console.log(event.detail.value, "event.detail.value")this.data.show = truethis.setData({show: this.data.show})},//滑动中事件changeing(event) {let a = falsethis.setData({show: a,nowtime: dayjs(event.detail.value * 1000).format('mm:ss')})},//暂停stop() {if (this.data.stop === false) {bg.pause()this.data.stop = truethis.setData({stop: this.data.stop})} else {bg.play()this.data.stop = falsethis.setData({stop: this.data.stop})}},//获取urlgetUrl() {if (this.data.id) {api.url(this.data.id).then(res => {if (res.data[0].url) {this.data.url = res.data[0].urlthis.setData({url: this.data.url})bg.src = this.data.urlbg.title = "123"} else {this.following()}}).catch(err => {console.log(err)})} else { this.following() }},//获取图片getImg() {api.ids(this.data.id).then(res => {console.log(res.songs[0].al.name)console.log(res.songs[0].ar)this.data.songname = res.songs[0].al.namethis.data.singer = res.songs[0].arthis.data.img = res.songs[0].al.picUrlthis.setData({img: this.data.img,songname: this.data.songname,singer: this.data.singer})}).catch(ree => {console.log(ree)})},//获取歌词getLyric() {api.lyric(this.data.id).then(res => {let a = res.lrc.lyric.split('\n')let ci = [], citime = []a.map(item => {// 时间let time = item.match(new RegExp("\\[[0-9]*:[0-9]*.[0-9]*\\]", "g"))if (time) {time = time[0].replace("[", '').replace("]", '')let it = Number(time.split(':')[0] * 60) + Number(time.split(':')[1].split('.')[0]);//毫秒：+Number(time.split(':')[1].split('.')[1]);// console.log(time,dayjs(time).format('mm:ss'));citime.push(it)ci.push(item.replace(new RegExp("\\[[0-9]*:[0-9]*.[0-9]*\\]", "g"), ''))}})//去空let a1 = [], a2 = [];for (let i = 0; i < ci.length; i++) {if (citime[i] && ci[i]) {//当前是否有歌词a1.push(citime[i]);a2.push(ci[i]);}}this.data.lyrictime = a1this.data.lyric = a2this.setData({lyrictime: this.data.lyrictime,lyric: this.data.lyric})// console.log(this.data.lyrictime, "lyrictime")// console.log(this.data.lyric, 'lyric')wx.hideLoading()}).catch(ree => {console.log(ree)})},//上一首歌above() {this.setData({stop: false})if (this.data.index > 0) {this.setData({index: this.data.index - 1})this.above1()} else {this.setData({index: this.data.idplay.length - 1})this.above1()}},//上一首歌方法above1() {this.data.id = this.data.idplay[this.data.index]this.setData({id: this.data.id})// 发送请求查看该id是否有版权api.music(this.data.id).then(res => {if (res.success === true) {this.getImg()this.getUrl()this.getLyric()//当上一首歌曲url地址为null时候继续调用此方法if (this.data.url === null) {wx.showToast({title: "未找到地址,请听上一首",icon: 'none',duration: 1000//持续的时间})setTimeout(() => {this.above()}, 1000)}}}).catch(ree => {// 如果没有版权wx.showToast({title: ree.response.data.message + "请听上一首",icon: 'none',duration: 1000//持续的时间})//再次调用次此方法查看上一首setTimeout(() => {this.above()}, 1000)})},//下一首歌following() {this.setData({stop: false})//判断只有当当前下标不为最后一个时if (this.data.index * 1 < this.data.idplay.length - 1) {if (this.data.cycle === 0) { this.data.index = this.data.index * 1 + 1 }else if (this.data.cycle === 1) { this.data.index = this.data.index }else if (this.data.cycle === 2) {let num = parseInt(Math.random() * ((this.data.idplay.length - 1) - 0 + 1) + 0)this.data.index = numconsole.log(num + 1, '第几首歌')}this.setData({index: this.data.index})this.data.id = this.data.idplay[this.data.index]this.setData({id: this.data.id})//发送请求查看该id是否有版权// 如果有api.music(this.data.id).then(res => {console.log(res)this.getImg()this.getUrl()this.getLyric()//当拿到的url为空时候if (this.data.url === null) {wx.showToast({title: "未找到地址,请听下一首",icon: 'none',duration: 1000//持续的时间})this.following()}}).catch(ree => {// 如果没有有wx.showToast({title: ree.response.data.message + "请听一首",icon: 'none',duration: 1000//持续的时间})//再次调用次此方法查看下一首setTimeout(() => {this.following()}, 1000)})} else if (this.data.index * 1 === this.data.idplay.length - 1) {this.setData({index: 0})console.log(this.data.index, "index")this.following()}},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {wx.showLoading({title: '加载中',})this.data.index = options.indexthis.data.idplay = options.id.split(",")this.setData({index: this.data.index,idplay: this.data.idplay})this.data.id = this.data.idplay[this.data.index]this.setData({id: this.data.id})console.log(this.data.id, "id")this.getImg()this.getUrl()this.playmusic()this.getLyric()//监听音乐自然结束bg.onEnded(() => {//播放下一首  this.following()})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

CSS

.urlpic {width: 550rpx;height: 550rpx;border-radius: 50%;animation: rock 20s linear infinite;animation-delay: 0s;animation-direction: normal;animation-play-state: running;
}.urlpi {width: 550rpx;height: 550rpx;border-radius: 50%;animation: rock 20s linear infinite;animation-delay: 0s;animation-direction: normal;animation-play-state: paused;
}@keyframes rock {0% {transform: rotate(0deg)}100% {transform: rotate(360deg)}
}.top {background-color: rgba(255, 250, 240, 0);width: 100%;display: flex;justify-content: center;align-items: center;position: absolute;top: 150rpx;
}.topcen {width: 580rpx;height: 580rpx;border-radius: 50%;border: 1rpx solid rgb(163, 163, 163);display: flex;justify-content: center;align-items: center;
}.up {width: 100%;display: flex;align-items: center;position: absolute;bottom: 400rpx;
}.down {width: 100%;display: flex;align-items: center;position: absolute;bottom: 120rpx;
}.topfor,
.downfor {flex: 1;display: flex;justify-content: center;align-items: center;
}.box {width: 100%;height: 100vh;background-color: rgba(138, 132, 132, 0.479);
}.play {width: 80rpx;height: 80rpx;
}.middle {display: flex;width: 80%;
}.mid {width: 70%;position: absolute;bottom: 290rpx;color: rgb(112, 112, 112);left: 80rpx;z-index: 6;}.time {width: 97%;display: flex;justify-content: space-between;align-items: center;color: white;
}.timeall {width: 100%;display: flex;justify-content: center;align-items: center;bottom: 310rpx;position: absolute;z-index: 5;
}.bgImage {filter: blur(30px);position: absolute;height: 100vw;width: 100vw;z-index: -1;
}.bgImage>image {height: 100vh;width: 100vw;
}.bom {position: absolute;width: 100%;height: 65%;z-index: 7;top: 20rpx;display: flex;justify-content: center;align-items: center;
}.alllyric {display: flex;align-items: center;flex-direction: column;color: white;height: 500rpx;font-size: 30rpx;margin-top: 200rpx;
}.lyricfor {margin-top: 20rpx;width: 550rpx;color: white;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 30rpx;
}.lyr {width: 100%;height: 60%;
}.song {width: 100%;height: 80rpx;display: flex;justify-content: center;align-items: center;flex-direction: column;color: white;font-size: 35rpx;}.singer {display: flex;font-size: 28rpx;
}.red1 {color: red;height: 70rpx;display: flex;align-items: center;justify-content: center;font-size: 33rpx;}.display {display: block;
}.none {display: none;
}.center {display: flex;justify-content: center;align-items: center;width: 100%;position: absolute;top: 34%;border: 1rpx solid gray;height: 70rpx;z-index: 999;
}.center1 {display: flex;justify-content: space-between;width: 95%;font-size: 30rpx;
}

微信小程序网易云音乐播放界面相关推荐

WeChat微信小程序网易云音乐播放链接方法
SSM+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
SSM+mysql+微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序 ...
（附源码）SSM+mysql+微信小程序网易云音乐设计与实现毕业设计261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
微信小程序网易云音乐设计与实现毕业设计-附源码261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
（附源码）SSM+mysql+微信小程序网易云音乐设计与实现毕业设计261620
基于SSM微信小程序的网易云音乐摘要随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,微信小程序的 ...
微信小程序网易云音乐视频播放切换的功能的实现
需要使用bindplay事件 <video src="{{item.data.urlInfo.url}}" object-fit="cover" bind ...
微信小程序网易云音乐轮播图右侧留白
效果图这个效果需要用到swiper里面的一个方法next-margin 使用如下: <swiper class="topListSwiper" next-margin='5 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...

微信小程序网易云音乐播放界面

微信小程序网易云

效果图

HTML

JS

CSS

微信小程序网易云音乐播放界面相关推荐

最新文章

热门文章