前言
近年来，前端技术飞速发展，各种框架和工具层出不穷，其中 React 作为一种流行的 JavaScript 库，帮助开发者更轻松地构建复杂的 UI 界面。而其中的 npm 包，更是给我们带来无限可能，react-jplayer-ll 就是其中一种应用。
安装
首先，在你的项目工程目录下使用 npm 命令来安装 react-jplayer-ll：
npm install react-jplayer-ll --save
然后，在你的文件头中导入 react-jplayer-ll：
import ReactJPlayer from 'react-jplayer-ll';
基础使用
当 npm 包 react-jplayer-ll 被安装并导入后，你可以在组件中使用它：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------ ---- -------------------
----- ----------- ------- --------- -
-------- -
------ -
------------- --
--
-
-
------ ------- ------------这是 react-jplayer-ll 的最基本用法，它会渲染出一个默认的播放器，但是它并不是我们想要达到的效果。下面，我们将使用更多高级功能。
自定义皮肤
react-jplayer-ll 提供了多种选项来自定义皮肤以及音频控件样式。要创建一个自定义控件，需要按照以下步骤：
- 创建一个对象，指定你的皮肤的所有配置信息。
const customTheme = {
cssSelectorAncestor: '.jp_container',
play: '.my-class-play',
pause: '.my-class-pause',
...
}- 将对象传递给
<ReactJPlayer />组件中的theme属性。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------------ ---- -------------------
----- ----------- - -
-------------------- ----------------
----- -----------------
------ ------------------
---
-
----- ----------- ------- --------- -
-------- -
------ -
------------- ------------------- --
--
-
-
------ ------- ------------自定义播放列表
react-jplayer-ll 还支持通过配置选项自定义播放列表，不过这需要使用 react-jPlaylist 插件。
首先，在你的项目目录下使用 npm 命令来安装 react-jPlaylist：
npm install react-jplaylist --save
然后，在你的文件头中导入 react-jPlaylist：
import ReactJPlayer, { jPlayList } from 'react-jplayer-ll';最后，创建一个基于哪种结构的播放列表将被创建，类型是 Plain。
-- -------------------- ---- -------
----- ----------------- - -
---------------- -
--------------------- -----
--
----- -
------ -------
------- ------
--
------------------ -----
--------- ------
--------------- --- ---------
---------------- --- ---------
--
----- --------- - -
--- ----------
----------- -----
-------------- -----
---------------- -
--------- ----
--
--------------------
-
----- -------- - -
-
------- -----
------ ----- -------
---- ----------
-
--
----- ----------- ------- --------- -
-------- -
------ -
------------- ------------ ------------------- --------------------
---------------- --
--------------------- --
--------------- --
------------------ --
------------------- --
-------------------- --
---------------
--
-
-
------ ------- ------------结束语
通过使用 react-jplayer-ll 和 react-jPlaylist，你可以轻松地构建出一个高度自定义的音频播放器。当然，这只是它的一部分功能，你还可以通过查看官方 API，来获取更多关于使用 react-jplayer-ll 的详细信息和深度指导。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055ff081e8991b448ddb0f