(项目已开源)社区求助 哪位大佬能不能帮我 将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音乐播放器组件的播放进度 -->歌词下载网站：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
