背景
在前端开发过程中，我们经常需要用到一些音乐、视频等媒体文件。而在使用 React 进行开发时，我们可以借助很多相应的库来方便我们进行媒体文件的管理与播放。在其中，react-howler-fixed 是一款非常实用的 npm 包，它是一个基于 React 封装的音频播放组件。
安装
使用 npm 安装：
npm install --save react-howler-fixed
或使用 yarn 安装：
yarn add react-howler-fixed
如何使用
Hello, World！
在你的项目中引入 react-howler-fixed：
-- -------------------- ---- -------
------ ----------- ---- ---------------------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ -
------------
-----------------------
--------------
--
--
-
-这里 src 表示音频文件的地址，playing 表示是否自动播放。
高级用法
Props
ReactHowler 支持需要配置的 props 有：
src：音频文件的地址。这里还支持传入一个数组，表示同一个音频的多个地址，浏览器会自动匹配支持的格式进行播放。如：
<ReactHowler
src={[
'/audio/sample.mp3',
'/audio/sample.ogg',
'/audio/sample.wav'
]}
playing={true}
/>playing：是否自动播放。默认为false。loop：是否循环播放。默认为false。mute：是否静音。默认为false。preload：是否进行预加载。默认为true。volume：音量大小。默认为1.0。onLoad：音频文件加载完成时的回调函数。onPlay：音频播放时的回调函数。onPause：音频暂停时的回调函数。onEnd：音频播放完成时的回调函数。onSeek：拖动进度条时的回调函数。html5：针对某些浏览器进行调整，以实现更好的兼容性。
方法
ReactHowler 也提供了一些方法，方便我们对音频进行进一步控制：
duration()：获取音频总时长，返回一个时间（以秒为单位）。seek(time)：设置当前播放时间，参数time为时间（以秒为单位）。play()：播放音频。pause()：暂停音频。
下面给出一个示例，演示如何使用 ReactHowler 实现一个简单的音频播放器，并且可以进行进度条的拖拽。
-- -------------------- ---- -------
------ ----------- ---- ---------------------
------ ------ - --------- - ---- --------
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
-------- ------
------- ------
--------- --
----- -
--
----------------- - -----------------------------
--------------- - ---------------------------
--------------- - ---------------------------
---------------- - ----------------------------
-------------- - --------------------------
--------------- - ---------------------------
-
-------------- -
---------------
-------- -------------------
---
-
------------ -
---------------
------- -----
--------- ----------------------
---
-
------------ -
---------------
-------- ----
---
-
------------- -
---------------
-------- -----
---
-
----------- -
---------------
-------- ------
----- -
---
-
------------- -
---------------
----- --------------------------
---
---------------------------------------------
-
-------- -
------ -
---- -------------------------
------------
--------------------
----------------------------
------------------------
------------------------
--------------------------
----------------------
------------------------
--------------------- -- ------
--------------------- -- ------
--------------------------- -- ------
------------------------- -- ----
------------
---------- -- ------------ - -----
--
---- ---------------------------
------- ----------------------------
------------------- - ------- - -------
---------
------
------------
-------
-------------------------
----------
-----------------------
--------------------------
--
------
------
--
-
-
------ ------- ------------总结
ReactHowler 是一个非常方便的音频播放器组件，在 React 项目中使用它可以让音频的管理和播放变得非常简单。在本文中，我们介绍了如何使用 ReactHowler，以及它的基本使用、高级用法和一些进一步的方法和回调函数。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590a81e8991b448d6747