受够了不知道媒体是否正在播放的痛苦吗？那么，这个 npm 包可以帮到你！is-media-playing 可以帮助你检测平台上的媒体文件是否正在播放。
在应用中安装 is-media-playing
要开始使用 is-media-playing，首先需要在你的应用中安装它。一个普通的 npm 安装命令就可以了：
npm install is-media-playing
或者你也可以使用 yarn 安装：
yarn add is-media-playing
如何使用 is-media-playing
is-media-playing 是一个使用简单的 npm 包。为了使用它，你需要使用一个 Media API 中的媒体元素（audio/video）。我们来看一个最简单的示例，如下所示：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ -------------- ---- -------------------
------ ------- -------- ----- -
----- ----------- ------------- - ----------------
----- ------------- - -- -- -
--------------------------------------------------------------
--
------ -
-----
------ ----------------------- ----------------------------------
------------- - ------ - ----------
------
--
-在这个例子中，我们首先引入了 is-media-playing。然后，我们创建了一个 useState 钩子，这个钩子表示是否正在播放。我们使用了一个叫做 handlePlaying 的函数，并在这里使用 is-media-playing 在媒体元素上调用。如果媒体元素正在播放，它会设置 isPlaying 变量为 true。然后，在 JSX 中，我们显示一个文本行，显示我们的 “正在播放” 或 “未播放” 可选项。
检测浏览器兼容性
然而，is-media-playing 只能在現代瀏覽器上运行。因此，在使用它之前，我们需要检查它是否在现代浏览器上运行。我们可以使用以下代码来检测它是否能够在浏览器中实现：
-- -------------------- ---- ------- ----- ------------------ - -- -- - -- ------- ---------------- --- ------------ - ------ ------ - -- ------- ------------------------------- --- ------------ - ------ ------ - ------ ----- -- -- ---------------------- - -- ------------ - ---- - ------------------------ -
我们只需要调用 checkCompatibility() 函数来检查是否允许现代浏览器运行 is-media-playing，如果是，我们可以继续使用它，否则就需要找到其它的解决方案。
注意事项
在使用 is-media-playing 时，请注意以下事项：
- 确保你已经导入 Media API 中的媒体格式（audio/video）。
- 它只能检测到一个媒体元素的播放状态，不可以检查视频是否在其他选项卡中播放。
结论
is-media-playing 是一个易于使用的 npm 包，它可以轻松地检测媒体是否正在播放。只需安装 is-media-playing、使用 Media API 中的媒体元素（audio/video），并调用它来更新播放状态。不过需要注意，is-media-playing 只能在现代浏览器上使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d59