论坛 › 欢乐水吧 › 红尘客栈

亚伦影音工作室 发表于 2024-5-11 23:01

红尘客栈

本帖最后由 亚伦影音工作室 于 2024-5-14 07:14 编辑 <br /><br /><style>
        #papa { margin:00px 0 20px calc(50% - 600px); width: 1164px; height: 640px; background:#333; box-shadow: 3px 3px 6px gray; position: relative; overflow: hidden;}
#vid {
        position: absolute;
        width: 100%;
        height: 100%;transform:translate(-180px,0px)scale(1);
        opacity: 1;
        object-fit: cover;
        pointer-events: none;
        bottom:0px;
        clip-path:circle(30% at 50%50%);
       
}
        #canv { position: absolute;top: 195px;left: 245px; transform: skew(-15deg) scale(2.8, 1.8);opacity: .4;}
        #bfqbj{margin: 45% 740px;width: 320px;height: 200px;position: absolute;background:url(https://pic.imgdb.cn/item/663d89940ea9cb1403fda2dc.png)no-repeat 0px 10px/260px 50px;}
#prog {position: absolute;z-index: 91;
      width: 300px;
      height: 3px;
      cursor: pointer;
         top:10px;

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

#mplayer {z-index: 80;position:absolute;top:16px;left:134px;width:38px;height:38px;cursor: pointer;}
#lb{ position: absolute;top: 24px;right:35px; width: 22px; height: 20px; }
#lb img{ width: 100%; height: 100%;   opacity: 1; }

@keyframes rot { to { transform: rotate(1turn); } }
.lrc {position:absolute;width: 700px;margin-left:0px; z-index: 6;
    height: 440px;
   border: 0px solid white; text-align: center;
    overflow: hidden;margin: 50px 490px;
}

.lrc #ul {overflow: hidden;
    transition: all 0.6s;
    text-align: center;
}

.lrc #ul li {font-size: 20px;overflow: hidden;
   font-family:仿宋;text-align: center;
    color: #cccccc;
filter:drop-shadow(#000 1px 1px 1px)drop-shadow(#000 1px 1px 1px);
    height: 40px; font-weight: normal;
    line-height: 30px;
}
.lrc #ulli.active{ transform:translate(20px,0px)scale(1.3);
color: #03F7C7;
margin: 0px 0px;
}

</style>

<div id="papa">
<video id="vid" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/ab3c4dcdf625245d97ace90a0f262001_preview.mp4" autoplay loop muted></video>
        <audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w8/audio/78/c1/e3/badd8fe9d7a436dbd3a8b09a9770bdbb/audio.mp3" autoplay loop></audio>
        <canvas id="canv" width="280" height="520"></canvas>

        <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://pic.imgdb.cn/item/66260c740ea9cb14034b5c16.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="ul">
      </ul>
    </div>
</div>

<script>
        var sF = document.createElement('script');
        sF.src = 'https://638183.freep.cn/638183/web/js/cloth.js';
        document.body.appendChild(sF);
        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://pic.imgdb.cn/item/66260c740ea9cb14034b5c16.png";
}, false);
aud.addEventListener("pause", function (e) {
        img.src="https://pic.imgdb.cn/item/66260c7f0ea9cb14034b6d07.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;
      };
/*结束*/

/*控制视频/喇叭*/
var vid=document.querySelector('#vid');
var imagelb= document.getElementById("lbImg");
mplayer.onclick =function() { aud.paused ?(aud.play() ,vid.play(),imagelb.play()): (aud.pause(),vid.pause(),imagelb.stop())};
/*结束*/

/*以下是控制动图的插件*/
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 = '';
      }
      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;
            }
      }
    };
}
</script>
<script>
var lrc = `天涯的尽头是风沙
红尘的故事叫牵挂
封刀隐没在寻常人家东篱下
闲云野鹤古刹
快马在江湖里厮杀
无非是名跟利放不下
心中有江山的人岂能快意潇洒
我只求与你共华发
剑出鞘恩怨了谁笑
我只求今朝拥你入怀抱
红尘客栈风似刀骤雨落宿命敲
任武林谁领风骚
我却只为你折腰
过荒村野桥寻世外古道
远离人间尘嚣
柳絮飘执子之手逍遥
檐下窗棂斜映枝桠
与你席地对座饮茶
我以工笔画将你牢牢的记下
提笔不为风雅
灯下叹红颜近晚霞
我说缘份一如参禅不说话
你泪如梨花洒满了纸上的天下
爱恨如写意山水画
剑出鞘恩怨了谁笑
我只求今朝拥你入怀抱
红尘客栈风似刀骤雨落宿命敲
任武林谁领风骚
我却只为你折腰
过荒村野桥寻世外古道
远离人间尘嚣
柳絮飘执子之手逍遥
任武林谁领风骚
我却只为你折腰
你回眸多娇我泪中带笑
酒招旗风中萧萧剑出鞘恩怨了`;

// 最开始获取到的歌词列表是字符串类型（不好操作）
let lrcArr = lrc.split('\n');
// 接收修正后的歌词数组
let result = [];
// 获取所要用到的dom列表
doms = {
    audio: document.querySelector("#aud"),
    ul: document.querySelector("#ul"),
    container: document.querySelector(".lrc")
}
// 将歌词数组转成由对象组成的数组，对象有time和word两个属性（为了方便操作）
for (let i = 0; i < lrcArr.length; i++) {
    var lrcData = lrcArr.split(']');
    var lrcTime = lrcData.substring(1);
    var obj = {
      time: parseTime(lrcTime),
      word: lrcData
    }
    result.push(obj);
}
// 将tiem转换为秒的形式
function parseTime(lrcTime) {
    lrcTimeArr = lrcTime.split(":")
    return +lrcTimeArr * 60 + +lrcTimeArr;
}
// 获取当前播放到的歌词的下标
function getIndex() {
    let Time = doms.audio.currentTime;
    for (let i = 0; i < result.length; i++) {
      if (result.time > Time) {
            return i - 1;
      }
    }
}
// 创建歌词列表
function createElements() {
    let frag = document.createDocumentFragment(); // 文档片段
    for (let i = 0; i < result.length; i++) {
      let li = document.createElement("li");
      li.innerText = result.word;
      frag.appendChild(li);
    }
    doms.ul.appendChild(frag);
}
createElements();
// 获取显示窗口的可视高度
let containerHeight = doms.container.clientHeight;
// 获取歌词列表的可视高度
let liHeight = doms.ul.children.clientHeight;
// 设置最大最小偏移量，防止显示效果不佳
let minOffset = 0;
let maxOffset = doms.ul.clientHeight - containerHeight;
// 控制歌词滚动移动的函数
function setOffset() {
    let index = getIndex();
    // 计算滚动距离
    let offset = liHeight * index - containerHeight / 2 + liHeight / 2;
    if (offset < minOffset) {
      offset = minOffset;
    };
    if (offset > maxOffset) {
      offset = maxOffset;
    };
    // 滚动
    doms.ul.style.transform = `translateY(-${offset}px)`;
    // 清除之前的active
    let li = doms.ul.querySelector(".active")
    if (li) {
      li.classList.remove("active");
    }
    // 为当前所唱到的歌词添加active
    li = doms.ul.children;
    if (li) {
      li.classList.add("active");
    }
};
// 当audio的播放时间更新时，触发该事件
doms.audio.addEventListener("timeupdate", setOffset);
</script>

马黑黑 发表于 2024-5-11 23:34

巧妙的构思

红影 发表于 2024-5-11 23:53

好美的制作，这个帖子太惊艳了。欣赏亚伦老师好帖{:4_199:}

樵歌 发表于 2024-5-12 10:45

和歌搭配绝佳！漂亮不是般的！

梦油 发表于 2024-5-12 10:48

欣赏佳作，问候亚伦。

老谟深虑 发表于 2024-5-12 10:59

          欣赏老师的佳作，点赞！

山里人 发表于 2024-5-13 09:28

欣赏佳作

最美的诗意 发表于 2024-5-15 14:47

赞一个。。。。。

小辣椒 发表于 2024-5-15 20:24

亚伦这个格子会自动晃动{:4_199:}

查看完整版本: 红尘客栈