Simple Responsive HTML5 Audio Player - jQuery Fraudio
File Size: | 567 KB |
---|---|
Views Total: | 7065 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fraudio is a minimal, clean, responsive, custom audio player plugin which works with audio
tag and supports any HTML5 audio formats: ogg, mp3, wav.
How to use it:
1. Add jQuery library and the minified version of the jQuery Fraudio plugin to the html page.
<link href="build/fraudio.min.css" rel="stylesheet"> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"> </script> <script src="build/fraudio.min.js"></script>
2. Add the CSS class fraudio
to the audio
tag and define the audio title & artist in the data
attributes. That's it.
<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. To create your own player styles, override and modify the variables in the _variables.scss
and then generates formatted CSS styles from the scss
file.
$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
Changelog:
2021-01-01
- Adjusting css and js so that fraudios without titles or artists still show correctly.
- Centering play button a little better.
This awesome jQuery plugin is developed by freddyouellette. For more Advanced Usages, please check the demo page or visit the official website.