马黑黑 发表于 2024-8-17 07:34

千秋岁

<style>
#mama {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/4/qmqqsv.jpeg') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama > video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: rotateY(180deg);
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
</style>

<div id="mama" class="mama">
        <audio src="https://music.163.com/song/media/outer/url?id=2018166139" autoplay loop></audio>
        <video src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f4dfd1ef7.mp4" autoplay loop muted></video>
</div>

<script>
var geci = `千秋岁\n歌手 : 以冬\n作词 : 青柠/温瑞梁\n作曲 : 刘烁七\n出品：网易电波\n黑云压雨笼城楼\n落叶跃湖面似孤舟\n乌鸦盘旋枯枝头\n瞧那菱花镜替伊人说愁\n相思滋味如何受\n捻碎罗袖一片绸\n早已悔教夫婿觅封侯\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n黑云压雨笼城楼\n落叶跃湖面似孤舟\n乌鸦盘旋枯枝头\n瞧那菱花镜替伊人说愁\n相思滋味如何受\n捻碎罗袖一片绸\n早已悔教夫婿觅封侯\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n2024-8-17`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/meter_pinpu_yslrc.js';
document.body.appendChild(sf);

sf.onload = () => {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: .5,
                average: 0,
                pinpu: { num: 40, width: 3, height: 120, color: 'linear-gradient(white 1px, transparent 4px, transparent 80%, white 80.5% 0)' },
                player_css: 'right: 100px; bottom: 20px; color: silver;',
                lrc_css: 'left: 30px; bottom: 20px; --bg: linear-gradient(#eeffee, #eeffeef0, #eeffee80); color: #666;',
                fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: darkred;',
        });
};
</script>

马黑黑 发表于 2024-8-17 07:35

<h2>帖子代码</h2>
<div class="hE"><pre>
&lt;style&gt;
#mama {
        margin: 30px 0 30px calc(50% - 721px);
        width: 1280px;
        height: 720px;
        background: url('https://638183.freep.cn/638183/t24/4/qmqqsv.jpeg') no-repeat center/cover;
        box-shadow: 0 0 8px gray;
        overflow: hidden;
        z-index: 1;
        position: relative;
}
#mama &gt; video {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: rotateY(180deg);
        -webkit-mask: linear-gradient(to right top, red 10%, transparent 90%, transparent);
        pointer-events: none;
}
&lt;/style&gt;

&lt;div id="mama" class="mama"&gt;
        &lt;audio src="https://music.163.com/song/media/outer/url?id=2018166139" autoplay loop&gt;&lt;/audio&gt;
        &lt;video src="https://img.tukuppt.com/video_show/6181262/01/28/52/6291f4dfd1ef7.mp4" autoplay loop muted&gt;&lt;/video&gt;
&lt;/div&gt;

&lt;script&gt;
var geci = `千秋岁\n歌手 : 以冬\n作词 : 青柠/温瑞梁\n作曲 : 刘烁七\n出品：网易电波\n黑云压雨笼城楼\n落叶跃湖面似孤舟\n乌鸦盘旋枯枝头\n瞧那菱花镜替伊人说愁\n相思滋味如何受\n捻碎罗袖一片绸\n早已悔教夫婿觅封侯\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n黑云压雨笼城楼\n落叶跃湖面似孤舟\n乌鸦盘旋枯枝头\n瞧那菱花镜替伊人说愁\n相思滋味如何受\n捻碎罗袖一片绸\n早已悔教夫婿觅封侯\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n日落月升微听马蹄声\n惦记某人恨几分\n几樽空杯双影叠交加\n醒来却是梦啊\n日落月升微听马蹄声\n风携相思落飞花\n提笔研墨剪影入画\n寄云霞\n2024-8-17`;

var sf = document.createElement('script');
sf.charset = 'utf-8';
sf.src = 'https://638183.freep.cn/638183/web/js2024/meter_pinpu_yslrc.js';
document.body.appendChild(sf);

sf.onload = () =&gt; {
        HCPlayer({
                papa: '#mama',
                geci: geci,
                skip: .5,
                average: 0,
                pinpu: { num: 40, width: 3, height: 120, color: 'linear-gradient(white 1px, transparent 4px, transparent 80%, white 80.5% 0)' },
                player_css: 'right: 100px; bottom: 20px; color: silver;',
                lrc_css: 'left: 30px; bottom: 20px; --bg: linear-gradient(#eeffee, #eeffeef0, #eeffee80); color: #666;',
                fs_css: 'left: 20px; top: 20px; --bg: transparent; --color: darkred;',
        });
};
&lt;/script&gt;
</pre></div>

<script>
var sc = document.createElement('script');
sc.chartset = 'utf-8';
sc.src = 'https://638183.freep.cn/638183/web/js2024/helight.js';
document.body.appendChild(sc);
</script>

马黑黑 发表于 2024-8-17 07:46

本帖测试：原生lrc歌词同步之meter+频谱播放器

最近封装的原生lrc系列插件，对 audio、video 标签均无 id 或 class 要求，只要这些标签是帖子容器里的内容就成；对 audio 只认帖子容器里的第一个，对 video 标签，只要是帖子容器里面的，插件全部识别并进行管控。

meter 标签是一个测量标签，用于展示诸如仪表分量值之类的东东，可以用与进度表示，动态的进度变化会有默认的颜色出现。

了解 meter_pinpu_yslrc 插件的具体配置请移步：原生lrc歌词同步之meter频谱播放器 (52qingyin.cn)

起个网名好难 发表于 2024-8-17 08:02

https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif

meter_pinpu_yslrc.js 是 CSS、html和js 混合体

红影 发表于 2024-8-17 08:15

带meter 标签和频谱以及原生歌词的新封装，这个漂亮{:4_199:}

梦江南 发表于 2024-8-17 08:25

谢谢老师辛苦！周末快乐！{:4_187:}

红影 发表于 2024-8-17 08:26

这个制作古色古香的，很雅致{:4_187:}

红影 发表于 2024-8-17 08:29

视频使用了遮罩，有个地方没看懂，用了transform: rotateY(180deg); logo应该到左上角了，遮罩为什么是to right top？怎么感觉应该是to right bottom？{:4_204:}

醉美水芙蓉 发表于 2024-8-17 08:58

马黑黑 发表于 2024-8-17 09:18

本帖最后由 马黑黑 于 2024-8-17 09:23 编辑

起个网名好难 发表于 2024-8-17 08:02
meter_pinpu_yslrc.js 是 CSS、html和js 混合体
很多插件，包括框架（比如jQuery），都不可避免地这么做，只是各自的处理方式不同，有的是离散处理，有的会集中不同类别的东东。

本身，css+html+js 就是构成web页有机体的方式，而js就是操控css和HTML的，一些css和html封装到JS中再自然不过。

马黑黑 发表于 2024-8-17 09:18

醉美水芙蓉 发表于 2024-8-17 08:58
欣赏老师带来的精彩单图！

{:4_190:}

马黑黑 发表于 2024-8-17 09:19

红影 发表于 2024-8-17 08:15
带meter 标签和频谱以及原生歌词的新封装，这个漂亮

其实也没啥新不新的，就是在花潮格式lrc的基础上加入人工制作的歌词变为插件制作而已，精准度没那么好

马黑黑 发表于 2024-8-17 09:22

红影 发表于 2024-8-17 08:29
视频使用了遮罩，有个地方没看懂，用了transform: rotateY(180deg); logo应该到左上角了，遮罩为什么是to r ...

遮罩的设置针对原始元素，而非元素旋转后再去遮罩。

背景图片、渐变背景等，都是针对原始元素，它们不会考虑和它们一样并行的属性。

起个网名好难 发表于 2024-8-17 09:36

马黑黑 发表于 2024-8-17 09:18
很多插件，包括框架（比如jQuery），都不可避免地这么做，只是各自的处理方式不同，有的是离散处理，有的 ...

多见的是js + 同名css, html标签在js里 createElement 。

自然“条条道路通罗马”， 到达目的就OK

马黑黑 发表于 2024-8-17 09:43

起个网名好难 发表于 2024-8-17 09:36
多见的是js + 同名css, html标签在js里 createElement 。

自然“条条道路通罗马”， 到达目的就OK

这要看需求情况。如果CSS独立出来，则会需要做帖时多加一句引入CSS的语句，如果针对个人网站，这没啥问题，论坛做帖少一个设置比多一个设置方便。

起个网名好难 发表于 2024-8-17 09:53

马黑黑 发表于 2024-8-17 09:43
这要看需求情况。如果CSS独立出来，则会需要做帖时多加一句引入CSS的语句，如果针对个人网站，这没啥问题 ...

引入CSS就一句, 至少可省略的3个 *_css还给js减了负。

马黑黑 发表于 2024-8-17 10:12

起个网名好难 发表于 2024-8-17 09:53
引入CSS就一句, 至少可省略的3个 *_css还给js减了负。

这类系列插件都是个位数KB级别的体量，想一想人家是MB级别的，对压力应该是无感的

起个网名好难 发表于 2024-8-17 10:29

马黑黑 发表于 2024-8-17 10:12
这类系列插件都是个位数KB级别的体量，想一想人家是MB级别的，对压力应该是无感的

和压力无关习惯而已

红影 发表于 2024-8-17 10:43

马黑黑 发表于 2024-8-17 09:19
其实也没啥新不新的，就是在花潮格式lrc的基础上加入人工制作的歌词变为插件制作而已，精准度没那么好

和原来的不同，就是新呢{:4_187:}

红影 发表于 2024-8-17 10:45

马黑黑 发表于 2024-8-17 09:22
遮罩的设置针对原始元素，而非元素旋转后再去遮罩。

背景图片、渐变背景等，都是针对原始元素，它们不 ...

原来如此，还以为是针对旋转后的呢。还好在这个帖子里看到，之前我一直都是弄错了啊{:4_173:}
页: [1] 2 3
查看完整版本: 千秋岁