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

news2024/12/23 19:00:18

(项目已开源)社区求助哪位大佬能不能帮我将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 0
    0;
  -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音乐播放器组件的播放进度 -->