买不到就自己做！「困ります」ボタンDIY记录
内容提要
作者使用Astro技术制作了一个7.7kB的手机铃声，解决了浏览器适配和体验问题，提到了HDR和PWA缓存技巧，展望了下一个项目JR铃声。
延伸解读
浏览器兼容性：移动端的隐藏挑战
文章揭示了移动端浏览器适配的复杂性。Safari的AudioContext会跳过音频开头，需通过裁切音频解决；长按按钮会触发放大镜和共享按钮，最终通过为div添加role="switch"的ARIA属性修复。这些案例表明，在移动Web开发中，除了功能实现，还需针对特定浏览器进行细致调试，ARIA属性可能成为解决交互问题的关键。
交互细节：从click到pointerdown的体验优化
作者将按钮事件从click改为pointerdown，以模拟实物按钮按下即触发的反馈，并添加了塑料按钮的咔哒声效。这体现了对用户体验的深入考量：通过事件时机的调整和音效的叠加，增强操作的真实感和满足感。这种对细节的关注，是提升Web应用品质的重要途径。
HDR与广色域：Web显示的现状与尝试
文章探讨了利用HDR技术让按钮红光更亮，但指出Web标准对HDR的支持仍处于草案阶段。作者测试了sRGB以外的颜色无法触发HDR，但为颜色指定了宽色域版本以在P3设备上更鲜艳。同时提到LCH颜色指定趋势，但需考虑兼容性。这反映了前沿显示技术在Web应用中的局限性与探索空间。
PWA缓存：离线可用的轻量级方案
作者为网页设计了PWA缓存，使整个包体在运行一次后即可离线使用。结合仅7.7kB的传输大小和153ms的加载速度，这确保了在无网络环境下也能快速访问。PWA缓存不仅提升了可用性，也展示了如何通过轻量级技术实现接近原生应用的体验，为类似项目提供了参考。
Q&A
作者使用了什么技术制作手机铃声？
作者使用了Astro技术制作手机铃声。
在不同浏览器中，TTS API的效果有什么问题？
在不同浏览器中，TTS API的效果不一致，例如在Chrome正常但在Safari上语速变快。
如何解决Safari中长按按钮出现放大镜的问题？
通过给<div>元素添加role属性来解决长按按钮出现放大镜的问题。
作者在iOS上遇到了哪些音频播放问题？
在iOS上，Safari会跳过音频的开头部分，作者通过裁切音频解决了这个问题。
作者计划制作的下一个项目是什么？
作者计划制作JR铃声，并探索使用ESP32进行项目开发。
如何提升按钮的触感体验？
通过改用pointerdown事件和添加音效来提升按钮的触感体验。
