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

uni-app歌词滚动效果实现

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

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

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

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

<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 = thisvar 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 = heightbreak;}}})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>

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

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

html5网易云歌词滚动,30行代码爬取网易云歌词(示例代码)
需求分析: 利用爬虫获取网易云音乐歌曲的歌词,效果如下: 分析:通过官方的歌词API获取歌词,例如:访问https://music.163.com/#/song?id=1417093533 则会跳转到 ...
著名音乐app网易云推广运营策划案
著名音乐app网易云推广运营策划案目录市场状况市场分析市场推广目标市场推广策略市场推广计划广告战略制定媒体渠道策划广告预算广告效果评估一. ...
python3爬取网易云歌单数据清洗_利用Python网络爬虫抓取网易云歌词
今天小编给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下:找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌曲ID: 调用网易云歌曲API,获取歌词: 将歌词写入文件,并存入本地. ...
小猿圈分享利用python网络爬虫获取网易云歌词
今天小猿圈给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下: 找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌曲ID: 调用网易云歌曲API,获取歌词: 将歌词写入文件,并存入本 ...
浅谈动感歌词：网易云歌词分析
1引言 HPLyrics歌词解析库虽然是乐乐音乐播放器中的一个歌词模块,但是目前已经支持lrc.ksc.krc.hrc等歌词格式的动感显示.最近有读者反映该开源库能否支持网易云歌词,如果要支持网易云歌 ...
java 歌词_网易云歌词爬取（java）
网上也有很多人写过的,但感觉可能都不是很细,特此写了一份,不足之处请大家多多包涵就以这首为例,给大家分享一下网易云歌词的获取 F12找到歌词的请求地址 0 通过观察可以发现就是这params和enc ...
python网易云爬虫——实现网易云歌词的爬取(输入歌手的id，即可实现歌词的爬取)
Python网易云爬虫--实现网易云歌词的爬取(输入歌手的id,即可实现歌词的爬取) 开始动手打开网易云音乐,找到任意一位歌手的歌曲界面(我们以邓紫棋的<来自天堂的魔鬼>为例). 第一步 ...
js网易云歌词解析处理，
网易云歌词解析之显示废话不多说,直接上代码,请仔细亲手跟着写一遍, 如果你看懂了,记得点赞 <!DOCTYPE html> <html><head><met ...
网易云歌词爬取（java）
网上也有很多人写过的,但感觉可能都不是很细,特此写了一份,不足之处请大家多多包涵就以这首<凉凉>为例,给大家分享一下网易云歌词的获取歌曲地址:https://music.163.com ...
java实现歌词滚动,jQuery实现的简单歌词滚动功能示例
本文实例讲述了jQuery实现的简单歌词滚动功能.分享给大家供大家参考,具体如下: jquery实现歌词滚动 1.css /* CSS Document */ * { margin: 0; paddi ...

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

uni-app歌词滚动效果实现

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

最新文章

热门文章