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

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

歌词下载网站： 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/206325.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

rest_framework_django 学习笔记二（视图路由）

rest_framework_django 学习笔记二（视图路由）

rest_framework_django 学习笔记二&#xff08;视图路由&#xff09; rest_framwork_django学习笔记一(序列化器) 一、rest framework 中Request 与 Response 1、Request REST framework 传入视图的request对象不再是Django默认的HttpRequest对象&#xff0c;二是REST Fame…
阅读更多...
Git常用命令#切换分支

Git常用命令#切换分支

要在 Git 中切换分支&#xff0c;你可以使用 git checkout 命令。 a.创建新分支并切换到该分支 如果你想要创建一个新分支并立即切换到该分支&#xff0c;可以使用以下命令&#xff1a; git checkout -b 新分支名这会创建一个名为 新分支名 的新分支&#xff0c;并将你的工作目…
阅读更多...
OSEK OS任务调度的底层逻辑

OSEK OS任务调度的底层逻辑

先参考 FreeRTOS的任务触发底层逻辑 简述RTOS任务调度底层逻辑 AUTOSAR-OS的调度机制-调度表&#xff08;没理解透&#xff0c;继续更新&#xff09; OSEK与FreeRTOS在任务调度上最大的区别在于&#xff0c;FreeRTOS是基于全抢占任务调度和时间片轮转调度机制&#xff0c;具有…
阅读更多...
（一）C语言概述

（一）C语言概述

文章目录 一、C语言1、计算机结构组成 二、第一个C语言程序&#xff1a;hello world1、编写C语言代码&#xff1a;hello.c2、通过gcc编译C代码&#xff08;1&#xff09;gcc编译器介绍&#xff08;2&#xff09;Window平台中gcc环境配置 3、代码分析&#xff08;1&#xff09;#…
阅读更多...
css新闻链接案例

css新闻链接案例

利用html和css构建出新闻链接案例&#xff0c;使用渐变色做出背景色变化 background: linear-gradient(to bottom, rgb(137, 210, 251), rgb(238, 248, 254), white); 利用背景图片&#xff0c;调整位置完成 dd { height: 28px; line-height: 28px; background-image: url(./图…
阅读更多...
10.30 作业 C++

10.30 作业 C++

设计一个Per类&#xff0c;类中包含私有成员:姓名、年龄、指针成员身高、体重&#xff0c;再设计一个Stu类&#xff0c;类中包含私有成员:成绩、Per类对象p1&#xff0c;设计这两个类的构造函数、析构函数和拷贝构造函数。 #include <iostream>using namespace std;clas…
阅读更多...
Discuz论坛自动采集发布软件

Discuz论坛自动采集发布软件

随着网络时代的不断发展&#xff0c;Discuz论坛作为一个具有广泛用户基础的开源论坛系统&#xff0c;其采集全网文章的技术也日益受到关注。在这篇文章中&#xff0c;我们将专心分享通过输入关键词实现Discuz论坛的全网文章采集&#xff0c;同时探讨采集过程中伪原创的发布方法…
阅读更多...
springboot+jsp+java房屋销售出租赁网站的ssm设计与实现7xcvq

springboot+jsp+java房屋销售出租赁网站的ssm设计与实现7xcvq

三、研究方案&#xff08;主要研究内容、目标、研究方法等&#xff09; 主要研究内容 房屋租售网站采用的开发框架为springboot框架&#xff0c;也就是Spring mvc、Spring、MyBatis这三个框架&#xff0c;页面设计用的是jsp技术作为动态页面文件设计&#xff0c;jsp文件里可以对…
阅读更多...
Glove学习笔记

Glove学习笔记

global vectors for word representation B站学习视频 1、LSA与word2vec 我们用我们的见解&#xff0c;构建一个新的模型&#xff0c;Glove&#xff0c;全局向量的词表示&#xff0c;因为这个模型捕捉到全局预料的统计信息。 LSA:全局矩阵分解word2vec&#xff1a;局部上下文…
阅读更多...
第一百八十五回 如何禁止页面跟随手机自动旋转

第一百八十五回 如何禁止页面跟随手机自动旋转

文章目录 1. 概念介绍2. 使用方法2.1 全面禁止2.2 局部禁止3. 示例代码4. 内容总结我们在上一章回中介绍了"如何自定义Radio组件"相关的内容，本章回中将介绍 如何禁止页面随手机自动旋转.闲话休提，让我们一起Talk Flutter吧。 1. 概念介绍 在手机默认设置下，手机…
阅读更多...
系统渗透-lin20230502（解析+环境）

系统渗透-lin20230502（解析+环境）

B-5&#xff1a;系统渗透&#xff1a; 仅能获取lin20230502的IP地址 1.在渗透机中对服务器主机进行信息收集&#xff0c;将服务器开启的端口号作为Flag值提交&#xff1b; 2.在渗透机中对服务器主机进行渗透&#xff0c;在服务器主机中获取服务器主机名称&#xff0c;将主机名作…
阅读更多...
Python实验项目8 ：科学计算与可视化

Python实验项目8 ：科学计算与可视化

1&#xff1a;创建 numpy 数组。 要求&#xff1a; &#xff08;1&#xff09;使用 array()函数、empty()函数、zeros()函数、linspace()函数等创建 numpy 数组。 &#xff08;2&#xff09;使用 numpy 数组的索引和切片方法访问数组元素。 # 要求&#xff1a; # &#xff0…
阅读更多...
SSM校园组团平台系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

SSM校园组团平台系统开发mysql数据库web结构java编程计算机网页源码eclipse项目

一、源码特点 SSM 校园组团平台系统是一套完善的信息系统&#xff0c;结合springMVC框架完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模…
阅读更多...
pycharm 创建vue并实现简易路由功能

pycharm 创建vue并实现简易路由功能

使用pycharm创建vue项目时&#xff0c;选择vite来创建vue。为什么使用vite&#xff1f;因为vite是专门针对vue开发的打包框架&#xff0c;以前使用vue-cli来创建vue项目&#xff0c;就是使用的webpack来进行打包的&#xff0c;现在有了vite&#xff0c;就尽量使用vite来创建vue…
阅读更多...
菜鸟学习日记（Python）——基本数据类型

菜鸟学习日记（Python）——基本数据类型

Python 中的变量不需要声明。每个变量在使用前都必须赋值&#xff0c;变量赋值以后该变量才会被创建。 在 Python 中&#xff0c;变量就是变量&#xff0c;它没有类型&#xff0c;我们所说的"类型"是变量所指的内存中对象的类型。 等号&#xff08;&#xff09;用来…
阅读更多...
nginx 配置前端项目添加https

nginx 配置前端项目添加https

可申请阿里云免费证书 步骤省略… nginx 配置 server {listen 8050; #默认80端口 如果需要所有访问地址都是https 需要注释listen 8443 ssl; #https 访问的端口 &#xff0c;默认443server_name 192.168.128.XX; #域名 或 ip# 增加ssl#填写证书文件…
阅读更多...
Informer辅助笔记：data/dataloader.py

Informer辅助笔记：data/dataloader.py

以WTH为例 import os import numpy as np import pandas as pdimport torch from torch.utils.data import Dataset, DataLoader # from sklearn.preprocessing import StandardScalerfrom utils.tools import StandardScaler from utils.timefeatures import time_featuresim…
阅读更多...
2023_Spark_实验二十三：Kafka的安装与基本操作

2023_Spark_实验二十三：Kafka的安装与基本操作

Kafka的安装与基本操作 一、前提工作 二、Kafka安装 三、Kafka基本操作 一、前提工作 必须安装了zookeeper 单机可参考&#xff1a;zookeeper单机安装与配置 集群可参考&#xff1a;zookeeper的集群安装 二、Kafka安装 上传kafka_2.11-2.4.1.tgz到/tools目录下 解压安装到…
阅读更多...
中台战略思想与架构总结

中台战略思想与架构总结

中台战略思想与架构总结 在2015年年中&#xff0c;马云带领阿里高管&#xff0c;拜访了游戏公司Supercell&#xff0c;以《部落战争》《海岛奇兵》《卡通农场》等游戏知名。 Supercell是一家典型的以小团队模式进行游戏开发的公司&#xff0c;一般来说两个员工&#xff0c;或…
阅读更多...
单链表相关经典算法OJ题：移除链表元素

单链表相关经典算法OJ题：移除链表元素

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 题目&#xff1a;移除链表元素 解法一&#xff1a; 解法一的代码实现&#xff1a; 解法二&#xff1a; 解法二代码的实现&#xff1a; 总结 前言 世上有两种耀眼的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站