网易云部分解析歌词

<template><div style="background-color: #1BBC9B;"><!-- 标题 --><van-nav-bar title="歌曲详情" left-text="返回" left-arrow @click-left="onClickLeft" /><div v-for="music in music"><div style="width: 100%;margin-top: -40px;"><img :src="music.al.picUrl" /></div><div style="width: 100%;padding-top: 5px;"><p style="font-size: 15px;">歌名：{{music.name}}</p><p style="font-size: 15px;">作者：{{music.ar[0].name}}</p><div v-for="url in url"><audio :src="url.url" controls @timeupdate="tim"></audio></div></div></div><div class="niu"><div class="content" ref="cont"><p style="font-size: 15px;font-weight: 550; color: # #CCCCCC;" v-for="(x,i) in Lyrics" :ref="'Lyrics'+i" :style="{color: LyricsIndex == i ? 'white' : 'black'}">{{x.words}}</p></div></div></br> </br> </br> </br><div v-for=" o in o" style="color: white; display: flex;justify-content: space-around; height: 180px; border: white  1px solid;"><div style="width: 30%;margin-top: -50px; "><img style="width: 50%;" :src="o.user.avatarUrl" /><div></div><div>{{o.user.nickname}}</div></div><div></div><div style="width: 80%;">{{o.content}}</div></div></div>
</template><script>import Lyric from 'lrc-file-parser'export default {data() {return {music: [],url: [],o: [],Lyrics: [],musick: [],LyricsIndex: 0}},methods: {onClickLeft() {history.back();},//调用处理过的歌单参数并传过来dealwith(par) {var arr = []; //创建一个存放歌词的新数组arr = par.split("\n"); //对字符串进行分割,par 处理文件// console.log(arr);for (var i = 0; i < arr.length; i++) {var obj = {} //声明一个对象var words = arr[i].split("]"); //将歌词里的】进行删除// console.log(words);obj.words = words ? words[1] : ""; //进行容错处理，判断歌词是否存在，如果存在元素添加，如果没有就是空字符var time = words[0].slice(1, 10); //截取不需要的字符obj.time = time ? this.formatLyricsTime(time) : ""; //把时间赋给时间的timeconsole.log(this.Lyrics)this.Lyrics.push(obj)console.log(obj);}},tim(par) {console.log(par.target.currentTime)var current = par.target.currentTime;for (var i = 0; i < this.Lyrics.length; i++) {if (current < this.Lyrics[i].time) {var nowIndex = i - 1this.LyricsIndex = nowIndex;console.log(this.Lyrics[i].words)var height = 20 - nowIndex * 30;this.$refs.cont.style.transform = "translateY(" + height + "px)"break}}},formatLyricsTime(time) { //格式化歌词时间 转换成sss：msconst regSec = /:.*\./const min = parseInt(time.split(':')[0])let sec = parseInt(time.match(regSec)[0].slice(1, 3))const ms = parseInt(time.split('.')[1])if (min !== 0) {sec += min * 60}return Number(sec + '.' + ms)}},created() {var id = this.$route.query.id;console.log(id);var _this = this;var that = this//请求歌曲详情this.$axios({methods: 'post',url: 'https://tree.xingyuncm.cn//song/detail',params: {ids: id}}).then(function(res) {_this.music = res.data.songs;console.log(res.data.songs);})//请求音乐urlthis.$axios({methods: 'post',url: 'https://tree.xingyuncm.cn//song/url',params: {id: id}}).then(function(res) {_this.url = res.data.data;console.log(res.data.data);})// 提交音乐id 获取歌词this.$axios({methods: 'post',url: 'https://tree.xingyuncm.cn//lyric',params: {id: id}}).then(function(wo) {var Lyrics = wo.data.lrc.lyric;that.dealwith(Lyrics);})//提交音乐id 获取评论this.$axios({methods: 'post',url: 'https://tree.xingyuncm.cn//comment/music',params: {id: id}}).then(function(o) {_this.o = o.data.comments;console.log(o.data.comments);})}}
</script><style scoped>.niu {height: 500px;overflow: hidden;padding: 10px;}.content {transform: translateY(30px);}.lyricPanel {width: 250px;height: 400px;border: 1px solid red;overflow-y: scroll;}audio {height: 35px;}img {width: 150px;border-radius: 50%;margin-top: 50px;-webkit-animation: rotateImg 10s linear infinite;vertical-align: middle;}@keyframes rotateImg {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@-webkit-keyframes rotateImg {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}p {color: #FFFFFF;font-size: 18px;font-weight: 900;}audio {margin-top: 20px;}
</style>

网易云部分解析歌词相关推荐

Python-Selenium爬虫之网易云音乐歌曲歌词爬取并保存到本地（详解分析+代码实现）
文章目录一.项目介绍二.所需技术三.网页分析 3.1 分析一级页面响应内容 3.2 分析二级页面响应内容 3.3 分析三级页面响应内容 3.4 分析四级页面响应内容四.分析小结五.代码实现 ...
网易云音乐的歌词无法在桌面歌词显示
现象:Win10,已正确加载歌词,在软件内可以看到歌词,在桌面歌词框内无法显示,歌词是英文的原因:默认的歌词字体"微软雅黑"不支持英文解决:在网易云音乐中设置->歌词- ...
网站开发：爬取一拨网易云音乐的歌词
啦啦啦,之前一直在做个音乐网站,然后涉及到了歌词,可当时自己不懂歌词的爬取链接,所以一直采用的手录歌词的方法,费时又费力.前两天在一篇CSDN文章上发现了网易云的歌词链接.然后就立马利用起来爬取一拨歌 ...
python爬取网易云音乐薛之谦歌词数据，生成词云
老薛最近频频上热搜,因为老薛的歌大部分是自己作词,所以感觉他的歌词和他应该有某种情感表达和联系吧. 于是用python爬了网易云音乐中老薛的歌词数据,并简单用wordcloud写了个词云统计. 难过, ...
网易云课堂解析_网易云课堂课程下载教程
网易云课堂不能下载视频,缓存打不开? 记: 网易云课堂.中国大学mooc这些学习平台确实大大方便了我们这些工作党学习,之前一直用的是手机客户端看视频,但是由于换手机啊,清理垃圾啊,手机储存容量各种原因 ...
网易云课堂解析_使用SQL分析网易云课堂职场提升类课程
前言: 正值毕业季,职场相关话题毋庸置疑又再次成为热门话题,结束学校生活并不意味着学习的终结,真正走入职场才会发现学习才刚刚开始.许多职场人士为了在激烈的市场竞争中保持竞争力,都会选择在工作之余学习充 ...
PC 网易云音乐桌面歌词原版天际蓝配色方案
这是网易云音乐在某个版本更新前的天际蓝配色,觉得比现有的预设方案好看所以给记下来了当前版本中多了个描边,测试发现用默认的灰色就行了. 以下是颜色参数: 类别渐变上渐变下描边已播放 26,24 ...
【小练习】使用selenium根据歌单多线程爬取网易云音乐的歌词
准备工作首先找到url,分析页面: 通过分析发现直接用find_element_by_XXX的方法是提取不到内容的,首先要转换到iframe这个页面中,代码如下: import time from ...
Python爬虫实战之爬取web网易云音乐——解析
找到存储歌曲地址的url界面首先我们要进入网易云的web页面在页面中我们随意选择一首歌曲,打开开发者工具查看响应的界面. 在这些页面中我们需要查找存储有音乐文件的url,这是我们可以打开全局搜索直接 ...
python爬取歌词_利用Python网络爬虫抓取网易云音乐歌词
今天小编给大家分享网易云音乐歌词爬取方法. 本文的总体思路如下: 找到正确的URL,获取源码: 利用bs4解析源码,获取歌曲名和歌曲ID: 调用网易云歌曲API,获取歌词: 将歌词写入文件,并存入本地 ...

网易云部分解析歌词

网易云部分解析歌词相关推荐

最新文章

热门文章

网易云部分 解析歌词

网易云部分 解析歌词相关推荐

最新文章

热门文章

网易云部分解析歌词

网易云部分解析歌词相关推荐