亚伦影音工作室 发表于 2024-12-22 18:21:32

魏佳艺 - 人生的道场


<style>
#bfqbg {margin: 0px 0px;
        width:100%;
        height: 120px;
        background:#000 url()no-repeat 0px -200px/cover;
        border-radius:2px;
        position: relative;overflow: hidden;
        z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:460px; left:0%;width: 100%;height: 120px;opacity: 1;}
#dt img{width: 100%;}
audio {position:absolute;top:80px;left:70px;z-index: 50;
width: 90%;
height: 40px;
outline: none;
filter: invert(180);
}
audio::-webkit-media-controls-enclosure {
background:transparent ;
border-radius: 4px;
}
.media-controls-container,
.media-controls-container * {
background: rgb(129, 73, 200);
//滤镜反转为 rgba(0, 162, 255, 1);rgba(255, 93, 0, 0.8)#7eb637
border-radius: 4px;
}

audio::-webkit-media-controls-current-time-display {
order: 1; //设置弹性盒对象元素的顺序
color: #ffffff;
text-shadow: unset;
}

audio::-webkit-media-controls-time-remaining-display {
order: 2;
color: #000000;
text-shadow: unset;
}

#bt{ width: 500px; height: 50px;color: #ffffff; position: absolute; left:120px;top:10px;font-size: 16px; font-family:仿宋;z-index: 21;}

</style>

<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/644e2e6c0d2dde5777e7add9.gif" /></div>
<img id="tp" src="https://pic.imgdb.cn/item/6574fa4dc458853aefca81ff.jpg" alt="" />
<div id="bt">人生的道场-魏佳艺.</div>
<audioid="aud" loop controls autoplay>
<source src="https://bbs.cnzv.cc/mp3.php/3482-1734859883.mp3" type="audio/mp3" /></audio>
<divclass="lrc">
      <ul id="ullrc">
         </ul>
</div>
</div>


<style type="text/css">
.lrc{z-index: 20;
    width: 80%;bottom:-18px; left:15%;
    height: 100px;
    overflow: hidden;
    display: block;position: absolute;
    margin: 0 auto;}
.lrc #ullrc{
width: 700px;
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: 25px;
    color: #ffffff;}
</style>
<script >
var lrc = `魏佳艺 - 人生的道场
作词：聂小慧
作曲：聂小慧
编曲：王亚东
吉他：杨春
和声：乔秀芬
混音/母带：王亚东
宣发：阿宇、开心
监制：米奇
制作人：聂小慧
推广：汉马文化
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;
    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>

<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 = '';
      }
      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("Img");
let mState = () => aud.paused ? image.stop():image.play();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
</script>

醉美水芙蓉 发表于 2024-12-22 20:37:44

欣赏亚伦老师漂亮的播放器！

klxf 发表于 2024-12-22 22:21:56

谢谢老师分享精美播放器:)

肖浅 发表于 2024-12-28 01:09:21

必须支持。。。。。。。

红尘过客 发表于 2024-12-28 01:19:24

顶起很好的帖

确认过眼神 发表于 2024-12-29 20:57:53

感谢您的无私精神...
页: [1]
查看完整版本: 魏佳艺 - 人生的道场