Fraudio是一个最小、干净、响应迅速的自定义音频播放器插件，可与音频标记并支持任何HTML5音频格式：ogg、mp3、wav。

如何使用它:

1.将jQuery库和jQuery Fraudio插件的缩小版添加到html页面。

<link href="/dist//fraudio.min.css" rel="stylesheet">
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/dist/fraudio.min.js"></script>

2.添加CSS类欺诈到音频在中标记并定义音频标题和艺术家数据属性。就是这样。

<audio class="fraudio"
       data-title="Audio Player"
       data-artist="jQuery Script">
       <source src="sample.ogg" type="audio/ogg">
       <source src="sample.mp3" type="audio/mpeg">
</audio>
 
<!-- OR -->
<audio class="fraudio"
       src="sample.mp3"
       data-title="Audio Player"
       data-artist="jQuery Script">
</audio>

3.要创建自己的玩家风格，请覆盖并修改_变量.scss然后从南海文件

$fraudio-background-color: #222 !default;
$fraudio-progress-color: rgb(60, 0, 60) !default;
$fraudio-progress-line-color: #bbb !default;
$fraudio-play-button-color: #aaa !default;
$fraudio-title-color: #aaa !default;
$fraudio-artist-color: #bbb !default;

sass fraudio.scss fraudio.css

更新日志：

2023-04-4

• v2.3.2版本

2021-01-01

• 调整css和js，使没有标题或艺术家的fraudios仍然可以正确显示。
• 居中播放按钮稍微好一点。

预览截图

简单响应式HTML5音频播放器 jQuery Fraudio