03_歌词滚动效果

news2024/10/6 8:32:31

03_歌词滚动效果

文章目录

  • 03_歌词滚动效果
  • 效果
  • 一、数据准备
    • ①：歌词
    • ②：音频等
  • 二、代码实现
    • ①：首页
    • ②：样式
    • ③：js逻辑
    • ④：测试

效果

在这里插入图片描述

一、数据准备

①：歌词

var lrc = `[00:00.95]夜微凉 - 徐珊
[00:01.9]词：周敏君/徐珊
[00:02.85]曲：秦天
[00:03.8]编曲：秦天
[00:04.75]制作人：秦天
[00:05.7]配唱制作人：孙依哲/李少成
[00:06.65]制作统筹：宋双喜
[00:07.6]财务及行政协力：周美军/赵杨
[00:08.55]监制：吕军/张斌/柴奇/古国远
[00:09.5]出品人：侯俊/张健
[00:10.45]出品监制：秦朗
[00:11.4]艺人经纪：徐真真
[00:12.35]封面设计：LDG
[00:13.35]夜微凉
[00:15.72]灯微暗
[00:18.12]远处的你
[00:19.62]却如此温暖
[00:22.92]如果再没有什么
[00:25.29]结果是我相信你
[00:27.99]会使
[00:29.22]我更加心安
[00:34.59]拥抱世界美丽
[00:37.02]此刻我想拥抱你
[00:39.42]如果再没有什么
[00:41.46]结果是我相信你
[00:44.22]会使我心
[00:45.54]更安静
[00:47.22]遇到烦心
[00:48.99]放于时间里慢慢说给你听
[00:57.42]会让你走出凹凸地 平线
[01:00.99]因为这自信
[01:02.85]让我更加情愿
[01:06.99]道路总是走走停停
[01:10.86]只是你还心有不安
[01:15.45]遇到烦心
[01:17.01]因为我不想让你看到
[01:20.22]看到我忧伤的表情
[01:24.99]放于时间里
[01:27.39]慢慢的说给你听
[01:30.09]稀释忧愁
[01:31.89]面对不安
[01:36.990005]拥抱世界美丽
[01:39.42]此刻我想拥抱你
[01:41.85]如果再没有什么
[01:43.86]结果是我相信你
[01:46.619995]会使我心
[01:47.94]更安静
[01:49.65]遇到烦心
[01:51.39]放于时间里慢慢说给你
[01:57.509995]夜微凉
[01:58.92]灯微暗
[02:01.29]远处的你
[02:02.79]却如此温暖
[02:06.06]如果再没有什么
[02:08.46]结果是我相信你
[02:11.22]会使
[02:12.42]我更加心安
[02:15.45]遇到烦心
[02:17.01]因为我不想让你看到
[02:20.22]看到我忧伤的表情
[02:24.95999]放于时间里
[02:27.39]慢慢的说给你听
[02:30.06]稀释忧愁
[02:31.89]面对不安
[02:34.59]拥抱世界美丽
[02:36.99]此刻我想拥抱你
[02:39.45]如果再没有什么
[02:41.45999]结果是我相信你
[02:44.22]会使我心
[02:45.54001]更安静
[02:47.22]遇到烦心
[02:48.99]放于时间里慢慢说给你听`

在这里插入图片描述

②：音频等

  • 资源在文章的顶部绑定
    在这里插入图片描述

二、代码实现

在这里插入图片描述

①：首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>歌词滚动效果</title>
    <link rel="shortcut icon" href="./assets/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
<audio controls src="./assets/夜微凉.mp3"></audio>
<div class="container">
    <ul class="lrc-list">
    </ul>
</div>
<script src="./js/data.js"></script>
<script src="./js/index.js"></script>

</body>
</html>

②：样式

* {
    padding: 0;
    margin: 0;
}
body{
    background-color: black;
    color: #666;
    text-align: center;
}
audio{
    width: 450px;
    height: 50px;
    margin: 30px 0;
}
.container{
    height: 420px;
    overflow: hidden;
}
.container ul{
    transition: 0.5s;
    list-style: none;
}
.container li{
    height: 30px;
    line-height: 30px;
    transition: 0.2s;
}
.container .lrc-list .active{
    color: #fff;
    transform: scale(1.3);
}

③：js逻辑

/**
 * 解析歌词字符串 得到每个歌词的对象
 * {time: 开始时间, words: 歌词内容}
 */
var lrcArray = [];

function parseLrc() {
    let lines = lrc.split("\n");
    lines.forEach(item => {
        let parts = item.split("]");
        var timeStr = parts[0].substr(1);
        let time = parseTime(timeStr);
        var obj = {
            time: time,
            words: parts[1]
        }
        lrcArray.push(obj);
    })
    return lrcArray;
}

/**
 * 获取需要的dom
 */
var dom = {
    audio: document.querySelector("audio"),
    ul: document.querySelector('.container ul'),
    container: document.querySelector('.container'),
}

/**
 * 将字符串转成时间数字 01:02.85 ==> 1*60 + 2.85（秒）
 * @param timeStr 时间字符串
 */
function parseTime(timeStr) {
    let split = timeStr.split(":");
    return +split[0] * 60 + +split[1]
}

/**
 * 计算出，在当前播放器播放到几秒的情况下
 * lrcArray 数组中 应该高亮显示的歌词下标
 * -1 没有任何一句歌词需要显示
 */
function findIndex() {
    // 播放器当前时间
    let time = dom.audio.currentTime;
    for (let i = 0; i < lrcArray.length; i++) {
        if (lrcArray[i].time > time) {
            return i - 1
        }
    }
    // 如果大于最后一句歌词时间 显示最后一句歌词
    return lrcArray.length - 1
}

console.log(parseLrc());


/**
 * 创建歌词元素 li
 */
function createLrcElements(){
    lrcArray.forEach(item =>{
        var li = document.createElement("li");
        li.textContent = item.words
        dom.ul.appendChild(li)
    })
}
createLrcElements()

// 容器的高度
let containerHeight = dom.container.clientHeight;
// 每一个li的高度
let liHeight = dom.ul.children[0].clientHeight;
// 最大便宜量
let max = dom.ul.clientHeight - containerHeight;

/**
 * 设置ul的偏移量
 */
function setOffset() {
    let index = findIndex();
    let h1 = liHeight * index + liHeight / 2 - containerHeight / 2
    if (h1 < 0){
        h1 = 0
    }
    if (h1 > max){
        h1 = max
    }
    // 去掉之前的 active 样式
    let li = dom.ul.querySelector('.active');
    if (li){
        li.classList.remove('active')
    }

    dom.ul.style.transform = `translateY(-${h1}px)`
    li = dom.ul.children[index];
    if (li){
        li.classList.add('active')
    }
}
dom.audio.addEventListener('timeupdate', () => setOffset())

④：测试

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Windows10 下 CUDA 新旧多版本共存

Windows10 下 CUDA 新旧多版本共存

前言 为了运行一个 Tensorflow1.6.0 的项目&#xff0c;CPU 跑了三个多小时才完成一个 epoch&#xff0c;还得用 GPU。但这个版本的 TF 只能在 10 以下的 CUDA 平台&#xff0c;但是以前的 Pytorch 也要继续啊。所以需要在本地 Windows 下安装多个版本 CUDA&#xff0c;其实有两…
阅读更多...
MySQL事务（简单明了）

MySQL事务（简单明了）

目录 1. 事务的特性&#xff08;ACID&#xff09;&#xff1a; 2. 事务的语法&#xff1a; 3. 隔离级别&#xff1a; 4. 保存点&#xff08;Savepoints&#xff09;&#xff1a; 5. 示例&#xff1a; 1. 事务的特性&#xff08;ACID&#xff09;&#xff1a; 原子性&#…
阅读更多...
每日一练2023.11.27——考试座位号【PTA】

每日一练2023.11.27——考试座位号【PTA】

题目要求&#xff1a; 每个 PAT 考生在参加考试时都会被分配两个座位号&#xff0c;一个是试机座位&#xff0c;一个是考试座位。正常情况下&#xff0c;考生在入场时先得到试机座位号码&#xff0c;入座进入试机状态后&#xff0c;系统会显示该考生的考试座位号码&#xff0c…
阅读更多...
sCrypt 现已支持各类主流前端框架

sCrypt 现已支持各类主流前端框架

sCrypt 现已支持各类主流前端框架&#xff0c;包括&#xff1a; ReactNext.jsAngularSvelteVue 3.x or 2.x bundled with Vite or Webpack 通过在这些支持的前端框架中集成sCrypt开发环境&#xff0c;你可以直接在前端项目里访问合约实例和调用合约&#xff0c;方便用户使用Se…
阅读更多...
js用到的算法

js用到的算法

1.对象数组中&#xff0c;对象中有对象&#xff0c;数组根据对象中的对象打平 [{indexValueMap: { 68443: 0, 68457: 0 },rowName1: 固定收益类,rowName2: 交易类,rowName3: 次级},{indexValueMap: { 68443: 0, 68457: 0 },rowName1: 固定收益类,rowName2: 交易类,rowName3: 中…
阅读更多...
Skywalking接入实际应用做日志跟踪

Skywalking接入实际应用做日志跟踪

Skywalking客户端挂载 从官网下载skywalking-agent客户端&#xff0c;并挂在到应用服务器指定目录 挂载到应用主机中,好处是解决打包应用镜像的时候&#xff0c;镜像过大&#xff0c;部署成本过高。 docker-compose部署应用,并接入skywalking服务,这里以gateway为例 versio…
阅读更多...
【活动回顾】sCrypt在2023伦敦区块链大会上的精彩表现

【活动回顾】sCrypt在2023伦敦区块链大会上的精彩表现

2023伦敦区块链大会&#xff0c;是本年度最盛大的比特币及区块链行业活动。大会于2023年5月31日至6月2日&#xff0c;在伦敦女王伊丽莎白二世中心举行&#xff0c;旨在展示BSV区块链的真正潜力。 sCrypt Inc 的创始人兼 CEO 刘晓晖&#xff0c; 作为演讲嘉宾出席了会议。他向大…
阅读更多...
FreeImage 编译安装

FreeImage 编译安装

FreeImage下载&#xff1a; The FreeImage Project 点击第6行&#xff1a; Download FreeImage 3.18.0 或&#xff1a; wget http://downloads.sourceforge.net/freeimage/FreeImage3170.zip #解压 unzip FreeImage3170.zip -d freeImage 编译FreeImage源代码可能需要遵循…
阅读更多...
BUUCTF刷题之路--ciscn_2019_es_21

BUUCTF刷题之路--ciscn_2019_es_21

这题考察的是一个栈迁移的知识。作为入门学习栈迁移是个不可多得的好题。程序简单并且是32位的架构。保护也没有开&#xff0c;因此对于理解栈迁移再好不过了。看一下这题的基本信息&#xff1a; 栈迁移的基本原理其实就是栈的空间不够我们利用。也就是不不足以覆盖返回地址&am…
阅读更多...
基于单片机设计的超声波测距仪(采用HC-SR04模块)

基于单片机设计的超声波测距仪(采用HC-SR04模块)

一、前言 本项目是基于单片机设计的超声波测距仪&#xff0c;主要采用了STC89C52单片机和HC-SR04超声波测距模块。通过LCD1602液晶显示屏来展示测量的距离信息。 超声波测距技术是一种常见的非接触式测距方法&#xff0c;利用超声波的传播速度测量物体与测距器之间的距离。它…
阅读更多...
「C++」类和对象1

「C++」类和对象1

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;C启航 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 文章目录 &#x1f349;前言&#xff1a;初识面向对象&#x1f349;类&#x1f34c;类的定义&#x1f34c;访问限定符&#x1f95d;类的…
阅读更多...
CloudCompare 源码编译

CloudCompare 源码编译

一、下载源码 二、cmake 编译 这里面有四个比较重要的地方 1、源码的位置 2、生成的位置 3、项目的位置 4、qt 的位置 三、编译 开始测试&#xff0c;先用那个项目做测试 没有问题 然后用build的那个打开 加入Qt 的相关库到qcc中 启动项目生成cloudcompare 启动 ok ,完成…
阅读更多...
阿里云ACE认证之国际版与国内版对比！

阿里云ACE认证之国际版与国内版对比！

大厂疯狂裁员&#xff0c;互联网行业迎来寒冬&#xff0c;技术人员被动陷入疯狂内卷。在愈加内卷的IT领域&#xff0c;“云计算”作为少有的蓝海&#xff0c;无疑是打工人未来实现职场提升、摆脱内卷的绝佳选择&#xff01; 对于云计算行业的人来说&#xff0c;最值得考的肯定是…
阅读更多...
守护机器智能时代，上海迅软科技终端防泄密方案横空出世！

守护机器智能时代，上海迅软科技终端防泄密方案横空出世！

客户简要介绍 某智能科技股份有限公司是一家专注于数字化、自动化和新能源的机器人公司。公司致力于为劳动密集程度比较高的行业制造有用且价格合理的机器人&#xff0c;目前已广泛应用于农业、园艺、施工、测绘和设施服务等领域。在新加坡、美国、瑞典、大陆及香港等多地有研发…
阅读更多...
C++相关闲碎记录(1)

C++相关闲碎记录(1)

1、C绘制爱心图像 #include <iostream> #include <cmath>using namespace std;int main() {// 心形曲线公式 (x^2 y^2 - a)^3 - x^2*y^3 0double a 1;double bound 1.5 * sqrt(a);double step 0.05;for (double y bound; y > -bound; y - step) {for (do…
阅读更多...
vue或uniapp中keep-alive的使用，（附带生命周期原理图）

vue或uniapp中keep-alive的使用，（附带生命周期原理图）

什么是keep-alive&#xff1f; keep-alive是一个内置组件&#xff0c;用于缓存和管理组件的状态。 当 keep-alive包裹一个组件时&#xff0c;这个组件的状态将会被缓存起来&#xff0c;而不是每次重新渲染。这在多个视图之间切换时特别有用&#xff0c;可以避免重复的创建和销…
阅读更多...
【Spring】Spring是什么？

【Spring】Spring是什么？

文章目录 前言什么是Spring什么是容器什么是 IoC传统程序开发控制反转式程序开发理解Spring IoCDI Spring帮助网站 前言 前面我们学习了 servlet 的相关知识&#xff0c;但是呢&#xff1f;使用 servlet 进行网站的开发步骤还是比较麻烦的&#xff0c;而我们本身程序员就属于是…
阅读更多...
leetcode:2864. 最大二进制奇数（python3解法）

leetcode:2864. 最大二进制奇数（python3解法）

难度&#xff1a;简单 给你一个 二进制 字符串 s &#xff0c;其中至少包含一个 1 。 你必须按某种方式 重新排列 字符串中的位&#xff0c;使得到的二进制数字是可以由该组合生成的 最大二进制奇数 。 以字符串形式&#xff0c;表示并返回可以由给定组合生成的最大二进制奇数。…
阅读更多...
什么是闭包和作用域链？

什么是闭包和作用域链？

1. 什么是闭包 闭包指的是那些引用了另一个函数作用域中变量的函数&#xff0c;通常是在嵌套函数中实现的。 举个栗子&#xff0c;createCounter 接受一个参数 n&#xff0c;然后返回一个匿名函数&#xff0c;这个匿名函数是闭包&#xff0c;它可以访问外部函数 createCounte…
阅读更多...
Centos7上面部署redis

Centos7上面部署redis

Centos7上面部署redis 编写这个部署redis&#xff0c;只是为了另一个文章入侵redis做准备&#xff0c;网上还有好多类似的文章&#xff0c;这个单纯的就是部署安装&#xff0c;并简单的测试使用以下 关联其他文章 [1]VMware上面安装部署centos7镜像系统【详细含镜像】 [2]血的教…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023