亚伦影音工作室 发表于 2024-5-27 21:57

相思月演唱：齐旦布

<style>    #papa { margin:0px 0 80px calc(50% - 660px); 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://file.uhsea.com/2405/2de7cb94a1b08a18e1f97acd0532137329.mp3" 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://pic.imgdb.cn/item/66548c78d9c307b7e9a466eb.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 22:03

哇塞，亚伦这个透明频谱做的漂亮{:5_150:}

liumang 发表于 2024-5-27 23:06

{:5_150:}{:5_150:}{:5_150:}

liumang 发表于 2024-5-27 23:07

欣赏亚伦老师佳作{:5_142:}

老谟深虑 发表于 2024-5-28 15:59

         欣赏老师的精美音画。下午好！
页: [1]
查看完整版本: 相思月演唱：齐旦布