首页 › 音画作品 › 《 锁 爱 》 - 笑 天（跟着小辣椒学习制作频谱播放器）

亦是金 发表于 2024-4-16 12:01

《 锁 爱 》 - 笑 天（跟着小辣椒学习制作频谱播放器）

<meta charset="UTF-8">
<style>
#papa {margin: 50px -100px;
        width: 1200px;
        height: 700px;
      border: 6px solid rgba(36, 201, 219,.95);
      border-radius: 20px;
        background:#000000 ;
        no-repeat center/cover;
        box-shadow: 3px 3px 20px #000;
        position: relative;
        display: grid;
        place-items: center;
        user-select: none;
        z-index: 1;
        --opt: .25;
        overflow: hidden;/*溢出：隐藏；*/
}
}
#mb{
        position: absolute;
        width: 100%;
        height: 100%;
        top:0%;   
        opacity: 1;
        z-index: 2;
        background:linear-gradient(0deg, #000000 10%,#Ffffff 11%,rgba(2, 2, 2, 0) 2%,rgba(52, 152, 219, 0) 47%,rgba(2, 2, 2, 0) 90%,#Ffffff 90%,black 1%);
}
#t{
        position: absolute;
        top:650px;
        left:1000px;
        width: 200px;
        height: 35px;
        z-index:4;
        mix-blend-mode:screen;
}/*动画 图片1*/
#t1{
        position: absolute;
        top:0%;
        left:0%;
        width: 100%;
        height: 100%;
        z-index:3;
}/*动画 图片2*/
#papa:hover #mplayer { transition: .7s; opacity: .9; }
#mplayer {
        z-index: 80;
        position: absolute;
        top:87.1%; left:65.9%;
        bottom: 5px;
        width: 30px;
        height: 30px;
        border: 0px solid #cccccc;
        border-radius: 0%;
        opacity: 1;
        transition: .7s;
        display: grid;
        place-items: center;
        --disp1: 0; --disp2: 1;
}/*播放器*/
#mplayer::before, #mplayer::after {
        position: absolute;
        content: '';
        border-style: solid;
        border-color: #FFFFFF;
        cursor: pointer;
        transition: .4s;
}
#mplayer::before {
        width: 0;
        height: 0;
        left: 7px;
        border-width: 6.5px 6.5px;
        border-color: transparent transparent transparent #FFFFFF;
        opacity: var(--disp1);
}/*播放按钮*/
#mplayer::after {
        width: 2px;
        height: 12px;
      left: 28px;
        border-width: 0 3px 0 3px;
        opacity: var(--disp2);
}/*暂停按钮*/
@keyframes opa { to {opacity: 1;} }
#tmsg {
        position: absolute;
        z-index: 91;
      font: normal 12px sans-serif;
      color: #ffffff;
      top:85%;
      left:49%;
}/*播放时间进度*/
#prog {
        position: absolute;z-index: 91;
      width: 15.6%;
      height: 0.3%;
      cursor: pointer;
        top:89.0%;
        left:48.8%;
        color: #cccccc;
        box-shadow: 0px 0px 0.1px 0.1px #000000;
        border-radius: 2px;
}/*播放进度条*/
#papa:hover #fullscreen { display:block ;opacity: 1;}

#wzsd1 { animation: wzsd 0.56s linear infinite ;}
@keyframes wzsd {
from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
50% {opacity: 1;}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
#bt{
        --w: 42%;
        width: var(--w);
        overflow: hidden;
        color: #fff;
        position: absolute;
        left:65.5%;
        top:91%;
        font-size: 15px;
        z-index: 21;
        word-break: keep-all;
        white-space: nowrap;
        animation: bt 20s linear infinite;
}/*播放歌曲名称*/
@keyframes bt {50% { transform: translateX(calc(0% - var(--w))); }}
</style>

<div id="papa">

<span id="fullscreen"> </span>
<div id="mb"></div>
<div id="bt">《 锁 爱 》-笑 天 </div>
<div id="t"><img id="tu" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/ysjzxyyd.gif" width="80%" height="80%"></div>
<div id="t1"><img id="tu1" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/gif/suoaipp.gif" width="100%" height="100%"></div>
<div id="tmsg">00:00 | 00:00</div>
<divid="prog"></div>
<div id="mplayer"></div>
<divclass="lrc" >
      <div   id="wzsd1"><ul id="ullrc">
       </ul>
      </div>      
</div>
</div>
<audio id="aud" src="https://ysj147.s3-us-east-1.ossfiles.com/zzsc/mp3/suoai.mp3" loop autoplay></audio>

<style type="text/css">
.lrc{
        z-index: 20;
        width: 100%;
        height: 120px;
        overflow: hidden;filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);
        display: block;
        position: absolute;
        top:5%;
        left:15%;
        z-index: 5;
        margin: 0 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;
}
</style>
<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 = 70, lrc_ul_height = 60;
    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;
(function(){let mState = () => aud.paused ? (mplayer.style.setProperty('--disp1','1'), mplayer.style.setProperty('--disp2','0')) : (mplayer.style.setProperty('--disp1','0'), mplayer.style.setProperty('--disp2','1'));
mplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
let fs = true;
      fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出', papa.requestFullscreen()) : (fullscreen.innerText = '全屏', document.exitFullscreen());
                fs = !fs;
      };
prog.onclick = (e) => {
                aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
      }
aud.addEventListener('timeupdate', () => {
               aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gradient(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
                tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);

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

/*控制视频*/
vid=document.querySelector('#vid');
mplayer.onclick =function() { vid.paused ? vid.play() : vid.pause()};
/*结束*/
/*控制歌词*/
wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
/*结束*/
</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;
            // 透明度还原
            image.style.opacity = '';image1.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 image= document.getElementById("tu");
var image1= document.getElementById("tu1");
mplayer.onclick =function() { aud.paused ? (image.stop(),image1.stop()):(image.play(),image1.play())};
</script>

liumang 发表于 2024-4-16 19:59

亦是金老师的制作很漂亮，就是打开慢一点，等了一会儿才开

liumang 发表于 2024-4-16 20:01

亦是金老师这个播放器不能一键停止？

liumang 发表于 2024-4-16 20:03

感谢老师分享

liumang 发表于 2024-4-16 20:22

亦是金老师，这个留着你自己修改看看效果

bgmnet 发表于 2024-4-16 23:28

赞👍🏻   {:5_118:}{:5_117:}

查看完整版本: 《 锁 爱 》 - 笑 天（跟着小辣椒学习制作频谱播放器）