原罪(细线进度条及小圆播封装代码)
.mydiv { margin: 0 0 0 calc(50% - 593px); display: grid; place-items: center; width: 1024px; height: 640px; background: lightblue url('https://638183.freep.cn/638183/t23/2/yrzv.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; user-select: none; position: relative; z-index: 1; }
</style>
<div class="mydiv">
<img src="https://638183.freep.cn/638183/t22/gif/xkhe.gif" alt="" style="position: absolute; mix-blend-mode: multiply; transform: rotate(-20deg);" />
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=482395499.mp3" loop autoplay></audio>
</div>
<!--<script src="https://638183.freep.cn/638183/web/api/lineplayer_lrc.js"></script>-->
<script >
(function() {
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/lineplayer_lrc.js';
document.head.appendChild(script);
let lrcAr = [ [2.00,"詹雯婷 - 原罪",8], [18.9,"这里空空的",3.2], [23.54,"这是一场预谋的掠夺之后",4.4], [28.21,"一动也不能动",2.8], [33.34,"巨大的崩裂在耳边",4.0], [37.38,"我痲痹的双腿",2.7], [42.37,"和右手不断还淌出的血",4.2], [46.61,"还来不及分辨",3.1], [51.12,"已掏空的一切",3.1], [58.77,"真相在被看穿前",3.8], [62.59,"你有多少自责 我为你辩解",5.3], [67.93,"人说上帝是良善的",4.4], [72.36,"空虚的尽头 会有更多空间",6.0], [79.49,"怎么彷彿都听过",3.3], [83.86,"却都又如此遥远",4.6], [88.46,"爱你是我的原罪",4.6], [113.5,"这里红红的",2.9], [118.08,"这是一场华丽如牡丹的梦",4.4], [122.74,"左心上的癌变",2.8], [127.9,"愤怒猖狂在蔓延",4.0], [131.94,"系在窗台的心结",3.3], [136.9,"是否该还给真心的眼泪",4.2], [141.19,"还来不及分辨",3.2], [145.8,"已吞噬了一切",3.2], [151,"结局在被看穿前",4.0], [155.03,"你有多少自责 我为你辩解",5.2], [160.23,"人说我需要个内贼",4.4], [164.64,"空荡的尽头 会有更多空间",5.6], [171.78,"怎么彷彿都听过",3.3], [176.02,"却都又如此遥远",4.0], [180.77,"爱你是我的原罪",5.6], [211.12,"真相在被看穿前",3.8], [214.93,"你有多少自责 我为你辩解",5.2], [220.15,"人说上帝是良善的",4.4], [224.51,"空虚的尽头 会有更多空间",6.7], [231.77,"怎么彷彿都听过",3.4], [236.03,"却都又如此遥远",4.4], [240.66,"而爱你是我的原罪",5.1] ];
window.onload = () => {
HCPlayer({
papa: '.mydiv',
lrcAr: lrcAr,
});
}
})();
</script>
-------------------------------------------------------------------------------------------------------------------------------
插件配置举例
HCPlayer({
papa: '.mydiv', /* 指定帖子父元素标识 */
lrcAr: lrcAr, /* lrc歌词 */
/* lrc歌词UI配置 ↓ */
lrc_css: `
top: 15px; /* 上边 */
left: 15px; /* 左边 */
color: tan; /* 歌词底色*/
--bg: green; /* 同步颜色 */
`,
/* 播放控制器UI配置 ↓ */
player_css: `
color: snow; /* 文本颜色 */
--track: tan; /* 轨迹底色 */
--prog: white; /* 进度颜色 */
/* 按钮设置 ↓ */
--btnpic: url('https://638183.freep.cn/638183/t23/btn/disc.png') no-repeat center/cover;
`,
});
----------------------------------------------------------------------------------------------------------------------------------
一楼帖子,代码在二楼,是简单配置:一是指定帖子父元素标识,二是指定插件所用的lrc歌词数组。其他配置不做,使用插件默认配置。
需要详细配置,可研究三楼所举的例子进行相应操作。
很多时候,配置可以灵活。比方说本帖,通过 .mydiv 设置子元素居中,歌词和播放控制器UI都水平居中,这时,如果只想调整歌词的垂直位置,可以这样:
lrc_css: `top: 400px;`;
其他不必要的就不进行配置。
前一篇: 荒羽(封装带进度条的小圆头频谱代码)
下一篇: 罗刹海市(圆环播放器加歌 词封装代码)
评论列表 [0条]