无法从服务人员播放缓存的音频 [英] Cannot play cached audio from service worker
问题描述
总结:无法通过 Service Worker 缓存和使用缓存的音频.
Summary: Unable to cache and use the cached audio via a Service Worker.
尝试:使用服务工作者和缓存 API 缓存相对较小的音频文件 (2-3mb).这些是通过 HTML Audio 元素加载/播放的，该元素通常设置一个范围"标题.
Trying to: cache relatively small audio files (2-3mb) using service worker and cache API. These are loaded/played via a HTML Audio element, which usually sets a 'range' header.
问题:Service Worker 响应整个内容，忽略范围标头，Audio 元素忽略内容并且不播放.
Problem: Service worker responds with the whole content, ignoring the range header, and the Audio element ignores the content and does not play.
没有 service worker: 服务器遵循 range 标头，发送部分内容，Audio 元素很高兴并播放音频.
Without service worker: server obeys the range header, sends partial content, Audio element is happy and plays the audio.
我使用的是 Google Chrome 52.
I am using Google Chrome 52.
注意: 似乎已注意到解决方案mnot "从一个完整的缓存条目服务范围请求" 但是有没有浏览器实现了这个?或者，有什么解决方法吗??
Note: Solution appears to have been noted by mnot "Serve range requests from a complete cache entry" but has any browser implemented this? Or, is there any workaround??
技术信息
Chrome 终端标准错误:[1:1:0603/164806:ERROR:render_media_log.cc(23)] MediaEvent: PIPELINE_ERROR demuxer: 无法打开
Chrome terminal stderr: [1:1:0603/164806:ERROR:render_media_log.cc(23)] MediaEvent: PIPELINE_ERROR demuxer: could not open
Chrome 控制台错误:Uncaught (in promise) DOMException: The element has no supported sources.
Chrome console error: Uncaught (in promise) DOMException: The element has no supported sources.
Chrome 标头(含 SW，2 部分):
Chrome headers (with SW, 2 parts):
PART#1
GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:200 OK (from ServiceWorker)
Remote Address:127.0.0.1:3333
RESPONSE
accept-ranges:bytes
connection:keep-alive
content-length:2449048
content-type:audio/x-m4a
date:Fri, 03 Jun 2016 10:14:02 GMT
etag:"56f8f953-255e98"
last-modified:Mon, 28 Mar 2016 09:28:51 GMT
server:nginx
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=0-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36
PART #2
GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:200 OK (from ServiceWorker)
Remote Address:127.0.0.1:3333
RESPONSE
accept-ranges:bytes
connection:keep-alive
content-length:2449048
content-type:audio/x-m4a
date:Fri, 03 Jun 2016 10:14:02 GMT
etag:"56f8f953-255e98"
last-modified:Mon, 28 Mar 2016 09:28:51 GMT
server:nginx
x-content-type-options:nosniff
x-frame-options:SAMEORIGIN
x-xss-protection:1; mode=block
REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=2392064-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36
Chrome 标头(不含 SW，3 部分！):
Chrome headers (without SW, 3 parts!):
PART #1
GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333
RESPONSE
Connection:keep-alive
Content-Length:2449048
Content-Range:bytes 0-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block
REQUEST
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:localhost:3333
Range:bytes=0-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36
PART #2
GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333
RESPONSE
Connection:keep-alive
Content-Length:56984
Content-Range:bytes 2392064-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block
REQUEST
Accept:*/*
Accept-Encoding:identity;q=1, *;q=0
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Connection:keep-alive
Host:localhost:3333
If-Range:"56f8f953-255e98"
Range:bytes=2392064-2449047
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36
PART #3
GENERAL
Request URL:http://localhost:3333/audio.m4a
Request Method:GET
Status Code:206 Partial Content
Remote Address:127.0.0.1:3333
RESPONSE
Content-Length:2121368
Content-Range:bytes 327680-2449047/2449048
Content-Type:audio/x-m4a
Date:Fri, 03 Jun 2016 10:24:32 GMT
ETag:"56f8f953-255e98"
Last-Modified:Mon, 28 Mar 2016 09:28:51 GMT
Server:nginx
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-XSS-Protection:1; mode=block
REQUEST
Provisional headers are shown
Accept-Encoding:identity;q=1, *;q=0
Range:bytes=327680-
Referer:http://localhost:3333/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.10 Safari/537.36
推荐答案
查看 https://samdutton.github.io/samples/service-worker/prefetch-video/ 通过手动创建范围响应来解决此问题.
Check out https://samdutton.github.io/samples/service-worker/prefetch-video/ which works around this issue by manually created ranged responses.
解决这个问题的关键在于弄清楚浏览器应该在这里做什么，并在需要时更新服务工作者规范.
Fixing this is gated on figuring out what browsers should be doing here, and updating the service worker spec if needed.
这篇关于无法从服务人员播放缓存的音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
