​ 测试网址:

​ ♪ 动森24h: https://animalcrossing24h.vercel.app

(假装是个)使用说明

1. ost的url是网易云音乐的, 所以会出现海外没办法用的情况, 我想解决,然后解决不了.(以后再ry)

2. 每小时设定的是会自动刷新.

   ※ 有时候会有一分半的音乐延迟(原因不明), 所以当没有声音的时候直接手动刷新即可.

   ※ 每次刷新后音乐会变更, 分别是对应24小时的三个版本(sunny/rainy/snowy)进行循环.

3. 每次刷新后可能要重新点播放按钮继续.

   ※ 因为现在的主流浏览器已经不允许

4. 是兴趣使然的产物, 会侵删...虽然只是个小透明但是还是会担心律师函警告.

5. 有的朋友音乐加载不出来的话, 你可以把它当做一个钟(泪水)

闲聊

​ 本来是因为经常用其他的播放器经常循环里面的ost,然后某天意识不清醒觉得自己可不可以做一个对应现实世界时间的网页.

​ 我不会代码, 相关语言都只看了一下简介.

​ 本体就是html和js代码, js的主体运行代码主要是参考和拷贝的这个

↓↓↓
原文链接：https://blog.csdn.net/qq_34182808/java/article/details/84347393

​ 可以实现列表循环的效果, 但是因为audio运行相关代码全部都在js里面, 我开始想修改播放器的样式, 做成一个更符合页面风格的效果,翻了半天, audio组件又不在html上, 太难了就算了(.)

​ 谷歌的播放器上面本来有个下载的按钮, 我觉得有点碍事, 查了很多种方法, audio标签设定禁止下载

是没做到(因为audio是写在js脚本里的, 没有download这个设定与否), 只能用传说中程序员网友的骚操作,用css把下载功能物理藏起来, 网友们的智慧真神奇, 你看不到就等于没有(爆笑).

​ 做完才发现这个想法一开始就很赛博朋克, 要在静态页面实现很多动态变化的东西实际上就很微妙, 有种戴着镣铐跳舞的感觉, 真的会代码的话我大概会选择直接做一个小程序出来.

​ 刚开始的想法蓝图是: 24小时的ost + 能够暂停/播放的按钮 + 能够切换三个天气的版本的按钮

​ ↓

​ 显示当前时间 + 显示当前日期 + 显示当前时间播放曲名滚动字幕

​ 开始做之后, 才发现要实现配合现实时间要用到js里面的时间函数, 赋予变量然后进行条件判断, 从而实现每个小时的不同音乐列表.

​ 然后就是会改变的曲名, 这个我如法炮制想用js控制html里的文字div, 结果尝试了蛮久, 从开始想只替换歌名, 留住now playing这些文字, 到后来看网友的教程也是越看越晕, 后来还是简单粗暴处理了这个.

​ 然后就是音乐的播放问题, 开始设定的自动播放, 这样可以隐藏播放器, 让页面稍微干净一点, 在本地预览还行但是一部署就整个浏览器拒绝请求, safari开始我以为也没问题, 结果也是一样的结果, 谷歌和safari都不允许自动播放, 真的整的我查了好久的bug, 最后发现它们就是不让你放, 有种烤箱半天不工作发现不是烤箱问题是电厂不给你烤箱发电的感觉.(什么比喻)

​ 关于要不要留播放器这个问题我前期纠结了好久, 最后发现没播放器就是不行, 我投降给了各位屏蔽广告的浏览器大佬们.

​ 做完之后学法的朋友提醒我可能有东半球最大律师事务所的问题, 我沉思了(...)

重点

就很赛博朋克, 整个就很赛博朋克! 不管了, 爱咋咋地.

​

​