(项目已开源)社区求助哪位大佬能不能帮我将box1 audio 和 box2 slider滑块和 box3 歌词滚动区域进行联动

链接：https://pan.baidu.com/s/16lpEW6L5jrHfhsG7EXocLw?pwd=kryy
提取码：kryy

<!--社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动 -->
<!-- 需求分析 slider控制audio音乐播放进度 控制 box3中的歌词区域进行联动 -->
<template><view class="hello"><view style="width: 100%;height: 100%;"><view class="box1"><audio  :src="music" @timeupdate="audioTime" :controls="true"></audio></view><!-- <view:class="className":style="{ 'animation-duration': `${lrcTime}000ms`}">{{ dataWords }}</view> --><view class="box2"><slider :max="musicDuration"v-model="currenttime" @change="changeProgress"  activeColor="#FFCC33" backgroundColor="#000000" block-color="#8A6DE9"show-value /></view><!-- 请用slider滑块组件控制 --><view class="box3"><scroll-view scroll-y="true" class="scroll-box"><view style="text-align: center;color:#FFFFFF;":style="{ 'animation-duration': `${lrcTime}000ms` }"v-for="(lrc, index) in LrcMusics" :key="index" :class="{ 'text load lrcFontStyle': index === currentIndex }">{{ lrc }}</view></scroll-view></view></view></view>
</template><script>
//
//                       _oo0oo_
//                      o8888888o
//                      88" . "88
//                      (| -_- |)
//                      0\  =  /0
//                    ___/`---'\___
//                  .' \\|     |// '.
//                 / \\|||  :  |||// \
//                / _||||| -:- |||||- \
//               |   | \\\  - /// |   |
//               | \_|  ''\---/''  |_/ |
//               \  .-\__  '-'  ___/-. /
//             ___'. .'  /--.--\  `. .'___
//          ."" '<  `.___\_<|>_/___.' >' "".
//         | | :  `- \`.;`\ _ /`;.`/ - ` : | |
//         \  \ `_.   \_ __\ /__ _/   .-` /  /
//     =====`-.____`.___ \_____/___.-`___.-'=====
//                       `=---='
//
//
//     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//
//           佛祖保佑       永不宕机     永无BUG
//
//       佛曰:
//               写字楼里写字间，写字间里程序员；
//               程序人员写程序，又拿程序换酒钱。
//               酒醒只在网上坐，酒醉还来网下眠；
//               酒醉酒醒日复日，网上网下年复年。
//               但愿老死电脑间，不愿鞠躬老板前；
//               奔驰宝马贵者趣，公交自行程序员。
//               别人笑我忒疯癫，我笑自己命太贱；
//               不见满街漂亮妹，哪个归得程序员？
//export default {data() {return {myArray: [],//保存歌词文件 每一句歌词的时长progress: 0,//slide滑动条的数musicDuration:0,//音乐总时长currentIndex:0,//当前歌词索引LrcMusics:[],//musics所有歌词className: "text load",//musics歌词样式lrcTime: "",//当前歌词播放进度music:"/static/9.mp3",currenttime: "",LRC: `[00:00.000]LRC-musicenc.com
[00:00]我爱你中国 - 汪峰
[00:35]每当我感到疼痛
[00:39]就想让你抱紧我
[00:43]就像你一直做的
[00:45]那样触摸我的灵魂
[00:50]每当我迷惑的时候
[00:53]你都给我一种温暖
[00:57]就像某个人的手臂
[01:00]紧紧搂着我的肩膀
[01:08]有时我会孤独无助
[01:12]就像山坡上滚落的石子
[01:16]但是只要想起你的名字
[01:18]我总会重拾信心
[01:23]有时我会失去方向
[01:26]就像天上离群的燕子
[01:31]可是只要想到你的存在
[01:33]就不会再感到恐惧
[01:37]我爱你中国心爱的母亲
[01:45]我为你流泪也为你自豪
[01:52]我爱你中国亲爱的母亲
[02:00]我为你流泪也为你自豪
[02:07]有一天这首歌会变老
[02:09]就像老幺树上的枝芽
[02:15]可我还会一遍遍歌唱
[02:17]它如同我的生命
[02:22]有些人会慢慢消失
[02:25]有些情感会渐渐破碎
[02:30]可你却总在我心中
[02:32]就像无与伦比的太阳
[02:36]我爱你中国心爱的母亲
[02:44]我为你流泪也为你自豪
[02:51]我爱你中国亲爱的母亲
[02:59]我为你流泪也为你自豪
[03:08]希望你把我记住你流浪的孩子
[03:15]无论在何时何地我都想念着你
[03:22]希望你能够知道你对我的意义
[03:29]无论在何时何地你就像我的生命
[03:39]我爱你中国心爱的母亲
[03:47]我为你流泪也为你自豪
[03:54]我爱你中国亲爱的母亲
[04:02]我为你流泪也为你自豪
[04:09]我爱你中国
[04:11]希望你把我记住
[04:12]心爱的母亲
[04:15]你流浪的孩子
[04:16]我为你流泪
[04:18]无论在何时何地
[04:20]也为你自豪
[04:22]我都想念着你
[04:24]我爱你中国
[04:25]希望你能够知道
[04:27]亲爱的母亲
[04:29]你对我的意义
[04:31]我为你流泪
[04:32]无论在何时何地
[04:34]也为你自豪
[04:35]你就像我的生命
[04:41]我爱你中国
[04:45]希望你把我记住
[04:46]心爱的母亲
[04:47]你流浪的孩子
[04:49]我为你流泪
[04:51]无论在何时何地
[04:53]我都想念着你
[04:53]也为你自豪
[04:57]我爱你中国
[04:59]希望你能够知道
[05:01]亲爱的母亲
[05:02]你对我的意义
[05:05]我为你流泪
[05:06]无论在何时何地
[05:08]也为你自豪
[05:09]你就像我的生命`,lrcData: "",dataWords: "",};},name: "HelloWorld",methods: {changeProgress(e){console.log("e---------",e)},//歌词数据转化为数组formatLrc() {var musicDuration=[];var strLrc = this.LRC.split("\n");let arr = [];for (var i = 0; i < strLrc.length; i++) {var str = strLrc[i];var parts = str.split("]");var timeStr = parts[0].substring(1);var obj = {time: this.formatTime(timeStr),//取每一首歌词当中的每一句歌词的时间words: parts[1],//取每一首歌词当中的每一句歌词};arr.push(obj);//将每一首歌词 当中的每一句歌词 和每一句歌词的时间 arr数据当中//console.log(obj.time)//打印所有每一句歌词 在audio播放组件中的播放位置console.log(timeStr)//打印最后一句歌词的时间判断总长度this.myArray.push(timeStr)this.LrcMusics.push(obj.words)}this.lrcData = arr; //让后将arr数组赋值给 this.lrcData// console.log(this.LrcMusics)//打印每一个歌词时长 最后一项歌词总时长console.log(this.myArray.length)console.log("最后一项数据是:",this.myArray[this.myArray.length-1])this.musicDuration=this.formatTime(this.myArray[this.myArray.length-1])},//时间转换（秒）formatTime(time) {var parts = time.split(":"); //[03:00.000]==>[03,00.00]return +parts[0] * 60 + +parts[1]; //计算秒},audioTime(e) {var time = e.target.currentTime;for (var i = 0; i < this.lrcData.length; i++) {if (time < this.lrcData[i].time) {this.lrcTime = this.lrcData[i].time - this.lrcData[i - 1].time;this.dataWords = this.lrcData[i - 1].words;this.currentIndex = i - 1; // 保存当前歌词索引return i - 1;}}},},watch: {//给下一句歌词设置样式dataWords() {this.className = "text";//设置为没有播放时的歌词显示style样式setTimeout(() => {this.className = "text load";//设置歌词播放时的播放style 样式}, 50);},},mounted() {// 当界面加载完毕之后 对歌词文件进行格式化 将 itme时间 和words歌词添加到obj数据当中this.formatLrc();},
};
</script> <style scoped>
/* .container{display: flex;align-items: center;background: #0fa046;
}	 */
.box1{display: flex;justify-content: center;align-items: center;width: 100%;height:200rpx;background:red;
}
.box2{}
.box3{position: relative;background: #7e7e7e;width: 100%;height: 100%;
}
.scroll-box{}
@keyframes scan {0% {background-size: 0 100%;}100% {background-size: 100% 100%;}
}
.text {background: #7e7e7e -webkit-linear-gradient(left, #ffff00, #ff0000) no-repeat 00;-webkit-text-fill-color: transparent;-webkit-background-clip: text;background-size: 0 100%;
}
.load {background-size: 100% 100%;animation: scan linear;
}
.lrcFontStyle{font-size:50rpx;}
</style><!-- 帮我v-for循环遍历一下LrcMusics的数值到 scroll-view当中 --><!-- 如何将 dataWords lrc 进行匹配 播放那一句歌词 那一句歌词应用 播放样式 --><!-- 请用 slide进度条组件控制 audio的播放暂停 --><!-- uniapp slider滑块组件怎么控制audio音乐播放器组件的播放进度 -->