心如刀割--马健涛

亚伦影音工作室 发表于 2025-5-21 16:59

本帖最后由亚伦影音工作室于 2025-5-21 18:32 编辑 <br /><br /><style>
#papa {margin: 10px -300px;
width: 1286px;
height: 720px;
background:#333 url('https://pic1.imgdb.cn/item/6824a1fc58cb8da5c8f1b5a2.jpg')0 0/100%;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;--state: paused;
}

#pa{
width: 35%;
height: 35%;
top: 54%;
left: 2%; cursor: pointer;
position: absolute;overflow: hidden;
z-index: 10;
}

.lrc {z-index: 1;
         position: absolute;
         top: 16%;
         left: 60%;

         width: 540px;
         height: 350px;
         overflow: hidden;

   }

   .lrc #ul {
         width: 100%;
         padding: 0;
         list-style: none;
         transition: 0.3s all ease;
         margin: 0;
   }

   .lrc #ul li {

         color: #fff;
         font: normal 20px 'FZYaoti', sans-serif;
         transition: .3s all ease;
      list-style-type: none;
text-align: center;
   display: block;
         padding: 0 10px;
         height: 50px;
         line-height: 50px;
         margin: 0 auto;
         cursor: pointer;
   }

   .lrc #ul li.active {
      transform:scale(1.4);
         color: #555;
   font-weight: 650;
         text-align: center;

   }

</style>
<div id="papa">

<div id="pa"></div>

<divid="dhgc" class="lrc">
         <ul id="ul"></ul>
   </div>
</div>

<audio id="audio" src="https://s2.ananas.chaoxing.com/sv-w8/audio/9d/c4/4c/dfca122a12e0d323f3050432b171bc9c/audio.mp3" loop autoplay ></audio>
<script type="module">
import * as THREE from 'https://638183.freep.cn/638183/web/ku/three.module.min.js';

var scene = new THREE.Scene;
var clock = new THREE.Clock();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0.1, 3);
var renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
   renderer.setSize(pa.offsetWidth, pa.offsetHeight);
   pa.appendChild(renderer.domElement);

// 定义 Vector2 对象数组：默认数组结构，加大一倍
var points = [, , ].map(item => new THREE.Vector2(item, item));
// 创建车削图形
var mesh = new THREE.Mesh(
new THREE.LatheGeometry(points), // 参数空则使用 [, , ] 构建的顶点数组
new THREE.MeshBasicMaterial({ color: 0x111,wireframe: true, side: THREE.DoubleSide, transparent: true, opacity:0.4 })
);
mesh.rotateX(-0.1); // 图像在X轴上略微倾斜
scene.add(mesh);

var animate = () => {
requestAnimationFrame(animate);
var delta = clock.getDelta();
mesh.rotation.y -= delta / 5;
renderer.render(scene, camera);
};

dhgc.onclick = pa.onclick = () => {clock.running ? clock.stop() : clock.start();
audio.paused ? audio.play() : audio.pause();
};

animate();
</script>

<script>
var lrc = `心如刀割
词曲：马健涛
编曲：马健涛
混音：马健涛
母带：马健涛
出品：羡然文化
你已经走远了我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过我以后你曾后悔过
离开我以后你是否也难过
吻过我以后幸福着你的快乐
夕阳落下后我们不再手牵手
爱过你以后我快乐足够
离开你以后却更不自由
我不能左右爱情的衣袖
忘也忘不掉黄昏吻你的时候
你已经不用说我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我不管我的死活
往后的日子我又该怎么活
你已经走远了我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
爱过你以后我快乐足够
离开你以后却更不自由
我不能左右爱情的衣袖
忘也忘不掉黄昏吻你的时候
你已经不用说我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我不管我的死活
往后的日子我又该怎么活
你已经走远了我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割
你已经不用说我已经都懂了
就让眼泪流在你走后那一刻
为什么丢下我不管我的死活
往后的日子我又该怎么活
你已经走远了我如此的难过
就让眼泪流在你走后那一刻
如果你离开我能让你快乐
那么还有什么理由挽留呢
心如刀割音画创意:亚伦
`;

// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
audio: document.querySelector("#audio"),
ul: document.querySelector("#ul"),
container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
var lrcData = lrcArr.split(']');
var lrcTime = lrcData.substring(1);
var obj = {
   time: parseTime(lrcTime),
   word: lrcData
}
result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
lrcTimeArr = lrcTime.split(":")
return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
let Time = doms.audio.currentTime;
for (let i = 0; i < result.length; i++) {
   if (result.time > Time) {
         return i - 1;
   }
}
}
// 创建歌词列表
function createElements() {
let frag = document.createDocumentFragment(); // 文档片段
for (let i = 0; i < result.length; i++) {
   let li = document.createElement("li");
   li.innerText = result.word;
   frag.appendChild(li);
}
doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
let index = getIndex();
// 计算滚动距离
let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
if (offset < minOffset) {
   offset = minOffset;
};
if (offset > maxOffset) {
   offset = maxOffset;
};
// 滚动
doms.ul.style.transform = `translateY(-${offset}px)`;
// 清除之前的active
let li = doms.ul.querySelector(".active")
if (li) {
   li.classList.remove("active");
}
// 为当前所唱到的歌词添加active
li = doms.ul.children;
if (li) {
   li.classList.add("active");
}
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>

清茶煮雪 发表于 2025-5-21 17:15

沙发听歌{:4_199:}

清茶煮雪 发表于 2025-5-21 17:15

歌曲真好听！动感及了{:4_187:}

清茶煮雪 发表于 2025-5-21 17:16

欣赏老师的精彩！点赞送花{:4_204:}

红影发表于 2025-5-21 22:57

这颗钻石已经用上了，真快啊。
欣赏亚伦老师好帖{:4_199:}

杨帆发表于 2025-5-22 10:45

漂亮！欣赏学习亚伦老师美帖{:4_191:}

页: [1]

花潮论坛's Archiver

心如刀割--马健涛