论坛 › 欢乐水吧 › 你是我的亲 - 狼戈

亚伦影音工作室 发表于 2024-9-29 19:23

你是我的亲 - 狼戈

本帖最后由 亚伦影音工作室 于 2024-9-29 19:24 编辑 <br /><br /><style type="text/css">
#papa { margin: 280px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/65b90314871b83018a88e819.jpg)no-repeat center/cover;width: 1280px; height: 720px;   box-shadow: 3px 3px 5px #000; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;}
#mysvg{position: absolute; left:10%; bottom: 10px; cursor: pointer; filter: drop-shadow(2px 1px 4px #000); }
@keyframes bgmove { to { background-position: -10px -5px, center }; }
#vid {z-index: 2;
        position: absolute;
        width: 90%;
        height: 90%;transform:translate(-180px,0px)scale(1);
        opacity: 1;
        object-fit: cover;
        pointer-events: none;
        bottom:10%;left:0%;
        clip-path:circle(30% at 50%50%);
       
}
.lrc {position:absolute;width: 70%;left:5%; z-index: 6;
    height: 440px;
   border: 0px solid white;
    overflow: hidden;margin: 50px 490px;
}

.lrc #ul {overflow: hidden;
    transition: all 0.6s;
    text-align: center;}
.lrc #ul li {overflow: hidden;
   font: normal 1.5em/0em 黑体;text-align: center;
    color: #eee;
filter:drop-shadow(#000 2px 1px 0px);
    height: 40px; font-weight: normal;
    line-height: 30px;
}
.lrc #ulli.active{
color: #03F7C7; transform:translate(20px,0px)scale(1.3);
margin: 0px 0px;
}
#fullscreen { position: absolute; top: 90%; right:130px;font: normal 2em/0em 黑体;color:#03F7C7; opacity: 1;filter: drop-shadow(2px 1px 0px #000);cursor: pointer; z-index: 111}
</style>
<div id="papa">
<span id="fullscreen">全屏欣赏</span>
<svg id="mysvg" width="500" height="40" viewBox="-50 -5 100 10" style="">
                <g style="fill="none" stroke="green" stroke-width="10" stroke-dasharray="4" >
                        <line x1="-50" y1="0" x2="50" y2="0"></line>
                        <line x1="-50" y1="0" x2="50" y2="0" stroke="lightgreen">
                              <animate attributeName="stroke-dashoffset" values="0;2;0;-2;0" dur="1.5s" repeatCount="indefinite"></animate>
                        </line>
                </g>
      </svg>

<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1371162499.mp3" autoplay="" loop="loop"></audio>
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4" autoplay loop muted></video>
<div class="lrc">
      <ul id="ul">
      </ul>
    </div>
</div>
<script>
mState = () => aud.paused ? (vid.pause(),mysvg.pauseAnimations()): (vid.play(),mysvg.unpauseAnimations());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mysvg.onclick = () => aud.paused ? aud.play() : aud.pause();

let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
                fs = !fs;
      };
</script>
<script>
var lrc = `你是我的亲 - 狼戈
作曲 : 马飞
作词：王信国
设计：亚伦影音工作室
你是我的亲 - 狼戈
这里是马头琴滋养的灵壤
这里是冬不拉热爱的故乡
这里是麦西来甫舞动的画廊
这里是瓜果飘香的大美新疆
一双手、两双手、千万双手
手挽手亲如一家神采飞扬
你是我的家人
你是我的亲
天山脚下处处鸟语花香
哈达举起新时代灿烂辉煌
天山脚下处处鸟语花香
哈达举起新时代灿烂辉煌
啊……
这里有白天鹅舞动的绝唱
这里有雪莲花绽放的脸庞
这里有马奶酒歌灌醉的牧场
这里有赛里木湖弹奏的交响
一颗心、两颗心、千万颗心
心连心兄弟姐妹情意绵长
你是我的家人
你是我的亲
天山脚下处处鸟语花香
哈达举起新时代的辉煌
天山脚下处处鸟语花香
哈达举起新时代灿烂辉煌
天山脚下处处鸟语花香
哈达举起新时代灿烂辉煌
天山脚下处处鸟语花香
哈达举起新时代灿烂辉煌`;

// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#aud"),
    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>

小辣椒 发表于 2024-9-29 19:26

欣赏亚伦的精彩制作{:4_199:}

小辣椒 发表于 2024-9-29 19:27

黑黑的新播放器，手机要点击播放器，视频效果才出来，现在这个设计好，全屏视频，手机会看不见

起个网名好难 发表于 2024-9-29 19:56

好制作！

彩云归 发表于 2024-9-29 20:15

欣赏佳作！
歌词不同步，请检查。

樵歌 发表于 2024-9-29 20:27

欣赏精彩制作！比较喜欢狼戈的风格。

红影 发表于 2024-9-29 21:07

制作漂亮，这样多行歌词滚动的歌词同步也很漂亮。{:4_199:}
不过同步歌词好像差了一句呢{:4_173:}

查看完整版本: 你是我的亲 - 狼戈