#Play-its HTML Soundboard
Play-its is a custom jQuery-ui widget that enables you to build your own web-based soundboard. Your favourite tracks at your fingertips!
Check out a demo at https://selamanse.github.io/playits
Play-its can be configured with ogg and m4a soundfiles which allows for support for different browsers.
Import Play-its and its dependencies in your html file.
<head>
...
<link rel="stylesheet" href="vendor/jquery-ui.css" />
<script type="text/javascript" src="vendor/jquery.js"></script>
<script type="text/javascript" src="vendor/jquery-ui.js"></script>
<script type="text/javascript" src="vendor/jquery-rotate.js"></script>
<script type="text/javascript" src="js/jquery-playit.js"></script>
...
</head>To add a sound you need to create a new jQuery element, call the playit function and supply the desired values of the sound to play.
$("<div>").playit({
sourcemp4: "sounds/applause.m4a",
sourceogg: "sounds/applause.ogg",
description: "A group of people applauding."
});Please see: index.html and js/script.js for a full example.
The showcase soundboard uses images from Sketchy-Icons Collection by AzureSol