multiple-audio-player-plugin/player.min.js

multiple circular html5 audio player, using svg

!function(t,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e:t.lunar=e()}(this,function(){"use strict";var t={};return t.hasClass=function(t,e){return new RegExp("(\\s|^)"+e+"(\\s|$)").test(t.attr("class"))},t.addClass=function(e,s){!t.hasClass(e,s)&&e.attr("class",(e.getAttribute("class")?e.getAttribute("class")+" ":"")+s)},t.removeClass=function(e,s){var a=e.attr("class").replace(new RegExp("(\\s|^)"+s+"(\\s|$)","g"),"$2");t.hasClass(e,s)&&e.attr("class",a)},t.toggleClass=function(e,s){t[t.hasClass(e,s)?"removeClass":"addClass"](e,s)},t.className=function(t,e){t.attr("class",e),console.log("className",t)},t}),function(t){var e={cursorPoint:function(t,s){e.settings.pt.x=t.clientX,e.settings.pt.y=t.clientY;var a=s.find("svg").attr("id");return a=document.getElementById(a),e.settings.pt.matrixTransform(a.getScreenCTM().inverse())},angle:function(t,e){var s=e-50,a=t-50,r=Math.atan2(s,a);return r*=180/Math.PI,r+=90,0>r&&(r=360+r),r},setGraphValue:function(s,a,r){var n=r.find(e.settings.audioObj),i=e.settings.pc,o=i-parseFloat(a/n[0].duration*i,10);t(s).css("strokeDashoffset",o),0===a&&(t(s).addClass(s,"done"),s===t(e.settings.progress)&&t(s).attr("class","ended"))},reportPosition:function(t,s){var a=t.find(e.settings.progress);t.find(e.settings.audioObj);e.setGraphValue(a,s.currentTime,t)},stopAllSounds:function(){document.addEventListener("play",function(e){for(var s=document.getElementsByTagName("audio"),a=0,r=s.length;r>a;a++)s[a]!=e.target&&s[a].pause(),s[a]!=e.target&&t(s[a]).parent("div").find(".playing").attr("class","paused")},!0)},settings:{},init:function(s){var a=['<svg viewBox="0 0 100 100" id="playable" version="1.1" xmlns="http://www.w3.org/2000/svg" width="34" height="34" data-play="playable" class="not-started playable">','<g class="shape">','<circle class="progress-track" cx="50" cy="50" r="47.45" stroke="#becce1" stroke-opacity="0.25" stroke-linecap="round" fill="none" stroke-width="5"/>','<circle class="precache-bar" cx="50" cy="50" r="47.45" stroke="#302F32" stroke-opacity="0.25" stroke-linecap="round" fill="none" stroke-width="5" transform="rotate(-90 50 50)"/>','<circle class="progress-bar" cx="50" cy="50" r="47.45" stroke="#009EF8" stroke-opacity="1" stroke-linecap="round" fill="none" stroke-width="5" transform="rotate(-90 50 50)"/>',"</g>",'<circle class="controls" cx="50" cy="50" r="45" stroke="none" fill="#000000" opacity="0.0" pointer-events="all"/>','<g class="control pause">','<line x1="40" y1="35" x2="40" y2="65" stroke="#000000" fill="none" stroke-width="8" stroke-linecap="round"/>','<line x1="60" y1="35" x2="60" y2="65" stroke="#000000" fill="none" stroke-width="8" stroke-linecap="round"/>',"</g>",'<g class="control play">','<polygon points="45,35 65,50 45,65" fill="#009EF8" stroke-width="0"></polygon>',"</g>",'<g class="control stop">','<rect x="35" y="35" width="30" height="30" stroke="#000000" fill="none" stroke-width="1"/>',"</g>","</svg>"];a=a.join(" "),t.each(this,function(e,s){var r=t(this).find("audio");r.attr("id","audio"+e),a=a.replace('width="34"','width="'+r.data("size")+'"'),a=a.replace('height="34"','height="'+r.data("size")+'"'),a=a.replace('id="playable"','id="playable'+e+'"'),t(this).append(a)});var r=t(this).find("svg").attr("id");r=document.getElementById(r),e.defaults={"this":this,thisSelector:this.selector.toString(),playObj:"playable",progress:".progress-bar",precache:".precache-bar",audioObj:"audio",controlsObj:".controls",pt:r.createSVGPoint(),pc:298.1371428256714},lunar={},e.settings=t.extend({},e.defaults,s),t(e.settings.controlsObj).on("click",function(s){var a=t(s.currentTarget).closest(t(e.settings.thisSelector)),r={el:a,activeAudio:a.find(e.settings.audioObj),playObj:a.find("[data-play]"),precache:a.find(e.settings.precache)};switch(r["class"]=r.playObj.attr("class"),r["class"].replace("playable","").trim()){case"not-started":e.stopAllSounds(),r.activeAudio[0].play();var n=document.getElementById(r.activeAudio.attr("id"));n.addEventListener("timeupdate",function(t){e.reportPosition(a,n)}),r.playObj.attr("class","playing");break;case"playing":r.playObj.attr("class","playable paused"),r.activeAudio[0].pause(),t(n).off("timeupdate");break;case"paused":r.playObj.attr("class","playable playing"),r.activeAudio[0].play();break;case"ended":r.playObj.attr("class","not-started playable"),r.activeAudio.off("timeupdate",e.reportPosition)}}),t(e.defaults.audioObj).on("progress",function(s){if(this.buffered.length>0){var a=this.buffered.end(this.buffered.length-1),r=t(s.currentTarget).parent().find(e.settings.precache),n=t(this).closest(t(e.settings.thisSelector));e.setGraphValue(r,a,n)}})}};t.fn.mediaPlayer=function(s){return e[s]?e[s].apply(this,Array.prototype.slice.call(arguments,1)):"object"!=typeof s&&s?void t.error("Method "+s+" does not exist on jQuery.mediaPlayer"):e.init.apply(this,arguments)}}(jQuery);