论坛 › 音乐沙龙 › 你会爱到什么时候 - 冷凡

亚伦影音工作室 发表于 2024-5-27 22:15

你会爱到什么时候 - 冷凡

本帖最后由 亚伦影音工作室 于 2024-5-27 22:15 编辑 <br /><br /><style>    #papa { margin:0px 0 20px calc(50% - 680px); width: 1164px; height: 640px; background:#222 url([https://pic.imgdb.cn/item/65fade049f345e8d03820549.jpg)no-repeat center/cover;box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}
#dt{position: absolute;top:0%; left:0%;width: 1164px;height: 640px;z-index:3;}
#dt img{ width: 100%;height: 640px;}
#pinpu { position: absolute; width: 200px; height: 80px; z-index: 9; top:6%;left:7%;z-index: 4;mix-blend-mode: lighten;}
#pinpu img{ width: 100%;}

#pinpu1 { position: absolute; width: 100%; height: 350px; z-index: 9; top:45%;left:0%;z-index: 4;mix-blend-mode: lighten;}
#pinpu1 img{ width: 100%;height: 350px;}

#bfqbj{margin: 10% 2%;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/66457360d9c307b7e9ffe724.png)no-repeat 0px 10px/320px 50px;z-index: 5;transform: scale(0.7);}
#prog {position: absolute;z-index: 6;
      width: 300px;
      height: 3px;
      cursor: pointer;
         top:10px;

left:0px;background:#F1612A linear-gradient(to right,#F1612A, #F1612Avar(--prg), white 0);
      color: #ffffff;
      --prg: 0%; --state: paused;}
#prog::before, #prog::after { position: absolute; }
#prog::before { content: attr(data-cu); left:-40px; top: -7px; }
#prog::after { right: -40px; content: attr(data-du); ; top: -7px; }

#mplayer {z-index: 80;position:absolute;top:16px;left:140px;width:30px;height:30px;cursor: pointer;filter:hue-rotate(60deg)contrast(180%)brightness(300%);}
#lb{ position: absolute;top: 22px;right:35px; width: 20px; height: 18px; }
#lb img{ width: 100%; height: 100%;   opacity: 1; }
@keyframes rot { to { transform: rotate(1turn); } }
.lrc{position: absolute;z-index: 90;transform:rotate(0deg);
    width: 960px;
    height: 100px;/*歌词轮廓高：160：显示一行 两行 三行。500：多行*/
      overflow: hidden;
    display: block;
    margin: 360px 40px;/*歌词调整：上下 左右*/
}
.lrc #ullrc{
    width: 100%;
    padding: 0;
    list-style: none;
    transition: 0.3s all ease;
    margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
    height: 50px;
    line-height: 50px;
font-family:悟空大字库;
    font-size: 30px;/*歌词字体大小：0不显示普通歌词，只有一行动态歌词*/
    color: #00fff0;transform: translate(0%,0%);
    font-weight: normal;
    transition: .3s all ease;/*一定要加上不然看着突兀*/
    list-style-type: none;
text-align:center;/*歌词显示对齐方式：left center right，默认居中（center）对齐*/
    display: block;
    width: 100%;
    margin: 0 auto;
}

/*动态歌词样式*/
.lrc #ullrc li.active{
    font-size: 35px;color: #F1612A;
}
text-align:center;
transform: translate(0%,0%);
    font-weight: normal;


</style>
<div id="papa">
<divid="dt"><img id="dtImg" src="https://pic.imgdb.cn/item/658d19f6c458853aef55c1ac.jpg" alt="" /></div>
<audio id="aud" src="https://s1.krakenfiles.com/uploads/27-05-2024/uNCoZn5jTR/music.m4a" autoplay loop></audio>
      <div id="pinpu"> <img id="pinpuImg" src="https://pic.imgdb.cn/item/664ea18ed9c307b7e9b76419.gif" alt="" /></div>
<div id="pinpu1"> <img id="pinpu1Img" src="https://s8.krakenfiles.com/uploads/27-05-2024/ng1BY0ZTzc/image.gif" alt="" /></div>
      <div id="bfqbj">
<div data-cu="00:00" data-du="00:00" id="prog" title="" style="--state: running; --prg: 48.40552205703211%;"></div>
<div ><img id="mplayer" src="https://638183.freep.cn/638183/t23/btn/play2.png" alt="" /></div>
<div id="lb"> <img id="lbImg" src="https://pic.imgdb.cn/item/662615500ea9cb14035d435e.gif" alt="" /></div>
</div>
<div class="lrc">
      <ul id="ullrc">
         </ul>
      </div>

</div>

<script>
aud.onplaying = aud.onpause = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
      /* */
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
img.onclick = function() {
      if (aud.paused) {
                aud.play();
      } else {
                aud.pause();
      }
}
aud.addEventListener("play", function (e) {
      img.src="https://638183.freep.cn/638183/t23/btn/pause2.png";
}, false);
aud.addEventListener("pause", function (e) {
      img.src="https://638183.freep.cn/638183/t23/btn/play2.png";
}, false);})();



let mState = () => prog.style.setProperty('--state', aud.paused ? 'paused' : 'running');
aud.addEventListener('pause', mState, false);
aud.addEventListener('play', mState, false);


aud.addEventListener('timeupdate', () => {
      prog.style.setProperty('--prg', aud.currentTime / aud.duration * 100 + '%');
      prog.dataset.cu = toMin(aud.currentTime);
      prog.dataset.du = toMin(aud.duration);
});

prog.onclick = (e) => aud.currentTime = e.offsetX * aud.duration / prog.offsetWidth;
let toMin = (val) => {
                if (!val) return '00:00';
                val = Math.floor(val);
                let min = parseInt(val / 60),
                        sec = parseFloat(val % 60);
                if (min < 10) min = '0' + min;
                if (sec < 10) sec = '0' + sec;
                return min + ':' + sec;
      };
/**/

/**/
if ('getContext' in document.createElement('canvas')) {
    HTMLImageElement.prototype.play = function() {
      if (this.storeCanvas) {
            // 洢canvas
            this.storeCanvas.parentElement.removeChild(this.storeCanvas);
            this.storeCanvas = null;
            //
            imagelb.style.opacity = ''; imagepinpu.style.opacity = '';imagedt.style.opacity = '';imagepinpu1.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 imagelb= document.getElementById("lbImg");
var imagedt= document.getElementById("dtImg");
var imagepinpu= document.getElementById("pinpuImg");
var imagepinpu1= document.getElementById("pinpu1Img");
mplayer.onclick =function() { aud.paused ?(aud.play(),imagelb.play(),imagepinpu.play(),imagedt.play(),imagepinpu1.play()): (aud.pause(),imagelb.stop(),imagepinpu.stop(),imagedt.stop(),imagepinpu1.stop())};
</script>
<script >
var lrc = `你会爱到什么时候 - 冷凡
词：张超
曲：张超
原唱：郑东
忘了是什么时候
习惯了一些问候
听老情歌最后一首
轻轻的唇在颤抖
时间像无边的海
我们在无力地游
思念在前后焦心在左右
谁在挥舞着衣袖
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下别让风带走
时间像无边的海
我们在无力地游
思念在前后焦心在左右
谁在挥舞着衣袖
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下别让风带走
你会爱我到什么时候
你会陪我到哪个路口
我不知道用什么理由
让你可以和我厮守到白头
你会爱我到什么时候
你会等我到哪座桥头
我只剩下这一颗红豆
请你把它收下别让风带走
请你把它收下别让风带走
`;
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 = 50, lrc_ul_height = 50;/*动态歌词显示的位置：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 >

红影 发表于 2024-5-27 23:24

漂亮的频谱效果和歌词效果。
欣赏亚伦老师好帖{:4_199:}

执著 发表于 2024-5-27 23:28

欣赏老师的单曲音乐：你会爱到什么时候 - 冷凡{:4_204:}

查看完整版本: 你会爱到什么时候 - 冷凡