论坛 › 欢乐水吧 › 你一直在我一直爱

亚伦影音工作室 发表于 2025-1-18 19:56

你一直在我一直爱

本帖最后由 亚伦影音工作室 于 2025-6-4 19:51 编辑 <br /><br /><style>
#papa { margin: 10px 0 20px calc(50% - 621px); background:#000 url('https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg') no-repeat center/cover;width: 1200px; height: 700px;   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:#0000;
width: 310px;
height:280px;
border-radius: 5%;
box-shadow: inset 0 0 10px #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.35), 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: black;
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: gray;
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%);
}

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

.dial::before {
content: '';
left: 50%;
transform: translateX(-50%);
top: 2px;
position: absolute;
width: 2px;
height: 5px;
background: white;
border-radius: 50%;
}
#player { position: absolute;
   text-align: center;
       width: 200px;
          top: 240px;
left: 50px;
      }
      #controls {   
            margin-top: 0px;
      }
      #bnt { background: #0000;border-radius: 0px;
            margin: 0 5px;color: #000;font-size: 18px;font-family:华文隶书;cursor: pointer;
   }

.progress {display: flex;align-items: center;
      justify-content: space-between;width: 98%;
      position: relative;top: 320px;
   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: 40px;
    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);

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

<div id="player">
      
      <div id="controls">
            <spanid="bnt"onclick="playMusic()" type="button" >播放</span>
            <span id="bnt" onclick="pauseMusic()" type="button">暂停</span>
            <span id="bnt" onclick="stopMusic()" type="button">停止</span>
</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>
<audio id="aud"autoplay>
            <source src="https://aod.cos.tx.xmcdn.com/storages/ff0c-audiofreehighqps/BF/7C/GKwRIaILX3FWABK6GgNWbTp_.m4a" type="audio/mpeg">
         </audio>

<script>
      var audioPlayer = document.getElementById('aud');

      function playMusic() {
            aud.play();
      }

      function pauseMusic() {
            aud.pause();
      }

      function stopMusic() {
            aud.pause(); //
            aud.currentTime = 0; // ò
      }

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)
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();
    </script>
<script >
var lrc = `你一直在我一直爱
词曲：晓朋
编曲：晓朋
HTML：歌词同步
创意制作；亚伦影音
走在这个迷情的时代
谁不渴望能得到真爱
倾心相遇在爱的花海
相依相守永远不分开
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
总要经历漫长的等待
爱的玫瑰才为你盛开
一颗真心换一份热爱
不离不弃才能到发白
你一直在我便一直爱
为你守住这爱的情怀
风雨沧桑都不会更改
海枯石烂是我的表白
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
你一直在我便一直爱
有你天空不再有阴霾
海角天涯爱不会分解
地老天荒爱与你同在
海角天涯爱不会分解
地老天荒爱与你同在
`;
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-18 20:02

播放器精彩！

红影 发表于 2025-1-18 20:09

亚伦老师把三个文字控制键弄到小播上了，小播的转动可以停在任何位置。
还有长长的进度条。这个制作真漂亮{:4_199:}

红影 发表于 2025-1-18 20:11

歌词同步也漂亮。
不过一般看到小播总是不觉先去点小播，不太会去先注意文字呢{:4_173:}

红影 发表于 2025-1-18 20:12

这个“停止”按钮厉害了，不但让音乐回到起始，连歌词也回到了最初{:4_199:}

梦油 发表于 2025-1-18 20:16

欣赏佳作，问候亚伦。

小辣椒 发表于 2025-1-18 20:30

亚伦这个三个按钮的成品出了{:4_187:}

小辣椒 发表于 2025-1-18 20:48

这次的代码亚伦也是整的漂亮{:4_187:}

老谟深虑 发表于 2025-1-19 18:01

         欣赏老师的佳作，点赞！

查看完整版本: 你一直在我一直爱