删了吧（马黑黑原创）
本帖最后由 朵拉 于 2023-1-28 22:53 编辑 <br /><br /><style>#papa { margin: auto; width: 760px; height: 460px; background: linear-gradient(to right bottom,navy,lightblue); box-shadow: 3px 3px 20px #000; position: relative; display: grid; place-items: center; overflow: hidden; z-index: 1; }
</style>
<div id="papa"></div>
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=1935613660.mp3" loop autoplay></audio>
<script>
(function() {
(function(mkPlayer) { let defaults = { lrcAr: [], player_css: '', lrc_css: '', playerCode: ` <style> #mplayer { --color1: snow; --color2: navy; position: absolute; left: calc(50% - 60px); bottom: 10px; width: 120px; height: 120px; border-radius: 50%; background: repeating-conic-gradient(var(--color1) 0deg, var(--color2) 0.18deg); border: 6px solid var(--color1); cursor: pointer; display: grid; place-items: center center; box-shadow: 1px 2px 4px #000; } #mplayer::before { position: absolute; content: attr(data-tt); color: var(--color2); text-shadow: 1px 1px 2px var(--color1); opacity: .95; } #lrc { --motion: cover2;--tt: 2s;--state: paused; --bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(0, 100%, 50%, .75)); position: absolute; top: 20px; font: bold 2.4em sans-serif; color: hsl(0, 10%, 90%); white-space: pre; -webkit-background-clip: text; filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95)); } #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> <div id="mplayer" data-tt="0"></div> <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; mplayer.onclick = () => aud.paused ? aud.play() : aud.pause(); aud.loop = false; let mKey = 0, coe = 0, mFlag = true;aud.addEventListener('pause', () => mState()); aud.addEventListener('playing', () => mState()); aud.addEventListener('ended', () => { mKey = 0; aud.play(); }); aud.addEventListener('timeupdate', () => { mplayer.dataset.tt = '-' + toMin(aud.duration - aud.currentTime); coe = Math.random() * 2.5; update(); for (j = 0; j < data.lrcAr.length; j++) { if (aud.currentTime >= data.lrcAr) { cKey = j; if (mKey === j) showLrc(data.lrcAr); else continue; } } });let update = () => { let step = coe + Math.random() * coe; mplayer.style.background = `repeating-conic-gradient(var(--color1) 0deg, var(--color2) ${step}deg)`; };let mState = () => aud.paused ? lrc.style.setProperty('--state', 'paused') : 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 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 lrcAr = [];
HCPlayer({
lrcAr: lrcAr,
lrc_css: '',
player_css: '--color1: navy; --color2: snow;',
});
})();
</script>
@马黑黑
马师 晚上好，这款播放器 怪好看哒~~{:4_190:} 朵拉 发表于 2023-1-28 22:54
@马黑黑
马师 晚上好，这款播放器 怪好看哒~~
好看就别删了吧 我看也不错，歌曲很少听过 原来歌名就叫删了吧，进来看到标题还以为是朵宝想删帖，这误会闹的{:4_173:} 这个播放器的确很漂亮，马老师创意无限。欣赏朵宝好帖{:4_187:} 欣赏老师佳作！ 只有播放器没有图片？
页:
[1]