- 精华
- 6
- 金钱
- 33154
- 经验
- 13910
- 在线时间
- 117 小时
- 注册时间
- 2024-1-19
- 最后登录
- 2024-7-4
TA的每日心情 | 开心
2024-6-29 22:39 |
|---|
签到天数: 57 天 [LV.5]常住居民I
金牌会员
|
老师晚上好！我在你“叶水相逢”背景滚动代码中https://www.huachaowang.com/foru ... &extra=page%3D1，加了这个歌词+播放器。发帖地址：https://www.huachaowang.com/foru ... p;extra=#pid2089896
但是，我引用js文件地址却无法正常显示播放器和背景滚动图。不知道问题出在哪里！“圆环进度条”代码地址：http://mhh.52qingyin.cn/api/player/
你能否给我看看，完整代码如下：
<style>
#papa { margin:0 0 0 calc(50% - 593px);
width: 1024px;
height: 600px;
box-shadow: 3px 3px 6px #333;
z-index: 1; }
#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() {
let script = document.createElement('script');
script.src = ' https://638183.freep.cn/638183/web/api/circle_lrc.js';
script.charset = 'utf-8';
document.head.appendChild(script);
script.onload = () => {
let geci = [
[4.07,"花开的时候你就来看我",3.9],
[7.96,"词：陈伟 曲：陈伟",4.2],
[12.14,"演唱：阿宝 张冬玲",5.0],
[17.17,"制作：Yourfellow",2.1],
[19.24,"翻几座高山， 趟几条河条",4.4],
[23.66,"才能找到我，梦中的辽阔",4.7],
[28.37,"风那么一吹，雨那么一落",4.5],
[32.85,"漫山遍野就开满七色的烟火",4.7],
[37.57,"喝几碗烈酒，唱几首倩歌",4.6],
[42.16,"温暖着你我，心中的蹉跎",4.7],
[46.83,"天那么的蓝，地那么的宽",4.6],
[51.43,"策马扬鞭别错过远方的传说",7.6],
[59.02,"花开的时候你就来看我",4.1],
[63.11,"等你来摘，最美的那一朵",4.6],
[67.67,"月起的时候，点然了篝火",4.5],
[72.13,"你会看见，最炽热的眼波",4.8],
[76.88,"花开的时候你就来看我",4.8],
[81.69,"别等花落，只留下了寂寞",4.5],
[86.21,"不要辜负这，如火的春色",4.6],
[90.85,"我的温柔，比那花儿还要多",23.5],
[114.36,"喝几碗烈酒，唱几首情歌",4.1],
[118.5,"温暖着你我，心中的蹉跎",4.6],
[123.11,"天那么的蓝，地那么的宽",4.6],
[127.7,"策马扬鞭别错过远方的传说",7.5],
[135.17,"花开的时候你就来看我",4.1],
[139.26,"等你来摘，最美的那一朵",4.6],
[143.87,"月起的时候，点然了篝火",4.6],
[148.47,"你会看见，最炽热的眼波",4.5],
[152.99,"花开的时候你就来看我",4.7],
[157.71,"别等花落，只留下了寂寞",4.6],
[162.3,"不要辜负这，如火的春色",4.5],
[166.8,"我的温柔，比那花儿还要多",4.8],
[171.6,"花开的时候你就来看我",5.3],
[176.94,"等你来摘，最美的那一朵",4.2],
[181.18,"月起的时候，点然了篝火",4.5],
[185.66,"你会看见，最炽热的眼波",4.1],
[189.79,"花开的时候你就来看我",4.8],
[194.62,"别等花落，只留下了寂寞",4.4],
[198.98,"不要辜负这，如火的春色",4.7],
[203.7,"我的温柔，比那花儿还要多",4.7],
[208.44,"我的温柔，比那花儿还要多",6]
];
HCPlayer({
papa: '#papa',
lrcAr: geci,
lrc_css: `
top: 20px;
color: silver;
--bg: linear-gradient(rgba(10,200,100,.4),rgba(10,200,100,.7));
`,
player_css: `
bottom: 10px;
--track: rgba(255,255,255,.6);
--prog: rgba(10,250,10,.6);
--color: snow;
`,
fs_css: `
left: 20px;
top: 20px;
--color: snow;
--bg: #333;
`,
});
};
})();
(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>
|
|
楼主: 马黑黑
楼主
显身卡
发表于 2022-12-21 22:09
发表于 2024-4-1 20:32
