The audio library based on jquery and bootstrap.
<link href=".../bootstrap.min.css" type="text/css" rel="stylesheet">
<link href=".../leo-audio.min.css" type="text/css" rel="stylesheet"/>
<script src=".../jquery.min.js"></script>
<script src=".../bootstrap.min.js"></script>
<script src=".../leo-audio.min.js"></script>
<audio src="./last_summer.mp3" id="audioTest" preload="auto" loop></audio>
<div id="leo-audio" class="container"></div>
<script>
$("#leo-audio").leoAudio("#audioTest", {
name : "last_summer",
pointer: [
{
name: 'first pointer',
time: 60,
},
{
name: 'second pointer',
time: 111,
},
{
name: 'third pointer',
time: 149,
},
{
name: 'fourth pointer',
time: 192,
},
]
});
</script>
You can configure all of these
name : "Unknown-Audio",
volume : 0.5,
pointer : false,
theme : {
bgColor : "#ffffff",
btnColor : "#888888",
progressColor : {
start : "#47CFFF",
end : "#1D81E4",
bar : "#1D81E4",
cursor : "#1d83ec",
pointer : "orangered",
bg : "f5f5f5"
},
volumeColor : {
start : "#47CFFF",
end : "#1D81E4",
cursor : "#1d83ec",
pointer : "#1D81E4",
bg : "#f5f5f5"
},
rateColor : {
bg : "white",
font: "black",
border: "#888888"
}
}