临摹马导滚动背景+圆形播放器-花开的时候你就来看我
本帖最后由 执著 于 2024-4-2 17:43 编辑 <br /><br /><style>#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
box-shadow: 3px 3px 6px #333;
z-index: 1;position:relative }
#canv { cursor: pointer; }
</style>
<div id="papa">
<audio id="aud" src="https://od.lk/s/NzBfMTY1MzM3MDlf/042-%E8%8A%B1%E5%BC%80%E7%9A%84%E6%97%B6%E5%80%99%E4%BD%A0%E5%B0%B1%E6%9D%A5%E7%9C%8B%E6%88%91-%E9%98%BF%E5%AE%9D_%E5%BC%A0%E5%86%AC%E7%8E%B2.mp3" autoplay loop></audio>
<canvas id="canv" width="1200" height="600" style="border: 1px solid gray" title="播放/暂停"></canvas>
</div>
<script>/* 画面移动代码改自Firefox工程师的示例 */
(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 lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
HCPlayer({
lrcAr: lrcAr,
player_css: 'bottom: 10px; left: calc(50% - 60px);',
lrc_css: 'top: 20px; left: 50%; transform: translateX(-50%);',
});
(function () {
let ctx = canv.getContext("2d");
let img = new Image();
img.src = "https://pic.imgdb.cn/item/660a18b59f345e8d03e9375a.jpg";
let CanvasXSize = papa.offsetWidth,
CanvasYSize = papa.offsetHeight,
speed = 30,
scale = 1.05,
x = 0,
y = -4.5,
dx = 0.75;
let imgW, imgH, clearX, clearY, mTimer;
let draw = () => {
ctx.clearRect(0, 0, clearX, clearY);
if(imgW <= CanvasXSize) {
if(x > CanvasXSize) x = -imgW + x;
if(x > 0) ctx.drawImage(img, -imgW + x, y, imgW, imgH);
if(x - imgW > 0)
ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH);
}else{
if(x > CanvasXSize) x = CanvasXSize - imgW;
if(x > CanvasXSize - imgW) ctx.drawImage(img, x - imgW + 1, y, imgW, imgH);
}
ctx.drawImage(img, x, y, imgW, imgH);
x += dx;
};
let mState = () => mTimer = aud.paused ? clearInterval(mTimer) : setInterval(draw, speed);
img.onload = () => {
imgW = img.width * scale;
imgH = img.height * scale;
if(imgW > CanvasXSize) x = CanvasXSize - imgW;
clearX = imgW > CanvasXSize ? imgW : CanvasXSize;
clearY = imgH > CanvasYSize ? imgH : CanvasYSize;
draw();
};
aud.onpause = aud.onplaying = () => mState();
canv.onclick = () => aud.paused ? aud.play() : aud.pause();
})();
</script> 为什么歌词不显示了？在编辑器中完美显示的呀，请老师指点，谢谢！ 发现是播放器和歌词位置的设置问题，请老师指教为感！ 我的电脑能看到歌词和图片滚动啊，执著自己看不到么{:4_173:} 音乐和歌词出来的，但歌词和播放器都会溜界面外面去，你的图片实际高度不止600, 这个临摹制作很漂亮的，执著加油！ 红影 发表于 2024-4-1 20:18
我的电脑能看到歌词和图片滚动啊，执著自己看不到么
我后来才发现歌词溢出屏幕顶部了，修改了好多次，才有现在的结果，也不知道规不规矩： player_css: 'bottom: -400px; left: calc(50% - 60px);',
lrc_css: 'top: 700px; left: 50%; transform: translateX(-50%);',
小辣椒 发表于 2024-4-1 21:24
这个临摹制作很漂亮的，执著加油！
谢谢老师鼓励，正如你所说，歌词溢出了顶部，修改了好多次，也不知道是不是这样设置： player_css: 'bottom: -400px; left: calc(50% - 60px);',
lrc_css: 'top: 700px; left: 50%; transform: translateX(-50%);',
小辣椒 发表于 2024-4-1 21:24
这个临摹制作很漂亮的，执著加油！
谢谢老师鼓励，正如你所说，歌词溢出了顶部，修改了好多次，也不知道是不是这样设置： player_css: 'bottom: -400px; left: calc(50% - 60px);',
lrc_css: 'top: 700px; left: 50%; transform: translateX(-50%);',
#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
box-shadow: 3px 3px 6px #333;
z-index: 1; position:relative;}
player_css: 'bottom: 10px; left: calc(50% - 60px);',
lrc_css: 'top:20px; left: 50%; transform: translateX(-50%);',
把这几处改改试试看
起个网名好难 发表于 2024-4-2 08:22
#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
谢谢老师，改了，完美！能指教我一下思路吗？{:4_204:} 执著 发表于 2024-4-2 17:45
谢谢老师，改了，完美！能指教我一下思路吗？
#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
box-shadow: 3px 3px 6px #333;
z-index: 1; position:relative;}
加上这个后画面上的元素都以外框（#papa）作为相对的参考；
player_css: 'bottom: 10px; left: calc(50% - 60px);',
这个表示那个圆环放在离外框底边 10px 的位置
lrc_css: 'top:20px; left: 50%; transform: translateX(-50%);',
这个表示歌词放在离外框顶边 20px 的位置
起个网名好难 发表于 2024-4-2 18:17
#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
太感谢老师了{:4_190:} 执著 发表于 2024-4-1 22:22
我后来才发现歌词溢出屏幕顶部了，修改了好多次，才有现在的结果，也不知道规不规矩： player_css: 'bott ...
看看10吧，那个指导应该是解决问题的法子{:4_187:} 红影 发表于 2024-4-2 21:15
看看10吧，那个指导应该是解决问题的法子
谢谢老师{:4_204:} 执著 发表于 2024-4-2 21:40
谢谢老师
不客气啊，其实我也不熟练{:4_173:}
页:
[1]