卡路里

马黑黑

红影 发表于 2025-3-18 16:37
这个音频不跟着图片了，完全自己独立的

这是为了不让歌词同步机制影响页面的操作位置。豆包用的同步方法是元素的 scrollIntoView API，运行时会强制页面回到高亮歌词所在的视口区域，不论你在那里对页面进行操作（比如正在底部编辑回帖，或正在查看4楼的代码）

马黑黑

梦江南 发表于 2025-3-18 16:15
老师厉害，佩服！

马黑黑

花飞飞 发表于 2025-3-18 14:44
艾玛，一路看下来。这是手把手教学怎么用豆包制作音频播放器。。。AI使用实战课程由此开启

也没有手把手，展示一下代码

马黑黑

花飞飞 发表于 2025-3-18 14:45
强烈请求白老师公布咒语，上酒 上茶上花上美女

没有咒语，就是用平常要求谁谁谁做什么什么一样的话和它沟通就行

马黑黑

花飞飞 发表于 2025-3-18 14:47
音频小播直接独立了，还能控制主贴动态，很特别，耳目一新。。。

固定某个元素简单的，用CSS的position: fixed; 就可以了

花飞飞

马黑黑 发表于 2025-3-18 18:26
也没有手把手，展示一下代码

嗯，这个太直观了，别处可没有这样的教程

花飞飞

马黑黑 发表于 2025-3-18 18:27
没有咒语，就是用平常要求谁谁谁做什么什么一样的话和它沟通就行

主要是跟它沟通得少呗。。

花飞飞

马黑黑 发表于 2025-3-18 18:28
固定某个元素简单的，用CSS的position: fixed; 就可以了

好哒，我现在去瞅瞅代码怎么一步一步变成这么简洁好用的贴子的。

花飞飞

马黑黑 发表于 2025-3-18 18:26
也没有手把手，展示一下代码

看完了豆包给的播放器并运行了一下，
它的按纽初看时正常，点下去之后，无论是暂停还是播放，我这里显示的都是字符，而非图片。。
这一点在CSS打包时做了改进，播放和暂停显示的是全部新裁的形状。。色彩搭得更漂亮 。。

花飞飞

马黑黑 发表于 2025-3-18 18:27
没有咒语，就是用平常要求谁谁谁做什么什么一样的话和它沟通就行

CSS代码差不多还可以看得懂一些。
JS打的包部分跟老师写得代码差太多了。。完全云里雾里。。。
之前还想说自己能不能跟一遍，看完JS发现自己想多了。。死了这条心吧

花飞飞

马黑黑 发表于 2025-3-18 18:28
固定某个元素简单的，用CSS的position: fixed; 就可以了

.audio-player {
    position: fixed;
    left: 20px;
    bottom: 320px;
    width: 200px;
看完发现，这几句略改改就能解决遮回复的问题了 。。。

红影

马黑黑 发表于 2025-3-18 18:20
跟随图片之后，网页就会被绑架：只要歌词同步运行中，页面总会被翻到歌词所在的视口

是的，我去试了一下，放到帖子里，就被绑架了，想去编辑都不行了，彻底跑最上面去了。

红影

马黑黑 发表于 2025-3-18 18:20
跟随图片之后，网页就会被绑架：只要歌词同步运行中，页面总会被翻到歌词所在的视口

我的试贴出问题，折腾半天，后来发现只要暂停就能编辑了

马黑黑

红影 发表于 2025-3-18 20:35
我的试贴出问题，折腾半天，后来发现只要暂停就能编辑了

就是酱紫的：scrollIntoView 大大简化了歌词同步的算法，但它很霸道，和我们之前已经试过的效果一样

红影

马黑黑 发表于 2025-3-18 18:25
这是为了不让歌词同步机制影响页面的操作位置。豆包用的同步方法是元素的 scrollIntoView API，运行时会 ...

所以还真没办法让播放器跟着图片了，它会强制回到歌词位置。

马黑黑

红影 发表于 2025-3-18 20:19
是的，我去试了一下，放到帖子里，就被绑架了，想去编辑都不行了，彻底跑最上面去了。

现在我加入了一个收起播放器功能，在帖子页面硬回车刷新就能看到效果

马黑黑

花飞飞 发表于 2025-3-18 19:57
.audio-player {
    position: fixed;
    left: 20px;

对，top 或 bottom 可以设置一下，放在Y方向的中央。

不过这还不是理想的解决方法。我现在想到的是让播放器可以收起、放回，已经做好了，Ctrl + F5 刷新可以看到效果：可以手动收起、弹出播放器

马黑黑

花飞飞 发表于 2025-3-18 19:56
CSS代码差不多还可以看得懂一些。
JS打的包部分跟老师写得代码差太多了。。完全云里雾里。。。
之前还 ...

JS代码风格可以是多种多样的。你先接触了什么样的，你就会觉得那样的是较好理解的

马黑黑

花飞飞 发表于 2025-3-18 19:03
好哒，我现在去瞅瞅代码怎么一步一步变成这么简洁好用的贴子的。

瞅瞅能年轻十岁

马黑黑

花飞飞 发表于 2025-3-18 19:54
看完了豆包给的播放器并运行了一下，
它的按纽初看时正常，点下去之后，无论是暂停还是播放，我这里显示 ...

豆包用的是字符按钮，我改用 clip-path 替代字符，不存在编码环境兼容问题