play sound when piece moved

摘要： 这篇博客讲述了在国际象棋网站上添加一个新功能：当棋子移动时播放声音。作者最初认为这是一个很简单的功能，但最终发现并不像想象中那么简单。由于浏览器的自动播放策略，作者无法按照自己的意愿播放声音。 浏览器的自动播放策略规定： - 静音自动播放是允许的。 - 有声音的自动播放是允许的，如果： - 用户与该域进行了交互（点击、触摸等）。 - 在桌面上，用户的媒体参与指数已经超过了阈值，这意味着用户之前已经播放过带有声音的视频。 - 用户在移动设备上将该网站添加到了主屏幕或在桌面上安装了渐进式Web应用程序（PWA）。 - 顶级框架可以将自动播放权限委托给其内嵌框架，以允许带有声音的自动播放。 因此，在用户与页面进行交互之前，无法播放声音，在用户停止与页面进行交互时也无法播放声音。 为了解决这个问题，作者找到了一个绕过限制的方法：循环播放声音并调节音量！在棋子移动时将音量调节为1，棋子移动后将音量调节为0.0001。 为什么是0.0001而不是0或静音？ 因为如果设置为静音或音量为0，将触发自动播放策略的限制，而将音量设置为1或取消静音将在用户停止与页面进行交互时被阻止。但是，如果将音量设置为足够低的值，就不会触发自动播放策略，因为声音仍在播放。 在代码中，作者使用了以下方法来实现： ```rust sound.volume = 1; setTimeout(() => { sound.currentTime = 0; sound.volume = 0.0001; }, 500); ``` 当音量为0.0001时，用户听不到声音。 需要注意的是，在移动设备上不允许将音量设置为1！因此，在移动设备上可以将音量设置为静音。 ```rust sound.muted = false; setTimeout(() => { sound.currentTime = 0; sound.muted = true; }, 500); ``` --GPT 4