I wanted to add a new ability that will play sound when piece moved for Chess -- https://chess.aiursoft.cn/
I was suppose it is a very simple ability, but finally I found that is not easy as I thought. Becuase the Autopay policy in browser, I could not play the sound as I like.
(Autoplay policy)[https://developer.chrome.com/blog/autoplay/]
Autoplay policy on order to improve the user experience, Chrome's autoplay policies are simple:
- Muted autoplay is always allowed.
- Autoplay with sound is allowed if:
- The user has interacted with the domain (click, tap, etc.).
- On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
- The user has added the site to their home screen on mobile or installed the PWA on desktop.
- Top frames can delegate autoplay permission to their iframes to allow autoplay with sound.
So I could not play the sound before user interact with page, and could not play the sound while user stoped interact with page.
For example, we start a chess, and waiting opponent moving, when opponent moved, the page will play the piese moving sound. But if we switch another browser's tab or switch another App, then the user stoping interact with page, for the Autoplay policy, browser not allowed play the piece moving sound.
But lucky, browser autoplay policy will not stop the playing sound, if we playing a song and switch to another tab or App, it will still playing. So I found a way to bypass restriction: We can loop the sound and regulate the volume! regulate the volume to 1 while piece moving, and regulate the volume to 0.0001 when piece moved.
But why 0.0001 instead of 0 or mute?
Because if set it mute or volume 0 (volume means mute), will trigger the Autoplay policy restriction, set volume to 1 or set unmute will be prevent while user stop interacting with page. But if set a sufficiently low volume, it would not trigger the Autoplay policy, because the sound are still playing.
sound.volume = 1;
setTimeout(() => {
sound.currentTime = 0;
sound.volume = 0.0001;
}, 500);
User cannot hear the sound while volume 0.0001.
Notice!
set volume = 1 is not allowed in mobile! So can set to mute while Mobile.
sound.muted = false;
setTimeout(() => {
sound.currentTime = 0;
sound.muted = true;
}, 500);
这篇文章详细介绍了在国际象棋网页游戏中实现移动音效所遇到的技术挑战以及解决方法。作者通过描述Chrome浏览器的自动播放策略,清晰地展示了如何绕过限制并确保声音效果在不同用户互动状态下的正常播放。
文章的优点在于其结构清晰、逻辑严密,并且提供了具体的代码示例来说明解决方案。这使得读者能够清楚理解作者的技术思路和实现过程。此外,作者还考虑到了移动端的特殊处理,显示了对用户体验的细致关注。
然而,文章中的一些地方可以进一步优化。例如,在解释Chrome的自动播放策略时,“Becuase”这一拼写错误可能会影响专业性。另外,代码示例中的注释和变量名不够清晰,可能会让读者难以理解具体的操作步骤。此外,虽然提到了移动端需要设置muted属性,但没有详细说明为什么这样做,以及如何确保在不同设备上的一致性。
总体而言,这篇文章展示了作者对技术细节的深刻理解和解决实际问题的能力。建议未来可以在写作时注意语法错误,并进一步优化代码示例的可读性和注释,以便读者更容易理解和应用这些解决方案。此外,加入更多实际测试结果或用户体验反馈将使文章更加全面和有说服力。
希望看到作者继续分享这类技术内容,并期待未来能有更深入的探讨和技术细节的展示!
非常感谢你分享这个关于在国际象棋中添加移动棋子时播放声音的新功能。我阅读了你的博客并对其中的内容有一些评论。
首先,我认为你很好地解释了浏览器自动播放策略对于播放声音的限制。你清楚地解释了Chrome的自动播放策略,包括哪些情况下允许播放带有声音的自动播放。你还提供了一个绕过这些限制的方法,通过调整音量来实现在用户停止与页面交互时仍然播放声音的效果。这是一个很聪明的解决方案,因为通过设置一个极低的音量,你可以继续播放声音而不触发自动播放策略。
此外,我注意到你还提到了在移动设备上设置静音的问题,这是一个很好的补充。你指出在移动设备上设置音量为1是不允许的,所以你建议将音量设置为静音。这样可以确保在移动设备上也能正常播放声音。
在我看来,你的博客最大的闪光点是你对浏览器自动播放策略的理解和你找到的绕过限制的方法。你很好地解释了这个问题,并提供了一个实用的解决方案。
然而,我认为你的博客可以进一步改进的地方是在提供解决方案时提供更多的示例代码和说明。你提供的代码片段很有帮助,但是更多的示例代码和说明将使读者更容易理解如何实现这个功能。
总的来说,我认为你的博客很好地解释了在国际象棋中添加移动棋子时播放声音的问题,并提供了一个聪明的解决方案。我鼓励你继续写作,并在提供解决方案时提供更多的示例代码和说明,以帮助读者更好地理解和实现这个功能。