Android Chrome 调整播放进度会造成播放卡顿

nideii commented 1 year ago

Chrome 版本 108.0.5359.128 Android 版本: 13 kikoeru-express: https://github.com/azuse/kikoeru-express/commit/745f1307c1131181b0344ce5e06d17c41717af5c (二进制从Github Action下载) 服务器: Win10

NAS上挂服务端，内网手机听。调整播放进度，会造成播放卡顿，发现关闭GZIP能解决这个问题。

azuse commented 1 year ago

我好像从来没遇到过拖进度条导致的卡顿（捂脸）（倒是有遇到从公网听的时候，播放会断流...断流也没啥信息，很不好debug，用内网听的时候倒是没遇到断流。

nideii commented 1 year ago

今天发现即使关了gzip也还是有问题。给我感觉应该是解码错误，例如44100Hz的音频当作48000Hz来播放。这个可能上游代码的BUG？

隔壁asmr.one倒是没有这个问题。

顺带问问后端能不能读取本地文件夹，而不是内嵌前端。我这边调试修改前端代码会简单很多。

azuse commented 1 year ago

今天发现即使关了gzip也还是有问题。给我感觉应该是解码错误，例如44100Hz的音频当作48000Hz来播放。这个可能上游代码的BUG？

隔壁asmr.one倒是没有这个问题。

顺带问问后端能不能读取本地文件夹，而不是内嵌前端。我这边调试修改前端代码会简单很多。

调试直接拉代码本地用npm跑吧，可以前后端分别启动

SSoyca commented 1 year ago

首先感谢作者维护代码。我也遇到了同样的问题，初步推断应该是播放功能的代码问题。为此折腾了好一段时间，正好刷GitHub看到有人提issue，所以来提供一点折腾过的信息方便解决问题。同时，我也在自己尝试着手解决这个问题，不过我对javascript并不太懂，所以如果能得到些许帮助就更好了，再次感谢。

问题描述：

问题发生时的具体表现为：声音好像被慢放了一样，1秒的内容需要好几秒时间播放，并伴随大量卡顿、迟滞和噪音。为叙述方便，以下用“音频卡顿”指代该问题。

已知信息：

内网网络架构无性能瓶颈，客户端访问音频文件速度均大于600Mbps；
出现卡顿时播放器页面播放进度条中的缓冲进度是大于当前播放进度的，结合上述网络正常，可以推断浏览器缓冲的音频内容已经满足正常播放需求；
在持续播放（期间即使卡顿也不进行任何手动干预）一段时间后，卡顿会临时缓解数秒，随后再次出现，有一定的周期性；
在上述卡顿缓解（此时播放正常）期间手动调整进度至先前出现过卡顿的进度时仍无法正常播放；
手机端卡顿时，通过性能监视软件查看未发现手机性能异常；
遇到播放卡顿时，重新打开PWA就能够正常播放，但仅限当前播放的音频，切换至其他音频则问题依旧。

目前做过的尝试：

将媒体文件进行了offload，并确认流量已经是通过nginx直接发送到客户端；
切换到低质量的音频文件可以流畅播放。播放mp3文件时未发现卡顿，但播放wav文件时则必定复现；
分别尝试了手机端、平板端与电脑端的Firefox、Chrome浏览器，其中手机端两个浏览器均出现音频卡顿，电脑端无异常。平板端Firefox卡顿，Chrome无异常；
切换手机端CPU调度至性能模式对卡顿状况无影响；

软件信息：

Kikoeru：下载自最新Release的Windows版本 kikoeru-win-x64-vh0.010.zip Nginx：Openresty 1.21.4.1 Chrome：Play商店下载的最新版（111.0.5563.116）

硬件信息：

Kikoeru所在服务器：16核心 2.6GHZ CPU + >6GB可用 RAM Nginx所在服务器：20核心 2.6GHZ CPU + >20GB可用 RAM 手机端：K30 PRO (骁龙865+8G RAM) 平板端：Tab S8+ (骁龙8G1+8G RAM) 电脑端：台式机 (5600+32G RAM)

音频简要信息：

RJ号：RJ276068 码率：9216 kb/s 采样率：192 kHz 位深：24 位原文件大小：454 MiB

示例音频：

目前发现的稳定复现方法很简单，先播放其他音频大于10秒，并等待播放器自动切换下一首至示例音频，此时就会出现卡顿。简而言之就是将示例音频放在自动播放的下一首即可。测试文件大小（无损裁切）：26MiB Android端播放卡顿示例音频截取-24秒版本.zip PS：GitHub上传的附件有大小限制，所以从原音频中截取了一段，但就这一小段也确认存在卡顿情况。

音频详细信息：

概览
完整名称                           : [RJ276068]【192khzハイレゾ】道草屋 たびらこ【古宿耳かき】\wav\2.肩もみ.wav
格式                             : Wave
文件大小                           : 454 MiB
时长                             : 6 分 53 秒
总体码率模式                         : 恒定码率 (CBR)
总体码率                           : 9 216 kb/s
专辑                             : tabirako
演员                             : momoiro-code
导演                             : momoiro-code
原始来源形式/名称                      : tabirako

音频
格式                             : PCM
格式设置                           : Little / Signed
编解码器 ID                        : 1
时长                             : 6 分 53 秒
码率模式                           : 恒定码率 (CBR)
码率                             : 9 216 kb/s
声道数                            : 2 声道
采样率                            : 192 kHz
位深                             : 24 位
流大小                            : 454 MiB (100%)

ReportBy                       : MediaInfoLib - v22.06

azuse / kikoeru-express