亚伦影音工作室 发表于 2025-3-8 19:19:40

我愿一生一世为你祈祷

<style>
#papa { margin: 10px 0 20px calc(50% - 710px); background:#800000;width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center; --state: running; --showbackface: visible;}

#mplayer { position: absolute; right: 330px; top: 120px; width: 260px; height: 450px; transform-style: preserve-3d; display: grid;place-item: center; animation: rot 20s linear infinite var(--state); }
#mplayer:hover { --state: paused; }
.image { position: absolute; width: 100%; height: 100%; border-radius: 8px; filter: drop-shadow(2px 2px 20px #000); cursor: pointer; transition: .7s; backface-visibility: var(--showbackface); transform: rotateY(var(--deg)) translateZ(300px); }
.image:hover { transform: rotateY(var(--deg)) translateZ(300px) scale(1.2); }

@keyframes rot { to { transform: rotateY(360deg); } }
.turntable{
    position: absolute;
display: block;
top:30%;
   left: 4%;
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%;
}
#dt{
      position:absolute;z-index: 5;
      width: 37px;
      height: 36px;background:#0000;
      top:75%;
   left: 5%;filter:invert(60%)hue-rotate(170deg);
      cursor: pointer;
    }
#mutedbnt{z-index: 5;
   width: 37px;
      height: 36px;background:#0000;
      
   left: 0%;filter:invert(70%)hue-rotate(160deg);
      cursor: pointer;
    }

#volumeSlider{left: 8%;top:76%;z-index: 5;
             position:absolute;
         width: 16%; height: 4px;}
input {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
    outline: 0;
    background-color: transparent;
    width: 100%;
}
::-webkit-slider-runnable-track {
    height: 2px;border-radius: 20px;
    background: #eee;
}
::-webkit-slider-container {
    height: 18px;
    overflow: hidden;
}
::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #f44336;
    border: 1px solid transparent;
    margin-top: -5px;
    border-image: linear-gradient(#f44336,#f44336) 0 fill / 6 10 6 0 / 0px 0px 0 2000px;
}

#loopbnt{
      position:absolute;
      width: 30px;
      height: 25px;background:#0000;
    top:76%;border-radius: 0px;
   left: 25%;filter:invert(80%)hue-rotate(180deg);
      cursor: pointer;
    }
    #bnt{left: 20px;bottom: 2%;position:absolute; z-index: 40;border: 0px solid #ff3300; width:50px;overflow: hidden;
      height: 50px;z-index: 50;
             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;z-index: 50;
      justify-content: space-between;width: 100%;
      position:absolute;bottom: 10px;
   left: 0px;height:30px;
    }

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

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

    .now::after {
      content: '';
      position: absolute;
      left: 100%;
      width: 12px;margin: -4px -2px;
      height: 12px;border-radius: 50px;
      background-color: #ff0000;
    }
.start{color: #fff; font: 400 13px sans-serif; margin: 0 10px;}
.end{color: #fff; font: 400 13px 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 id="mplayer"></div>
      
<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 id="dt">
<img src="https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png"id="mutedbnt" onClick="pc()"/>
</div>
<inputtype="range" min="0.1" max="1" step="0.1" value="0.8" id="volumeSlider" >
<img src="https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png"id="loopbnt" onClick="pmc()" title="开启循环/关闭循环" />
   

   </div>
<audio id="aud"autoplay>
            <source src="https://s2.ananas.chaoxing.com/sv-w7/audio/17/a4/2f/da1aa41f467563df8304f74152c55a4f/audio.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',image0.play()) : (aud.pause(),armm.style.opacity = '1',arm.style.opacity = '0',picc.style.opacity= '1',pic.style.opacity = '0',image0.stop());
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 默涵版)-魏新雨
词：崔伟立
曲：崔伟立
宣发：张丹娴| 廖文婷
统筹：唐欣宇
出品人：胡伟
OP：深圳启韵文化传媒有限公司
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
还没有任何的预兆
和你相遇在街角
你用那迷人微笑
成为我生命的主角
爱来的不迟也不早
一切都刚刚正好
想为你建个城堡
愿你不被世俗打扰
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠
我用一生一世为你祈祷
祈祷你能过得比我更好
牵着你的手 暮暮又朝朝
你就是我手心里的宝
我用一生一世为你祈祷
祈祷你的身边没有烦恼
幸福和快乐 在你身边绕
我就是你永远的依靠

`;
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;

var pics = [
      'https://638183.freep.cn/638183/t24/biu/ji01.jpg',
      'https://638183.freep.cn/638183/t24/biu/ji02.jpg',
      'https://638183.freep.cn/638183/t24/biu/ji03.jpg',
      'https://638183.freep.cn/638183/t24/biu/ji04.jpg',
      'https://638183.freep.cn/638183/t24/biu/ji05.jpg',
      'https://638183.freep.cn/638183/t24/biu/ji06.jpg',
];
Array.from({length: pics.length}).forEach((img,key) => {
      img = document.createElement('img');
      img.className = 'image';
      img.style.cssText += `--deg: ${key * 360 / pics.length}deg`;
      img.src = pics;
      mplayer.appendChild(img);
});
aud.onpause = aud.onplaying = () => mState();
mplayer.onclick = () => aud.paused ? (aud.play(),image0.play(),picc.style.opacity= '0',pic.style.opacity = '1' ) : (aud.pause(),image0.stop(),picc.style.opacity= '1',pic.style.opacity = '0') ;

papa.scrollIntoView(true);


var volumeSlider = document.getElementById('volumeSlider');
volumeSlider.addEventListener('input', function() {
    aud.volume =volumeSlider.value;
});
      function pc() {
var img = document.getElementById("mutedbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png") {aud.muted= true;
img.src = "https://pic1.imgdb.cn/item/67b41c9bd0e0a243d4006b23.png"; volumeSlider.value=0;
} else {aud.muted= false;volumeSlider.value=0.8;
img.src = "https://pic1.imgdb.cn/item/67b414afd0e0a243d4006964.png";}
}
function pmc() {
var img = document.getElementById("loopbnt");
if (img.getAttribute("src", 2) == "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png") {aud.loop =true;aud.play();
img.src = "https://pic1.imgdb.cn/item/67b33ba9d0e0a243d4004d10.png";
} else {aud.loop =false;
img.src = "https://pic1.imgdb.cn/item/67b33994d0e0a243d4004c77.png";}
}
</script >

<script>
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            image0.style.opacity = '';
      }
      if (this.storeUrl) {
            this.src = this.storeUrl;   
      }
    };
    HTMLImageElement.prototype.stop = function() {
      var canvas = document.createElement('canvas');
      //
      var width = this.width, height = this.height;
      if (width && height) {
            // 洢
            if (!this.storeUrl) {
                this.storeUrl = this.src;
            }
            // canvasС
            canvas.width = width;
            canvas.height = height;
            //
            canvas.getContext('2d').drawImage(this, 0, 0, width, height);
            //
            try {
                this.src = canvas.toDataURL("image/gif");
            } catch(e) {
                //
                this.removeAttribute('src');
                // canvas
                canvas.style.position = 'absolute';
                //
                this.parentElement.insertBefore(canvas, this);
                //
                this.style.opacity = '0';
                // 洢canvas
                this.storeCanvas = canvas;
            }
      }
    };
}

var image0= document.getElementById("mutedbnt");
</script>





醉美水芙蓉 发表于 2025-3-8 20:23:24

欣赏亚伦老师精彩音画！

醉美水芙蓉 发表于 2025-3-8 20:24:07

精彩动画美轮美奂,醉人的音乐把故事演绎得淋漓尽致.....

醉美水芙蓉 发表于 2025-3-8 20:24:34

美美的作品,精致细腻的音画作品,醉人的歌曲,浓浓的情谊,欣赏点赞.

翁奕童苑 发表于 2025-3-10 01:06:17

不错不错 支持下

1643091610 发表于 2025-3-13 23:56:30

支持分享，文章太精彩啦

rencaizhengce 发表于 2025-3-24 18:51:19

赞，顶帖真的超有内涵

equso 发表于 2025-3-30 17:40:03

感谢分享，解决我的疑惑啦

kuaikanchangshu 发表于 2025-4-5 06:16:14

分享超给力，点赞没商量
页: [1]
查看完整版本: 我愿一生一世为你祈祷