un-app网易云歌词滚动功能

r囧r小猫 2022-12-20 05:38 154阅读 0赞

### uni-app歌词滚动效果实现 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70_pic_center]

这个就是我实现的效果，有兴趣的话就继续往下了解叭~

我是用的网易云的api请求的歌曲

网易云网址：[网易云音乐API][API]

为了以防大家复制报错，我用的图片是远程图片

*有兴趣的小伙伴可以添加一下QQ交流群哦：1090397302*

<template>
    	<view>
    		
    		<view class="other-big" :style="{'top':top}">
    			<view class="other" :style="{'color':index==nowlirics?'#EB4A38':'#00000' , 'transform':'translateY('+ height + 'px)'}"
    			 v-for="(item,index) in arr" :key="index" style="text-align: center;">
    				{ { item.words}}
    			</view>
    		</view>
    		
    		<view class="other-width">
    			<view class="wrap">
    				<slider class="" min="0" step="1" :value="nowtimes" activeColor="#BB2C08" backgroundColor="#e9e9e9" block-size="14"
    				 block-color="#ffffff" @change="moved" @changing="moved" :max="maxTime" :activeColor="color"></slider>
    			</view>
    		</view>
    		
    		<view class="other-flex">
    			<view class="other-img">
    				<image src="https://i.loli.net/2020/11/09/yovmgqYdaxblGAc.png" mode=""></image>
    				<image @click="onBegin()" src="https://i.loli.net/2020/11/09/dwnCQBH8pGkhaxR.png" mode="" v-show="playbool"></image>
    				<image @click="onStop()" src="https://i.loli.net/2020/11/09/vyPNSZQOURFqsg5.png" mode="" v-show="!playbool"></image>
    				<image src="https://i.loli.net/2020/11/09/GjUxzkapWyDVi8n.png" mode=""></image>
    			</view>
    		</view>
    	</view>
    </template>

接下来就是js中的内容

<script>
    	export default { 
    		data() { 
    			return { 
    				playbool: false,
    				url: "",
    				lyric: "",
    				maxTime: "",
    				arr: "",
    				nowtimes: 0,
    				ok: true,
    				seconds: 0,
    				play: true,
    				nowlirics: '',
    				top: '10px',
    				scrollTop: 0,
    				height: ""
    			}
    		},
    		onLoad() { 
    			var that = this
    			var http = "https://tree.xingyuncm.cn/"
    			// 请求歌词
    			uni.request({ 
    				url: http + '/lyric',
    				method: "GET",
    				data: { 
    					id: "1297802566"
    				},
    				success: (tik) => { 
    					var left = tik.data.lrc.lyric.split("\n");
    					// console.log(left)
    					that.lyric = tik.data.lrc.lyric;
    					// 声明一个空数组
    					var arr = []
    					left.forEach((val, i) => { 
    						var words = val.split("]") //分割歌词
    						var time = words[0].slice(1, 10) //选择从下标为1到下标为10的字符串
    						// 向arr数组添加内容（时间和歌词）
    						arr.push({ 
    							// 歌词时间转换
    							time: ((time.slice(0, 2) - 0) * 60) + (time.slice(3, 5) - 0) + ((time.slice(6, 9) - 0) / 1000), //歌词时间转换为秒
    							words: words[1] ? words[1] : ""
    						})
    					})
    					that.arr = arr
    					// console.log(that.arr);
    					that.maxTime = arr[arr.length - 2].time;
    					// 请求歌曲链接
    					wx.request({ 
    						url: http + '/song/url',
    						method: "GET",
    						data: { 
    							id: "1297802566"
    						},
    						success: (res) => { 
    							// console.log(res.data.data[0].url)
    							var that = this;
    							const bgAudioMannager = uni.getBackgroundAudioManager();
    							bgAudioMannager.title = "lll";
    							bgAudioMannager.singer = "lll";
    							bgAudioMannager.src = res.data.data[0].url;
    							// 当前进度除以总时长
    							bgAudioMannager.onTimeUpdate(function() { 
    								// console.log(bgAudioMannager.duration, "总时间")
    								// console.log(bgAudioMannager.currentTime, "当前时间");
    								that.nowtimes = Number(bgAudioMannager.currentTime);
    								var realtime = Number(bgAudioMannager.currentTime)
    								for (var i = 1; i < arr.length; i++) { 
    									if (realtime < arr[i].time) { 
    										var newi = i - 1;
    										that.nowlirics = newi;
    										that.top = (newi * -30) + 250 + "px";
    										// console.log(that.top)
    										var height = 250 - newi * 30
    										// console.log(height);
    										that.height = height
    										break;
    									}
    								}
    							})
    							bgAudioMannager.onEnded(() => { 
    								bgAudioMannager.play()
    							});
    						}
    					})
    
    				}
    			})
    		},
    
    		methods: { 
    
    			// 播放
    			onBegin() { 
    				this.playbool = false;
    				// 获取背景音频管理器播放
    				const bgAudioMannager = uni.getBackgroundAudioManager();
    				bgAudioMannager.play()
    			},
    			// 暂停
    			onStop() { 
    				// 获取背景音频管理器暂停
    				this.playbool = true;
    				const bgAudioMannager = uni.getBackgroundAudioManager();
    				bgAudioMannager.pause()
    			},
    			moved(e) { 
    				// 拖动进度条跳转到指定时间
    				const bgAudioMannager = uni.getBackgroundAudioManager();
    				bgAudioMannager.seek(e.detail.value)
    				this.nowtimes = e.detail.value;
    			},
    		}
    	}
    </script>

最后就是样式了

<style>
    	.other-big { 
    		height: 700rpx;
    		overflow: hidden;
    		overflow-y: scroll;
    		line-height: 60rpx;
    		padding-bottom: 300rpx;
    	}
    
    	.wrap { 
    		width: 80%;
    	}
    
    	.other-width { 
    		display: flex;
    		justify-content: center;
    		margin-top: 10%;
    	}
    
    	.other-img image { 
    		width: 5vh;
    		height: 5vh;
    		margin: 1%;
    	}
    
    	.other-img { 
    		background-color: #DBF1E1;
    		width: 50%;
    		border-radius: 50rpx;
    		display: flex;
    		justify-content: center;
    		padding: 2%;
    	}
    
    	.other-flex { 
    		display: flex;
    		justify-content: center;
    	}
    
    	.other { 
    		transform: translateY(150px);
    		height: 30px;
    	}
    </style>

这些就是歌词滚动的全过程，代码里面有注释哦，快去试试吧！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RyZWFtX0ZldmVy_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4422c176f4074eb0949887c4a5727cf6.png
[API]: https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=neteasecloudmusicapi

发表评论取消回复

表情：

评论列表（有 0 条评论，154人围观）

还没有评论，来说两句吧...

相关阅读

相关 React之网易云音乐（实现唱片滚动以及lrc歌词滚动效果）

如下图所示，这里没有gif的图，反正效果就是唱滚动，相应的下方的歌词滚动，使用react实现，歌词是lrc，那么lrc的格式是什么样的，下面会放出图片 ![在这里插入图片描

缺乏、安全感/ 2023年06月19日 11:18/ 0 赞/ 2 阅读

相关网易实习面经——网易云音乐

> 以后所有的面经都会在微信公众号上优先发送，微信搜索不露脸的如花，即可获取最新动态。 > ![æ«ä¸æ«ï¼æ·»å æå¾®ä¿¡][format_png] >

水深无声/ 2023年03月12日 09:09/ 0 赞/ 4 阅读

相关 un-app网易云歌词滚动功能

uni-app歌词滚动效果实现 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR

r囧r小猫/ 2022年12月20日 05:38/ 0 赞/ 155 阅读

相关 django项目网易云音乐

项目说明网易云项目语言：python 前端: bootstarp 后端: django 数据库:sqlite3 项目说明

深碍√TFBOYSˉ_/ 2022年12月06日 05:45/ 0 赞/ 271 阅读

相关网易云音乐UI界面

网易云音乐UI界面接着上期的[网易云音乐搜索和下载][Link 1]，现在再添加一个功能。用pyqt5制作一个UI界面效果展示： ![在这里插入图片描述][

今天药忘吃喽~/ 2022年10月26日 14:08/ 0 赞/ 360 阅读

相关网易云音乐JS逆向

手把手教你网易云音乐JS逆向 1. 目标数据 1.搜索音乐，获取音乐id 2.获取url，下载音乐 2. 文章目录目录

深藏阁楼爱情的钟/ 2022年10月26日 01:27/ 0 赞/ 826 阅读

相关网站开发：爬取一拨网易云音乐的歌词

啦啦啦，之前一直在做个音乐网站，然后涉及到了歌词，可当时自己不懂歌词的爬取链接，所以一直采用的手录歌词的方法，费时又费力。前两天在一篇CSDN文章上发现了网易云的

深碍√TFBOYSˉ_/ 2022年02月21日 14:12/ 0 赞/ 319 阅读

相关网易云爬虫登录

网易云登录分析相关文件主要文件是`core_.js`那个文件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk

你的名字/ 2022年01月28日 08:51/ 0 赞/ 309 阅读

相关网易云音乐接口

1、根据关键词搜素 http://musicapi.leanapp.cn/search?keywords=%E6%B5%B7%E9%98%94%E5%A4%A

╰半橙微兮°/ 2021年07月24日 14:44/ 0 赞/ 615 阅读

相关网易云歌词居中滚动、点击/滑动进度条对应滚动、当前播放歌词高亮

当前播放歌词高亮: 根据当前播放时间,和歌词时间对比,获得当前歌词行数索引正常居中滚动、点击/滑动进度条对应滚动: (1)因为这

短命女/ 2021年07月24日 12:38/ 0 赞/ 737 阅读