亚伦影音工作室 发表于 2025-2-2 16:56

红尘缘 - 张冬玲【圆形播放器+滚动可控字幕】

本帖最后由 亚伦影音工作室 于 2025-2-2 19:29 编辑 <br /><br /><style>
#papa { margin: 150px 0 20px calc(50% - 721px);width:1286px; height: 720px; box-shadow: 3px 3px 20px #000; background: #800000 url('https://img2.oldkids.cn/upload/2020/11/25/photo_20201125103724606.jpg') no-repeat 0% 0%/100%;position: relative;overflow: hidden; }
#mypic {top:10%; left:48%;z-index: 2;
display: block;position: absolute;
    width: 250px; height: 250px;
    background: url(https://pic.imgdb.cn/item/67502acbd0e0a243d4dd5ddc.png)no-repeat center/3250px 250px;
animation: heart-burst steps(13) 2s infinite;mix-blend-mode: difference;
}
@keyframes heart-burst {
0% {background-position: 0px 0;}
100% {background-position: -3250px 0;}
}
#mxpic {top:0%; left:0%;z-index: 1;
display: block;position: absolute;
    width: 1286px; height: 720px;
    background: url(https://pic1.imgdb.cn/item/679f5045d0e0a243d4f9923a.jpg)no-repeat center/16720px 720px;
animation: burst steps(26) 3s infinite;mix-blend-mode: difference;
}
@keyframes burst {
0% {background-position: 0px 0;}
100% {background-position: -16720px 0;}
}
#pa{margin: 160px 0px ;position:absolute;width: 200px; height: 150px; overflow: hidden;right: 142px;}
#bnt{ left:85px;top: 40%;z-index: 6;
position: absolute; cursor: pointer;}
#cndpt{position: absolute; width: 100%; height: 100%;display:block;
align-items: center; }
#enopg{ position: absolute;width: 100%; height: 100%; display:none;
align-items: center; }
.start{color: #fff;position: absolute; top:68px; left: 42px;}
.end{color: #fff;position: absolute;top:68px; right: 42px;}
#prog {position: absolute; display: grid; place-items: center; width: 140px; height: 140px; right: 32px; bottom: 5px;border-radius: 50%;-webkit-mask: radial-gradient( transparent 63%, #000 66%, #000 0);cursor: pointer; z-index: 5;}
.gc{position: absolute;
          top: 40px;
            left: 0%;
            text-align: center;
            list-style-type: none;
            height: 200px;
            line-height: 30px;
            }
.lrc{
    width: 500px;
    height: 140px;
    overflow: hidden;bottom: 80px;
    display: block; position:absolute;;z-index: 5;
    margin: 0px 80px;}
.lrc #ullrc{
width: 100%;
padding: 0;list-style: none;transition: 0.3s all ease;
    margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 70px;
    line-height: 60px;
font-family:华文隶书;
    font-size: 30px;filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);
    color: #000078;
    font-weight: normal;
    transition: .3s all ease;
    list-style-type: none;
    text-align: center;display: block;
    width: 100%;
    margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 40px;
    color: #ff0000;
text-align: center;text-align: center;color: transparent; background: repeating-linear-gradient(to right, gold, lightgreen, snow, lightgreen, orange) 50%/200px 60px; -webkit-background-clip: text;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0); }
</style>
<div id="papa">
<div id="mypic" ></div>
<div id="mxpic" ></div>
<div id="pa">
<span class="end">00:00</span><div id="bnt">
<div id="cndpt" > <svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M0 0h6v24H0zM12 0h6v24h-6z" />
    </svg></div>
<div id="enopg"><svgwidth="30" height="36" viewBox="0 0 18 24">
      <path fill="#fff" fill-rule="evenodd" d="M18 12L0 24V0" />
    </svg></div>
</div>
<span class="start">00:00</span>
<div id="prog" title="播放进度条"></div>

</div>

<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

<div class="gc">
<marquee id="marquee"scrollAmount=10 width=1300 height=100 > <font face="heiti" size="6" color="#eee"><p style="text-align: center;">亚伦影音《红尘缘 》&nbsp;&nbsp;词 曲：张馨丹&nbsp;&nbsp;演 唱：张冬玲 &nbsp;&nbsp;歌词整理：梅竹&nbsp;&nbsp;出品：亚伦影音工作室 &nbsp;&nbsp; &nbsp;&nbsp;</p></font></marquee>
   </div>
</div>
<audio id="aud" src="https://img1.oldkids.cn/upload/2025/02/01/blog_260848378_20250201230806475.mp3" autoplay loop></audio>
<br>


<script >
bnt.onclick = () => aud.paused ? (aud.play(),enopg.style.display= 'none',cndpt.style.display= 'block',marquee.start(),mypic.style.animationPlayState = 'running',mxpic.style.animationPlayState = 'running') : (aud.pause(),enopg.style.display= 'block',cndpt.style.display='none', marquee.stop(),mypic.style.animationPlayState = 'paused',mxpic.style.animationPlayState = 'paused');
var marquee= document.getElementById('marquee');
const start = document.querySelector('.start')
   const end= document.querySelector('.end')
function conversion (value) {
    let minute = Math.floor(value / 60)
    minute = minute.toString().length === 1 ? ('0' + minute) : minute
    let second = Math.round(value % 60)
    second = second.toString().length === 1 ? ('0' + second) : second
    return `${minute}:${second}`
}

aud.onloadedmetadata = function () {
    end.innerHTML = conversion(aud.duration)
    start.innerHTML = conversion(aud.currentTime)
}
setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
   
}, 1000)

prog.onclick = (e) => { let deg = Math.atan2(e.offsetY - 50, e.offsetX - 50) * 180 / Math.PI;
                deg += (e.offsetX < 50 && e.offsetY < 50) ?450 : 90;
                aud.currentTime = aud.duration * deg / 360;
                }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background = 'conic-gradient(from -2deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, #fff 0)';});
                });
      </script >
<script >
var lrc = `红尘缘 - 张冬玲
《红 尘 缘》
作者：张馨丹
改编：于刚
演唱：张冬玲
☆★Lrc编辑 梅竹★☆
前世的姻 或来世的缘
今生与你相见
咫尺天涯 或轻舟两段
今世你我缠绵
红尘啊情深 情深似梦
烟花解冻春江月
岁月啊无痕 无痕是真
半是朦胧半是空
红颜笑 七分仗剑 三分娇
爱恨情仇一场 已飘渺
棋 迷局里 谁先老 岁月梢
是是非非 难预料
爱也好 聚散也好 同行不同道
放下凡尘俗世 齐逍遥
画 此生描 谁拂晓 闹一闹
情缘意未尽 呼啸
(Music)
前世的姻 或来世的缘
今生与你相见
咫尺天涯 或轻舟两段
今世你我缠绵
红尘啊情深 情深似梦
烟花解冻春江月
岁月啊无痕 无痕是真
半是朦胧半是空
红颜笑 七分仗剑 三分娇
爱恨情仇一场 已飘渺
棋 迷局里 谁先老 岁月梢
是是非非 难预料
爱也好 聚散也好 同行不同道
放下凡尘俗世 齐逍遥
画 此生描 谁拂晓 闹一闹
情缘意未尽 呼啸
(Music)
红颜笑 七分仗剑 三分娇
爱恨情仇一场 已飘渺
棋 迷局里 谁先老 岁月梢
是是非非 难预料
爱也好 聚散也好 同行不同道
放下凡尘俗世 齐逍遥
画 此生描 谁拂晓 闹一闹
情缘意未尽 呼啸
☆★谢谢欣赏★☆
=亚伦影音=
`;
function $(id) {
    return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
    var parts = lrc.split("\n");
    for (let index = 0; index < parts.length; index++) {
      parts = getLrcObj(parts);
    }
    return parts;

    function getLrcObj(content) {
      var twoParts = content.split("]");
      var time = twoParts.substr(1);
      var timeParts = time.split(":");
      var seconds = +timeParts;
      var min = +timeParts;
      seconds = min * 60 + seconds;
      var words = twoParts;
      return{
            seconds: seconds,
            words: words,
      };
    }
}
var lrcArray = getLrcArray();
function inputLrc() {
    for (let index = 0; index < lrcArray.length; index++) {
      var li = document.createElement("li");
      li.innerText = lrcArray.words;
      $("ullrc").appendChild(li);
    }
}
inputLrc();
function setPosition() {
    var index = getLrcIndex();
    if (index == -1) {
      return;
    }
   var lrc_li_height = 70, lrc_ul_height = 60;/*动态歌词显示的位置：250：第三行变色增大。160：在第二行变化。50：在第一行变化 */
    var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
    if (top < 0) {
      top = 0;
    }
    $("ullrc").style.marginTop = -top + "px";
    var activeLi = $("ullrc").querySelector(".active");
    if(activeLi){
      activeLi.classList.remove("active");
    }
    $("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
    var time = $("aud").currentTime + turn;
    for (var index = 0; index < lrcArray.length; index++) {
      if (lrcArray.seconds > time) {
            return index - 1;
      }
    }
}
$("aud").ontimeupdate = setPosition;
</script >

红影 发表于 2025-2-2 18:49

这只蝴蝶竟然能停留在任意帧，原来是长图做成的，真漂亮{:4_199:}

红影 发表于 2025-2-2 18:50

多行歌词也漂亮。欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2025-2-2 19:43

那只蝴蝶好可爱的样纸。{:4_199:}

小辣椒 发表于 2025-2-2 20:38

亚纶这个做的非常漂亮，小辣椒争取明天套用一个，现在在看乒乓球比赛

小辣椒 发表于 2025-2-2 21:30

仔细看了代码，亚纶你这个蝴蝶的制作太复杂了，而且还上传png和jpg二个图片，制作太麻烦了{:4_170:}

小辣椒 发表于 2025-2-2 21:30

直接用小动图就可以了

庶民 发表于 2025-2-3 07:15

在这里欣赏您。

山里人 发表于 2025-2-3 14:53

滚动条拉动歌曲也自动播放到点

老谟深虑 发表于 2025-2-3 18:31

         欣赏老师的佳作，点赞！
页: [1]
查看完整版本: 红尘缘 - 张冬玲【圆形播放器+滚动可控字幕】