reaudio

reaudio

一个简单，可配置的HTML5音频组件，用于React。

特征：

• 没有依赖性
• 处理多个玩家（例如，播放列表）
• 一次只支持一个球员
• 图像支持
• 最小风格
• 易于自定义
• 完全响应

安装和用法

手动（最适合自定义）：

如果您想进行大量自定义，请从GitHub存储库中复制reaudio组件文件夹，并将其包含在项目中。

包括组件：

reaudio / reaudio \’
import \’./component–folder/ reaudio /assets/styles.css\’\”>

 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

在您的项目中包括模块和基本样式：

reaudio \’
import \’ reaudio /build/index.css\’\”>

 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组件：

reaudio</h1>
< reaudio playlist={playlist} />
</div>
)
}

export default App\”>

 function App ( ) {
    return (
        < div className = \"App\" >
            < h1 > reaudio </ h1 >
            < reaudio playlist = { playlist } />
        </ div >
    )
}

export default App 

Donezos！

在引擎盖下

< reaudio />组件根据提供的播放列表数组中的歌曲 /曲目数量调用任意数量的<Player />组件。

每个<Player />组件都包含一个可自定义的HTML5音频播放器。

定制

如上所述，自定义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道具。

玩家道具

此外，可以通过道具分配任何可接受的HTML5 <audio>属性。

音频来源

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将它们组合到单个播放列表中，但是您需要将下一个/上一个播放逻辑添加到应用程序中。

事件

<Player>组件包括当前播放<audio>元素的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变得更好。