reaudio
一个简单，可配置的HTML5音频组件，用于React。
特征：
- 没有依赖性
- 处理多个玩家（例如，播放列表）
- 一次只支持一个球员
- 图像支持
- 最小风格
- 易于自定义
- 完全响应
安装和用法
手动（最适合自定义）：
如果您想进行大量自定义，请从GitHub存储库中复制reaudio组件文件夹，并将其包含在项目中。
包括组件：
import React from 'react'
import reaudio from './component-folder/ reaudio / reaudio '
import './component-folder/ reaudio /assets/styles.css'
如果您使用SCSS，也有一个styles.scss文件。确保在您的项目中安装node-sass以进行使用。
它具有入门所需的一切...您只需要提供播放列表阵列即可。
作为模块
作为带有纱线的模块：
yarn add reaudio作为NPM的模块：
npm i -s reaudio在您的项目中包括模块和基本样式：
import React from 'react'
import reaudio from ' reaudio '
import ' reaudio /build/index.css'
另外，如果您使用SASS/SCSS，则可以将基本SCSS样式复制到项目中。
带有多个玩家的屏幕截图：
用法
提供播放列表阵列（必需）：
reaudio期望歌曲/曲目对象播放列表：
const playlist = [
{
id : '1' ,
source : 'https://studi*o**.bio/reaudio/iiwii.mp3' ,
trackName : 'IIWII' ,
trackArtist : 'Joshua Iz' ,
trackImage : 'https://stud*i**o.bio/reaudio/images/VIZLP1.jpg' ,
loop : true
} ,
{
id : '2' ,
source : [
'https://st***udio.bio/reaudio/Rafael.aif' ,
'https://*s*tudio.*bio/reaudio/Rafael.mp3'
] ,
trackName : 'Rafael' ,
trackArtist : 'Joshua Iz' ,
} ,
{
id : '3' ,
source : 'https://s**tudio*.bio/reaudio/Voyager_1.mp3' ,
trackName : 'Voyager 1' ,
trackArtist : 'Joshua Iz' ,
}
]要测试reaudio ，请复制此播放列表代码并将其放入调用reaudio组件中。
包括带有playlist道具的reaudio组件：
function App ( ) { return ( < div className = "App" > < h1 > reaudio h1 > < reaudio playlist = { playlist } /> div > ) } export default App
Donezos！
在引擎盖下
< reaudio />组件根据提供的播放列表数组中的歌曲 /曲目数量调用任意数量的
每个
定制
如上所述，自定义reaudio的最佳方法是在您的项目中手动包含reaudio组件文件夹。
这是reaudio播放器的基本结构：
< div className = "player" >
< audio >
< source src = { src } />
audio >
< div className = "controls" >
< Pause /> // will toggle with Play button
< Play />
< TrackInfo /> // artist, name, image, etc.
< Bar /> // progress bar; total time
div >
div >所有包括控件在内的元素都可以通过道具或CSS到处移动或隐藏，从而可以想象到任何类型的玩家。
reaudio道具
reaudio工作需要playlist道具。
| 支柱 | 值 | 类型 | 默认 |
|---|---|---|---|
| 播放列表 | 对象数组 | 大批 | [] |
玩家道具
| 道具 | 值 | 类型 | 默认 |
|---|---|---|---|
| 来源 | url;本地URL；大批 | 细绳 | '' |
| 跟踪名称 | 任何 | 细绳 | '' |
| 跟踪者 | 任何 | 细绳 | '' |
| 刻度图 | url;本地URL | 细绳 | '' |
| 环形 | 真的;错误的 | 布尔 | 错误的 |
| 预付 | 没有任何;元数据；汽车 | 细绳 | 汽车 |
此外，可以通过道具分配任何可接受的HTML5 属性。
音频来源
source说明可以采用单个URL字符串值或一系列声源，可用于为某些浏览器提供后备。
单源示例：
source : 'https://*s*tudio.*bio/reaudio/Rafael.mp3' ,多个源示例（数组）：
source : [
'https://st***udio.bio/reaudio/Rafael.aif' ,
'https://*s*tudio.*bio/reaudio/Rafael.mp3'
] ,根据HTML5音频规范，浏览器将使用它可以解析的第一种格式，因此首先在源数组中提供最高质量的文件。
reaudio可以接受HTML5音频接受的任何音频格式。请参阅MDN上的音频格式文档。
请注意，有些浏览器可以播放其他格式，例如链接的MDN文档中未包含的.aif 。
图像
trackImage道具提供了播放器中封面艺术或其他图像的显示。您可以将完整的URL用于图像文件或项目中的本地URL。
不需要图像。
多个玩家
< reaudio />组件将输出与playlist数组中有轨道对象一样多的单个播放器。
内置的reaudio是只能一次玩一个球员的能力，因此当玩家在比赛时，所有其他玩家都会暂停。甜度。
您可以通过CSS/SCS将它们组合到单个播放列表中，但是您需要将下一个/上一个播放逻辑添加到应用程序中。
事件
元素的useRef()钩子的ref ，您可以使用该钩子来编程控制或响应任何事件。
请参阅HTML5音频事件的完整列表。
例子：
const audioRef = useRef ( )
useEffect ( ( ) => {
const audio = audioRef . current
const setAudioData = ( ) => {
setDuration ( audio . duration )
setCurTime ( audio . currentTime )
}
const setAudioTime = ( ) => setCurTime ( audio . currentTime )
// DOM listeners: update React state on DOM events
audio . addEventListener ( 'loadeddata' , setAudioData )
audio . addEventListener ( 'timeupdate' , setAudioTime )
// ...more stuff here
return ( ) => {
audio . removeEventListener ( 'loadeddata' , setAudioData )
audio . removeEventListener ( 'timeupdate' , setAudioTime )
}
} )有关完整代码，请参见reaudio文件夹中的Player.js 。
贡献
我们欢迎PR，问题和贡献使reaudio变得更好。