网站建设中标公告,sqlite wordpress,假冒中国建设银行的网站,开网页卡(项目已开源)社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动 链接#xff1a;https://pan.baidu.com/s/16lpEW6L5jrHfhsG7EXocLw?pwdkryy 提取码#xff1a;kryy
!--社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 s…(项目已开源)社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动 链接https://pan.baidu.com/s/16lpEW6L5jrHfhsG7EXocLw?pwdkryy 提取码kryy
!--社区求助 哪位大佬能不能帮我 将box1 audio 和 box2 slider滑块 和 box3 歌词滚动区域 进行联动 --
!-- 需求分析 slider控制audio音乐播放进度 控制 box3中的歌词区域进行联动 --
templateview classhelloview stylewidth: 100%;height: 100%;view classbox1audio :srcmusic timeupdateaudioTime :controlstrue/audio/view!-- view:classclassName:style{ animation-duration: ${lrcTime}000ms}{{ dataWords }}/view --view classbox2slider :maxmusicDurationv-modelcurrenttime changechangeProgress activeColor#FFCC33 backgroundColor#000000 block-color#8A6DE9show-value //view!-- 请用slider滑块组件控制 --view classbox3scroll-view scroll-ytrue classscroll-boxview styletext-align: center;color:#FFFFFF;:style{ animation-duration: ${lrcTime}000ms }v-for(lrc, index) in LrcMusics :keyindex :class{ text load lrcFontStyle: index currentIndex }{{ lrc }}/view/scroll-view/view/view/view
/templatescript
//
// _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.musicDurationthis.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音乐播放器组件的播放进度 --
歌词下载网站
