祁隆情歌对唱（学习黑黑九妹效果）

小辣椒

lrc歌词

00:00 | 00:00

小辣椒

@马黑黑

谢谢黑黑的教程，非常喜欢的播放器

在做这个播放器的时候，感觉我一般图比较大，按钮感觉小了一点，我想自己修改换按钮，结果不行，真的佩服黑黑大神居然可以用这种图片按钮，我换了图片按钮就是捣鼓不好，你还设置了圆的我上去方的，不会调整尺寸

小辣椒

小辣椒

来不及了去吃饭了，晚上回家再上来

加林森

制作漂亮。赞！

红影

小辣椒 发表于 2022-8-27 17:45

觉得用这样的还得去量尺寸，好麻烦的。直接用透明图不好的么

红影

小辣椒 发表于 2022-8-27 17:45
来不及了去吃饭了，晚上回家再上来

我去量了一下亲爱的上传的图图，修改尺寸如下：
css里的
#btnplay { width: 34px; height: 34px; background: url('https://www.huachaowang.com/data/attachment/forum/202208/27/174503edpq5qebkdw555zb.png') -10px -11px no-repeat; cursor: pointer; }
js里的
let aud = new Audio(), lw = prgline.offsetWidth, bgpic ='https://www.huachaowang.com/data/attachment/forum/202208/27/174503edpq5qebkdw555zb.png';

aud.addEventListener('playing', ()  => btnplay.style.background = 'url(' + bgpic +') -58px -11px no-repeat');
aud.addEventListener('pause', ()  => btnplay.style.background = 'url(' + bgpic + ') -10px -11px no-repeat');



在本地试了一下，虽然量得不算准，但基本是对的。
两个地方要换图片，两个地方要修改数字。

红影

就是你上面那个绿色按钮试的。如果换其他按钮，估计数字又会不对了

上海朝阳

很美，花潮有老马驾车，你们的技术也越来越精妙

马黑黑

小辣椒 发表于 2022-8-27 17:44
@马黑黑

谢谢黑黑的教程，非常喜欢的播放器

你想放独立图片的话更好办的：

在CSS里定义的按钮标签的尺寸和图片一样，并给出第一个图片，url('图片一地址') no-repeat; ，在JS里则——

'playing' 监听那句，url('暂停图片地址') no-repeat;

'pause' 监听那句, url('播放图片地址') no-repeat;

马黑黑

小辣椒 发表于 2022-8-27 17:44
@马黑黑

谢谢黑黑的教程，非常喜欢的播放器

如果不是独立图片，则按照我的模式，按钮同样设置为实际单个按钮的大小，这个你要量一下。然后，第一张图，假设从10像素开始时按钮、上下各是5px的空白，则 url('图片地址') -10px -5px no-repeat; 第二张图，假设从120像素开始时按钮，则 url('图片地址') -120px -5px no-repeat;

梦油

小辣椒朋友晚上好！高级制作，赏心悦目。

小辣椒

加林森 发表于 2022-8-27 17:58
制作漂亮。赞！

谢谢队长

小辣椒

红影 发表于 2022-8-27 19:03
我去量了一下亲爱的上传的图图，修改尺寸如下：
css里的
#btnplay { width: 34px; height: 34px; backg ...

谢谢亲爱的，我明天去试一下，今天匆匆忙忙做好也是不会改尺寸

小辣椒

上海朝阳 发表于 2022-8-27 19:05
很美，花潮有老马驾车，你们的技术也越来越精妙

谢谢朝阳大哥欣赏，

小辣椒

马黑黑 发表于 2022-8-27 20:12
你想放独立图片的话更好办的：

在CSS里定义的按钮标签的尺寸和图片一样，并给出第一个图片，url('图片 ...

黑黑，我刚才就这样想的，但都没有时间多想，完成就发了，叫吃饭电话几个了

小辣椒

马黑黑 发表于 2022-8-27 20:17
如果不是独立图片，则按照我的模式，按钮同样设置为实际单个按钮的大小，这个你要量一下。然后，第一张图 ...

黑黑我还发现一个问题，可能就不是独立图片的原因，点击播放器按钮。播放器和歌词一起回晃动一下，我把歌词改大了就好一点

加林森

小辣椒 发表于 2022-8-27 20:45
谢谢队长

不客气的。

小辣椒

红影 发表于 2022-8-27 19:04
就是你上面那个绿色按钮试的。如果换其他按钮，估计数字又会不对了

是的，我试了几个的，数据都有不一样，但最好是独立图片

小辣椒

梦油 发表于 2022-8-27 20:27
小辣椒朋友晚上好！高级制作，赏心悦目。

谢谢梦油老前辈欣赏