网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
Fraudio是一个轻量级、简洁的、响应迅速的自定义jQuery音频播放器插件,可与音频标签一起工作,并支持任何HTML5音频格式:ogg、mp3、wav。
Chrome, IE8+, FireFox, Opera, Safari
1.在html页面中加载最新jQuery库和jQuery Fraudio插件文件。
<link href="build/fraudio.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
<script src="build/fraudio.min.js"></script>
2. 将CSS类fraudio添加到audio标签上,并在data属性中定义audio title&artist。
<audio class="fraudio"
data-title="帝国模板之家"
data-artist="http://www.moyouyouw.cn">
<source src="sample.ogg" type="audio/ogg">
<source src="sample.mp3" type="audio/mpeg">
</audio>
<!-- OR -->
<audio class="fraudio"
src="sample.mp3"
data-title="帝国模板之家"
data-artist="http://www.moyouyouw.cn">
</audio>
3.要自定义播放器样式,请重写和修改_变量.scss然后从scss文件生成格式化的CSS样式。
$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
转载请注明来源:jQuery音频播放器插件(Fraudio)
本文永久链接地址:https://www.moyouyouw.cn/code/966.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论