当 mp3 被 Workbox 缓存时，无法擦洗/滚动 jPlayer 音频 [英] Cannot scrub/scroll through jPlayer audio when mp3 is cached by Workbox

问题描述

我已将单页 HTML5 Cordova 应用程序转换为 PWA.该应用程序广泛使用 jPlayer 来播放 mp3 文件.我在这里使用循环 jPlayer 的变体:http://jplayer.org/latest/demo-05/.圆形播放器有一个圆形的进度条，也可以用来在轨道上前后滑动.

I have converted a single page HTML5 Cordova app into a PWA. The app uses jPlayer extensively to play mp3 files. I am using a variant of the circular jPlayer here: http://jplayer.org/latest/demo-05/. The circle player has a circular progress bar that can also be used to scrub backwards and forwards through the track.

在 PWA 模式下一切正常，直到我使用 Workbox(版本 4.3.1)缓存 mp3.然后擦洗失败.我可以抓住擦洗杆并移动它，但是当我松开它时，轨道会从头开始重新启动.如果我对 mp3 使用预缓存或对所有 mp3 文件使用专用音频缓存，就会发生这种情况.关闭缓存，更新 Service Worker 并刷新——然后我就可以清理了.打开缓存和刷新和清理失败.

Everything works fine in PWA mode until I cache the mp3 with Workbox (version 4.3.1). Then scrubbing fails. I can grab the scrub bar and move it but when I release it the track restarts from the beginning. This happens if I use precaching for the mp3 or a dedicated audio cache for all mp3 files. Turn off caching, update the service worker and refresh -- and I can scrub. Turn on caching and refresh and scrubbing fails.

我真的很想清理缓存的音频文件，以便应用程序可以脱机工作.

I would really like scrubbing to work with cached audio files so that the app can work offline.

这在本质上与使 mp3 可搜索 PHP 类似.

推荐答案

我摘录自 Workbox 文档的 提供缓存音频和视频的方法.

某些浏览器在请求媒体资源(例如， 或 的 srccode> 元素)，除非您在配置 Workbox 时采取特定步骤，否则可能导致错误的服务行为.

There are a few wrinkles in how some browsers request media assets (e.g., the src of a <video> or <audio> element) that can lead to incorrect serving behavior unless you take specific steps when configuring Workbox.

在此 GitHub 问题讨论中提供了完整的详细信息；要点总结如下:

Full details are available in this GitHub issue discussion; a summary of the important points is:

• 必须告知 Workbox 尊重 范围请求标头 通过添加 workbox-range-requests 插件 到用作处理程序的策略.

• Workbox must be told to respect Range request headers by adding in the workbox-range-requests plugin to the strategy used as the handler.

音频或视频元素需要使用 crossOrigin 属性，例如通过 .

The audio or video element needs to opt-in to CORS mode using the crossOrigin attribute, e.g. via .

如果您想从缓存中提供媒体服务，您应该提前将其显式添加到缓存中.这可以通过预缓存发生，也可以通过直接调用 cache.add() 发生.使用运行时缓存策略将媒体文件隐式添加到缓存中不太可能奏效，因为在运行时，只有部分内容是通过 Range 请求从网络获取的.

If you want to serve the media from the cache, you should explicitly add it to the cache ahead of time. This could happen either via precaching, or via calling cache.add() directly. Using a runtime caching strategy to add the media file to the cache implicitly is not likely to work, since at runtime, only partial content is fetched from the network via a Range request.

综上所述，以下是使用 Workbox 提供缓存媒体内容的一种方法示例:

Putting this all together, here's an example of one approach to serving cached media content using Workbox:

<!-- In your page: -->
<!-- You currently need to set crossOrigin even for same-origin URLs! -->
<video src="movie.mp4" crossOrigin="anonymous"></video>

// In your service worker:
// It's up to you to either precache or explicitly call cache.add('movie.mp4')
// to populate the cache.
//
// This route will go against the network if there isn't a cache match,
// but it won't populate the cache at runtime.
// If there is a cache match, then it will properly serve partial responses.
workbox.routing.registerRoute(
  /.*\.mp4/,
  new workbox.strategies.CacheFirst({
    cacheName: 'your-cache-name-here',
    plugins: [
      new workbox.cacheableResponse.Plugin({statuses: [200]}),
      new workbox.rangeRequests.Plugin(),
    ],
  }),
);

如果您打算预缓存媒体文件，那么您需要采取额外的步骤来明确路由内容，以便从预缓存中读取它们，因为标准的预缓存响应处理程序不会使用范围请求插件:

If you plan on precaching the media files, then you need to take an extra step to explicitly route things so that they're read from the precache, since the standard precache response handler won't use the range request plugins:

workbox.routing.registerRoute(
  /.*\.mp4/,
  new workbox.strategies.CacheOnly({
    cacheName: workbox.core.cacheNames.precache,
    plugins: [
      new workbox.rangeRequests.Plugin(),
    ],
    // This is needed since precached resources may
    // have a ?_WB_REVISION=... URL param.
    matchOptions: {
      ignoreSearch: true,
    }
  }),
);

// List this *after* the preceding runtime caching route.
workbox.precaching.precacheAndRoute([...]);

这篇关于当 mp3 被 Workbox 缓存时，无法擦洗/滚动 jPlayer 音频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！