前言
PWA（Progressive Web App）是一种新兴的 Web 应用，它结合了 Web 应用和原生应用的优势，具有离线访问、推送通知、桌面图标等特性，使得 Web 应用在用户体验上更加接近原生应用。然而，在 PWA 应用中，音频和视频播放仍然存在问题，本文将介绍 PWA 应用中音频和视频播放问题的解决方式。
问题
在 PWA 应用中，音频和视频播放存在以下问题：
- 无法在后台播放
- 无法显示媒体控制器
- 无法通过桌面图标启动应用时自动播放
这些问题都是因为 PWA 应用被视为 Web 页面，而不是原生应用，因此无法像原生应用一样处理媒体播放。
解决方式
使用 Web Audio API
Web Audio API 是 W3C 推出的 Web 音频 API，它可以在 Web 中处理音频信号，包括音频播放、音频合成、音频处理等功能。Web Audio API 可以在后台播放音频，并且可以自定义媒体控制器，因此可以解决上述问题。
以下是使用 Web Audio API 实现音频播放的示例代码：
const audioContext = new AudioContext();
const audioElement = document.querySelector('audio');
const source = audioContext.createMediaElementSource(audioElement);
source.connect(audioContext.destination);
audioElement.play();在这个示例中，我们首先创建了一个 AudioContext 对象，然后获取了一个 audio 元素，并将其转换为 MediaElementSource 对象，接着将其连接到 AudioContext 的 destination 上，最后调用 audioElement 的 play() 方法播放音频。
使用 Web Audio API 可以解决音频播放的问题，但是无法解决视频播放的问题。因此，我们需要另外一种解决方式。
使用 WebRTC
WebRTC 是 W3C 推出的 Web 实时通信 API，它可以在 Web 中实现实时通信，包括音视频通信。我们可以使用 WebRTC 实现视频播放，同时解决上述问题。
以下是使用 WebRTC 实现视频播放的示例代码：
-- -------------------- ---- -------
----- ------------ - --------------------------------
----- ----------- - - ------ ------ ------ ---- --
------------------------------------------------
------------ -- -
---------------------- - -------
--------------------
--
------------ -- -
---------------------
---在这个示例中，我们首先获取了一个 video 元素，并使用 getUserMedia 方法获取了一个包含视频流的 MediaStream 对象，接着将其赋值给 videoElement 的 srcObject 属性，最后调用 videoElement 的 play() 方法播放视频。
使用 WebRTC 可以解决视频播放的问题，并且可以在后台播放视频，但是无法自定义媒体控制器。因此，我们需要另外一种解决方式。
使用 Media Session API
Media Session API 是 W3C 推出的 Web 媒体会话 API，它可以在 Web 中自定义媒体控制器，包括播放、暂停、上一曲、下一曲等功能。我们可以使用 Media Session API 自定义媒体控制器，解决上述问题。
以下是使用 Media Session API 自定义媒体控制器的示例代码：
-- -------------------- ---- ------- ------------------------------- - --- --------------- ------ -------- ------- --------- ------ -------- -------- -- ---- ------------ ------ ---------- ----- ----------- -- --- ----------------------------------------------- -- -- - -- ---- ----- --- ------------------------------------------------ -- -- - -- ----- ----- --- -------------------------------------------------------- -- -- - -- ---- -------- ----- --- ---------------------------------------------------- -- -- - -- ---- ---- ----- ---
在这个示例中，我们首先创建了一个 MediaMetadata 对象，包含了音频或视频的标题、艺术家、专辑和封面图等信息，然后使用 setActionHandler 方法定义了媒体控制器的动作，包括播放、暂停、上一曲、下一曲等功能。
使用 Media Session API 可以自定义媒体控制器，解决上述问题，但是无法在桌面图标启动应用时自动播放音频或视频。因此，我们需要另外一种解决方式。
使用 Autoplay Policy
Autoplay Policy 是 Chrome 66 推出的自动播放策略，它可以在 Web 中控制自动播放，包括音频和视频。我们可以使用 Autoplay Policy 在桌面图标启动应用时自动播放音频或视频。
以下是使用 Autoplay Policy 自动播放音频或视频的示例代码：
-- -------------------- ---- -------
----- ------------ - --------------------------------
----- ------------ - --------------------------------
--------------------------------------------- -- -- -
-- -------------------------------------- --- --- -
----- ------- - --- ---------------
----- ---------- - ---------------------------
--------------- - -------
----------------------------------------
-------------------
-------------------
-
---
---------------------------------- -- -- -
-- --------------------- -
--------------------
-
-- --------------------- -
--------------------
-
---在这个示例中，我们首先在 DOMContentLoaded 事件中创建了一个 AudioContext 对象，并使用 createOscillator 方法创建了一个 OscillatorNode 对象，然后将其连接到 AudioContext 的 destination 上，接着调用 start() 方法开始播放音频，最后调用 stop() 方法停止播放音频。这个操作会触发 Autoplay Policy，使得应用可以在桌面图标启动时自动播放音频或视频。
使用 Autoplay Policy 可以在桌面图标启动应用时自动播放音频或视频，但是需要注意 Autoplay Policy 的限制，需要用户手动触发播放操作。
结论
在 PWA 应用中，音频和视频播放存在问题，但是可以通过使用 Web Audio API、WebRTC、Media Session API 和 Autoplay Policy 等技术解决这些问题。使用这些技术可以提高 PWA 应用的用户体验，并且使得 PWA 应用更加接近原生应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6724b4542e7021665e150e07