雪猫社
·
买不到就自己做！「困ります」ボタンDIY记录
原文中文，约3500字，阅读约需9分钟。
📝
内容提要
作者使用Astro技术制作了一个7.7kB的手机铃声，解决了浏览器适配和体验问题，提到了HDR和PWA缓存技巧，展望了下一个项目JR铃声。
🎯
关键要点
-
作者使用Astro技术制作了一个7.7kB的手机铃声，解决了浏览器适配和体验问题。
-
提到使用TTS API生成语音，但在不同浏览器上的效果不一致。
-
在Firefox中遇到黑圈问题，经过调试找到了解决方案。
-
在iOS上解决了音频播放时跳过开头的问题，并处理了缩放控制。
-
使用ARIA属性解决了Safari中长按按钮出现放大镜的问题。
-
改用pointerdown事件提升按钮的触感体验，并添加了音效。
-
探索使用HDR技术提升按钮的视觉效果，但目前Web标准尚未完全支持。
-
为网页设计了PWA缓存，以便在无网络环境下使用。
-
下一步计划制作JR铃声，探索使用ESP32进行项目开发。
❓
延伸问答
作者使用了什么技术制作手机铃声？
作者使用了Astro技术制作手机铃声。
在不同浏览器中，TTS API的效果有什么问题？
在不同浏览器中，TTS API的效果不一致，例如在Chrome正常但在Safari上语速变快。
如何解决Safari中长按按钮出现放大镜的问题？
通过给<div>元素添加role属性来解决长按按钮出现放大镜的问题。
作者在iOS上遇到了哪些音频播放问题？
在iOS上，Safari会跳过音频的开头部分，作者通过裁切音频解决了这个问题。
作者计划制作的下一个项目是什么？
作者计划制作JR铃声，并探索使用ESP32进行项目开发。
如何提升按钮的触感体验？
通过改用pointerdown事件和添加音效来提升按钮的触感体验。
🏷️
