她自身
本帖最后由 马黑黑 于 2023-3-19 19:39 编辑 <br /><br /><style>#papa {
margin: -80px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: gray url('https://638183.freep.cn/638183/t23/1/stage.jpeg') center/cover no-repeat;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1;
--state: running;
}
#papa::before {
position: absolute;
content: '';
width: 100px;
height: 100px;
background: url('https://638183.freep.cn/638183/t23/1/heart_133236768103332344.png') 0 0 no-repeat;
background-size: 2900%;
animation: chgBg steps(28) 2s infinite both;
animation-play-state: var(--state);
}
@keyframes chgBg {
0% { background-position: 0%; }
100% { background-position: 100%; }
}
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1892111109" autoplay loop></audio>
</div>
<script>
(function(){
(function(mkPlayer) {let defaults = {lrcAr: [],lrc_css: 'top: 10px; left: 15px;',player_css: '',playerCode: `<style>#mplayer {position: absolute;left: left: calc(50% - 60px);bottom: 10px;--track: hsla(100,30%,80%,.65);--prog: hsla(100,60%,50%,.55);--color: #e9f1f6;}#btnwrap { display: block; fill: var(--color); opacity: .85; cursor: pointer; }#btnwrap:hover { opacity: 1; }#track { fill: none; stroke: var(--track); }#prog { fill: none; stroke: var(--prog); }#tmsg { fill: var(--color); stroke: none; font: bold 1em sans-serif; }#lrc {--motion: cover2;--tt: 1s;--state: running;--bg: linear-gradient(180deg,hsla(100,10%,50%,.75),hsla(100,100%,20%,.65));position: absolute;font: bold 2.4em sans-serif;color: hsl(100, 100%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 100%, 0%, .85));z-index: 900;}#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: transparent;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);}@keyframes cover1 { from { width: 0; }to { width: 100%; } }@keyframes cover2 { from { width: 0; }to { width: 100%; } }</style><svg id="mplayer" width="120" height="120"><g id="circle_wrap" transform="rotate(-90, 60, 60)" style="cursor: pointer;"><circle id="track" cx="60" cy="60" r="50" stroke-width="10" /><circle id="prog" cx="60" cy="60" r="50" stroke-width="10" /></g><g id="btnwrap"><path id="btnplay" d="M 50 50,50 70,70, 60 z"></path><path id="btnpause" d="M 52 50,52 70,57 70,57 50,52 50 z M 60 50,60 70,65 70,65 50,60 50 z" style="display: none;"></path><path d="M 57 50,60 50,60 70,57 70 z" fill="transparent" /></g><path id="curPath" d="M 20 70 Q 60 0 100 70" fill="none" stroke="none" /><path id="durPath" d="M 20 55 Q 60 110 100 55" fill="none" stroke="none" /><g id="tmsg"><text x="34" y="0"><textPath id="curMsg" xlink:href="#curPath" dominant-baseline="text-after-edge">00:00</textPath></text><text x="29" y="0"><textPath id="durMsg" xlink:href="#durPath" dominant-baseline="text-before-edge">00:00</textPath></text></g></svg><div id="lrc" data-lrc="HCPlayer">HCPlayer</div>`,};let playCode = (user_config) => {let data = Object.assign({}, defaults, user_config);papa.innerHTML += data.playerCode;mplayer.style.cssText += data.player_css;lrc.style.cssText += data.lrc_css;let mKey = 0, mFlag = true, cc = { x: 1 * track.getAttribute('cx'), y: 1 * track.getAttribute('cy'), len: track.getTotalLength(), };prog.style.strokeDasharray = prog.style.strokeDashoffset = cc.len;btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();circle_wrap.onclick = (e) => {let deg = Math.atan2(e.offsetY - cc.y, e.offsetX - cc.x) * 180 / Math.PI;deg += (e.offsetX < cc.x && e.offsetY < cc.y) ? 450 : 90;aud.currentTime = aud.duration * deg / 360;};aud.addEventListener('timeupdate', () => {prog.style.strokeDashoffset = cc.len - cc.len * aud.currentTime / aud.duration;curMsg.textContent = toMin(aud.currentTime);durMsg.textContent = toMin(aud.duration);for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime >= data.lrcAr) {if (mKey === j) showLrc(data.lrcAr);else continue;}}});aud.addEventListener('pause', () => mState());aud.addEventListener('play', () => mState());aud.addEventListener('seeked', () => calcKey());let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none', lrc.style.setProperty('--state', 'paused')) : (btnplay.style.display = 'none', btnpause.style.display = 'block', lrc.style.setProperty('--state', 'running'));let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = data.lrcAr;lrc.dataset.lrc = data.lrcAr.replace(/<br>/, '\n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');lrc.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < data.lrcAr.length; j++) {if (aud.currentTime <= data.lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > data.lrcAr.length - 1) mKey = data.lrcAr.length - 1;let time = data.lrcAr - (aud.currentTime - data.lrcAr);showLrc(time);};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;};};mkPlayer.HCPlayer = playCode;})(this);
let lrcTime = (ar) => {let tmpAr = [];for(j = 0; j <ar.length - 1; j ++) {if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));}let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;tmpAr.push(aver);tmpAr.forEach((item,key) => {ar = item > aver ? aver : item;});return ar;};
let averAdd = 0, offset = 0;
let getLrcAr = (text) => {let lrcAr = [];let calcRule = ;for(x of text.split('\n')) {let ar = [];let re = /\d+[\.:]\d+([\.:]\d+)?/g;let geci = x.replace(re,'');if(geci) {geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');let time = x.match(re);if(time != null) {for(y of time) {let tmp = y.match(/\d+/g);let sec = 0;for(z in tmp) sec += tmp * calcRule;ar = ;lrcAr.push(ar); }}}}lrcAr.sort((a,b)=> a - b);return(lrcTime(lrcAr));}
let 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她们由内而外（关不上的门）\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~ 终 ~`;
lrcAr = getLrcAr(geci);
HCPlayer ({
lrcAr: getLrcAr(geci),
lrc_css: 'left: 50%; bottom: 10px; transform: translate(-50%);',
player_css: 'bottom: 10px; right: 20px;',
});
papa.addEventListener('click', () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running'));
})();
</script>
这个是封装的小播 欣赏老师佳作！{:4_204:} 雨中悄然 发表于 2023-3-19 17:17
这个是封装的小播
你去看新站的代码。等下我帮你上传小波插件到相同的目录。 焱鑫磊 发表于 2023-3-19 17:23
欣赏老师佳作！
{:4_190:} 可以缩小尺寸播放 非常开心 发表于 2023-3-19 18:27
可以缩小尺寸播放
可以定义 马黑黑 发表于 2023-3-19 19:04
可以定义
能转发吗？征求您的意见，不同意我就不转发了 马老师这个播放器好像冬雨做过的{:4_189:}自傲一下 马老师我想给你5级精华，可惜俺权利就2级{:4_170:} 冬天的雨 发表于 2023-3-19 19:19
马老师我想给你5级精华，可惜俺权利就2级
{:4_191:} 非常开心 发表于 2023-3-19 19:15
能转发吗？征求您的意见，不同意我就不转发了
我的东东都可以转发。谢谢。 马黑黑 发表于 2023-3-19 19:37
我的东东都可以转发。谢谢。
万分感谢{:4_190:} 冬天的雨 发表于 2023-3-19 19:17
马老师这个播放器好像冬雨做过的自傲一下
是的，记得{:4_181:} 非常开心 发表于 2023-3-19 19:39
万分感谢
{:4_191:} 马黑黑 发表于 2023-3-19 19:40
是的，记得
可惜冬雨不才，游手好闲浪荡子，做不出好东西了{:4_170:} 右上角的效果是怎么弄出来的？看到貌似只是个长条的静态图图，怎么弄出动图的感觉了{:4_173:} 播放暂停也能让右上的动态效果暂停呢。 红影 发表于 2023-3-19 19:44
右上角的效果是怎么弄出来的？看到貌似只是个长条的静态图图，怎么弄出动图的感觉了
这是很常见的做法。长条形图片其实是一组“动图”的描述，像蒙太奇一样，由一帧一帧的静图构成。然后，我们让这些静图一个一个有序地展示，其结果就是一个 GIF 图片效果。 歌词很奇特。和画面制作也很相符。黑黑好帖{:4_187:}