论坛 › 欢乐水吧 › 搀扶（DJ 版）【新歌在线】

亚伦影音工作室 发表于 2025-1-25 14:52

搀扶（DJ 版）【新歌在线】

本帖最后由 亚伦影音工作室 于 2025-1-26 01:09 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 721px); background:#800000 url('https://img2.oldkids.cn/upload/2020/11/23/photo_20201123133415772.jpg') no-repeat 80% 40%/50%;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;--state: running; }
.turntable{
    position: absolute;
display: block;
top:30%;
   left: 10%;
background:#660000;
width: 310px;
height:280px;
border-radius: 5%;
box-shadow: inset 0 0 8px #000;
}

.record {
position: absolute;
left: 35px;
top: 35px;
width: 200px;
height: 200px;
background: black;
border-radius: 50%;
animation: spin 2s infinite linear var(--state);
}
@keyframes spin {
0% {transform: none;
}
100% {transform: rotate(360deg);
}
}

.record::before {
content: '';
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
width: 180px;
height: 180px;
background: repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
border-radius: 50%;
}

.overlay {
content: '';
left: 35px;
top: 35px;
position: absolute;
width: 200px;
height: 200px;
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);
border-radius: 50%;
}

.inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
background: -webkit-gradient(linear, left top, left bottom, from(white), color-stop(50%, white), color-stop(50%, #F796A8), to(#F796A8));
background: linear-gradient(white, white 50%, #F796A8 50%, #F796A8);
border-radius: 50%;
}


.inner::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: #333;
border-radius: 50%;
}

.inner::after {
content: '亚伦影音 yinyue changdie';
width: 55px;
text-align: center;
font-family: sans-serif;
font-size: 8px;
position: absolute;
left: 50%;
top: 10px;
transform: translateX(-50%);
}

#arm-holder {
position: absolute;
width: 40px;
height: 40px;
background: #111;
border-radius: 50%;
right: 20px;
top: 40px;
}

#arm-holder::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
background: #999;
border-radius: 50%;
}

#arm {
position: absolute;
right: 13px;
width: 50px;
top: 10px;
height: 110px;
border: 10px solid #999;
transform: skew(-20deg, -20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 30% 0;
animation: armTwitch 1s infinite var(--state);
animation-direction: alternate-reverse;
}
@keyframes armTwitch {
0% {transform: skew(-20deg, -20deg);
}
100% {transform: skew(-20deg, -20deg) rotate(1deg);
}
}

#arm::before {
content: '';
position: absolute;
width: 20px;
height: 30px;
background: gray;
transform: skew(20deg, 20deg) rotate(75deg);
top: 98px;
left: -10px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}
#armm {
position: absolute;
right: 16px;
width: 38px;
top: 20px;
height: 150px;
border: 8px solid #999;
transform: skew(-20deg, -20deg)rotate(-20deg);
transform-origin: top right;
border-left-color: transparent;
border-top-color: transparent;
border-radius: 0 0 45% 0%;
opacity:0;
animation-direction: alternate-reverse;
}


#armm::before {
content: '';
position: absolute;
width: 25px;
height: 22px;
background: gray;
transform: skew(10deg, 20deg) rotate(80deg);
top: 142px;
left: -16px;
border-radius: 20%;
clip-path: polygon(10% 0%, 90% 0%, 100% 100%, 0% 100%);
}

.dial {
position: absolute;
bottom: 20px;
right: 20px;
width: 25px;
height: 25px;
background: #333;
border-radius: 50%;
}

.dial::before {
content: '';
left: 50%;
transform: translateX(-50%);
top: 2px;
position: absolute;
width: 2px;
height: 5px;
background: white;
border-radius: 50%;
}

    #bnt{left: 20px;bottom: 20px;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;
             border-radius: 0%;cursor: pointer;}

#pic{position:absolute;top:25px; left:28px;background:#ccc;
transform: translate(-50%, -50%);
clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 0, 50% 0, 50% 100%, 75% 100%, 75% 0);
      width:25px;
      height: 25px;}
#picc{opacity:0;position:absolute;top:25px; left:30px;background:#ccc; transform: translate(-50%, -50%);
   clip-path: polygon(75% 50%, 0 0, 0 100%);
      width:25px;
      height: 25px;}
.progress {display: flex;align-items: center;
      justify-content: space-between;width: 100%;
      position:absolute;bottom: 10px;
   left: 0px;height:30px;
    }

    .progress-bar {bottom: 0px;
      position:relative;
      width: 100%;
      height: 3px;
      background-color: #eee;
   left: 0px;border-radius: 20px;
      cursor: pointer;
    }

    .now {
      position: absolute;
      left: 0%;
      display: inline-block;
      height: 3px;border-radius: 20px;
      width: 94%;
      background: #ff0000;
    }

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 8px;margin: -2px -2px;
      height: 8px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 12px sans-serif; margin: 0 10px;}
.end{color: #fff; font: 400 12px sans-serif;margin: 0 10px;}
.lrc{
    width: 100%;
    height: 120px;
    overflow: hidden;bottom: 0px;
    display: block; position:absolute;z-index: 5;
    margin: 0px auto;}
.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: 0px;
    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); }
#fullscreen { opacity:1;position: absolute; width: 25px; height: 25px;   bottom: 50px; cursor: pointer;right: 25px;z-index: 40;}
#papa:hover #fullscreen { opacity:1;}
#全屏{ width: 25px; height: 25px; position: absolute;background:url(https://pic1.imgdb.cn/item/6774df83d0e0a243d4ed4fd7.png)no-repeat center/cover;}
#退出{ width: 25px; height: 25px; position: absolute;opacity:0;background:url(https://pic1.imgdb.cn/item/6774df8bd0e0a243d4ed4fd9.png)no-repeat center/cover; }
</style>
<div id="papa">


<div class="turntable">
    <div class="record">
      <div class="inner"></div>
    </div>
    <div class="overlay"></div>
    <div id="arm-holder">
      <div id="arm"></div>

      <div id="armm"></div>
    </div>

    <div class="dial"></div>

<div id="bnt"title="暂停/播放" >
<div id="pic"></div>
<div id="picc"></div>
</div>
</div>


<div class="progress">
      <span class="end">00:00</span>

      <div class="progress-bar">
      <div class="now"></div>
      </div>
   <span class="start">00:00</span>
</div>

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

<div id="fullscreen" title="全屏展示/退出全屏">
<div id="全屏"></div>
<div id="退出" ></div>
</div>
   </div>
<audio id="aud"autoplay>
            <source src="https://img4.oldkids.cn/upload/2025/01/25/blog_260855907_20250125143403551.mp3" type="audio/mpeg">
         </audio>

<script>


bnt.onclick = () => aud.paused ?(aud.play(),armm.style.opacity= '0',arm.style.opacity = '1',picc.style.opacity= '0',pic.style.opacity = '1') : (aud.pause(),armm.style.opacity = '1',arm.style.opacity = '0',picc.style.opacity= '1',pic.style.opacity = '0');
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running')};
aud.onplaying = aud.onpause = () => mState();

const audio = document.getElementById('aud')
const start = document.querySelector('.start')
const end = document.querySelector('.end')
const progressBar = document.querySelector('.progress-bar')
const now = document.querySelector('.now')

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)
}

progressBar.addEventListener('click', function (event) {
    let coordStart = this.getBoundingClientRect().left
    let coordEnd = event.pageX
    let p = (coordEnd - coordStart) / this.offsetWidth
    now.style.width = p.toFixed(3) * 100 + '%'

    aud.currentTime = p * aud.duration
    aud.play()
})

setInterval(() => {
    start.innerHTML = conversion(aud.currentTime)
    now.style.width = aud.currentTime / aud.duration.toFixed(3) * 100 + '%'
}, 1000)
let fs= true;
fullscreen.onclick = () => {
      fs ? (papa.requestFullscreen(),全屏.style.opacity= '0',退出.style.opacity = '1') : ( document.exitFullscreen(),全屏.style.opacity = '1',退出.style.opacity = '0');
      fs = !fs;
}

</script>
<script >
var lrc = `搀扶（DJ 版）
词曲：马健涛
编曲：马健涛
笛子：刘志敏
混音：马健涛
母带：马健涛
出品：星光灿烂
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动
另外一个时空再相守
多年前我牵了你的手
从此后我们风雨同路走
下雨了我为你撑伞
衣服破了你帮我缝上
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
一转眼就过许多年
我的脸布满了沧桑
你的眼被皱纹写满
你的美依然在我心田
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
搀扶你的手到永久
相约今生会一起走
今生我们还没爱够
死后也要葬在一个山头
搀扶管它天不长地不久
别哭因为有我把你守
有一天我们走不动了
另外一个时空再相守
另外一个时空再相守

`;
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-1-25 15:13

很温馨的帖子，制作漂亮。欣赏亚伦老师好帖{:4_199:}

红影 发表于 2025-1-25 15:15

这唱片制作很神奇，那个唱片上的唱针点击暂停可以动的，而唱片可以停在任意位置。

梦油 发表于 2025-1-25 16:35

欣赏佳作，问候亚伦。

杨帆 发表于 2025-1-25 16:56

谢谢精彩分享，祝福亚伦老师新年快乐{:4_176:}

起个网名好难 发表于 2025-1-25 18:04

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

老谟深虑 发表于 2025-1-25 18:45

         欣赏老师的佳作，点赞！这个代码在离坛歌词同步一闪一闪，不显示。请问老师是啥原因？

老谟深虑 发表于 2025-1-25 18:47

起个网名好难 发表于 2025-1-25 18:04


            难难老师，请问这个代码在离坛同步歌词不显示，一闪一闪的。不知为什么？

起个网名好难 发表于 2025-1-25 19:02

老谟深虑 发表于 2025-1-25 18:47
难难老师，请问这个代码在离坛同步歌词不显示，一闪一闪的。不知为什么？

没看到离坛的具体情况不过，下面两句那里是不支持的（换成**）
background: repeating-radial-gradient(black, black 5px, #1C1C1C 6px, #1C1C1C 7px);
background: linear-gradient(45deg, transparent, 40%, rgba(255,255,255,0.25), 60%, transparent);

绿叶清舟 发表于 2025-1-25 21:22

这个唱片制作太漂亮了

老谟深虑 发表于 2025-1-27 15:28

起个网名好难 发表于 2025-1-25 19:02
没看到离坛的具体情况不过，下面两句那里是不支持的（换成**）
background: repeating-radial-gradient ...

          谢谢老师，祝你新春愉快！蛇年吉祥！

查看完整版本: 搀扶（DJ 版）【新歌在线】