{"name":"One Button Audio","key":"OneButtonAudio","version":"1.0.7","instructions":"A One Button Audio player","showatto":"0","showplayers":"1","requirecss":"","requirejs":"","shim":"","defaults":"size=80,progress=007E88,background=333,font=fff,","amd":"1","body":"<audio id=\"@@AUTOID@@_audio\" controlList=\"noDownload\" class=\"poodll_onebuttonaudio nomediaplugin hide\" src=\"@@VIDEOURL@@\"></audio>\n<div id='@@AUTOID@@_container' class=\"poodll_onebuttonaudio_container\" style=\"width: @@size@@px; height: @@size@@px\">\n<canvas id=\"@@AUTOID@@_canvas\" width=\"@@size@@\" height=\"@@size@@\" style=\"margin: 0 auto;\"></canvas>\n\t<button type=\"button\" id='@@AUTOID@@_button' class=\"poodll_onebuttonaudio_button\" ><i class=\"fa fa-play\" aria-hidden=\"true\"></i></button>\n</div>","bodyend":"","script":"var player = $('#' + @@AUTOID@@ + '_audio'); \nvar button= $('#' + @@AUTOID@@ + '_button'); \nvar width =@@size@@;\nvar height =@@size@@;\nvar playing=false;\nvar canvas = document.getElementById(@@AUTOID@@ + '_canvas');\ncanvas.width=width;\ncanvas.height=height;\nvar context = canvas.getContext('2d');\nvar x = width / 2; \nvar y = height / 2;\nvar radius = width * 0.35;\nvar endPercent = 100;\nvar curPerc = 0;\nvar counterClockwise = false;\nvar circ = Math.PI * 2;\nvar quart = Math.PI / 2;\n\n//set icon size\nvar fontsize = @@size@@ > 50 ? 20 : 10;\n$( '#' + @@AUTOID@@ + '_button .fa' ).css( \"font-size\",fontsize+'px' );\n\n//set up drawing\nif(width>60){\n context.lineWidth = 10;\n}else{\n context.lineWidth = 5;\n}\ncontext.strokeStyle = '#' + @@progress@@;\ncontext.shadowOffsetX = 0;\ncontext.shadowOffsetY = 0;\ncontext.shadowBlur = 10;\n//context.shadowColor = '#fff';\n\n//to fetch current % of playback\nvar fetchCurrent= function(){\n    var currentTime = player.prop('currentTime');\n    var duration = player.prop('duration');\n    var current = currentTime/duration;\n    return current;\n}\n\nvar clear = function(){\n context.clearRect(0, 0, canvas.width, canvas.height);\n};\n\n//recursive draw arc\nvar draw = function() {\n if(!playing){return;}\n context.beginPath();\n context.arc(x, y, radius, -(quart), ((circ) * fetchCurrent()) - quart, false);\n context.stroke();\n  \t var drawFrame = requestAnimationFrame(draw);\n}\n\nvar doPlay = function(){\n  player.get(0).load();\n  var pp = player.get(0).play();\n  if(pp !== 'undefined'){\n   pp.then(function(){\n     playing=true;\n     draw();\n}).catch(function(e){\n       //do nothing\n    });//end of then catch\n}else{\n  playing=true;\n  draw();  \n}//endof if pp\n};//end of doplay\n\n\n//add button events\nbutton.click(function(){\nif($(this).hasClass('playing')){\n\t$(this).removeClass('playing');\n\t$(this).empty();\n\t$(this).append('<i class=\"fa fa-play\" aria-hidden=\"true\"></i>');\n        $( '#' + @@AUTOID@@ + '_button .fa' ).css( \"color\",'#'+@@font@@+'' );\n}else{\n\t$(this).addClass('playing');\n\t$(this).empty();\n\t$(this).append('<i class=\"fa fa-stop\" aria-hidden=\"true\"></i>');\n        $( '#' + @@AUTOID@@ + '_button .fa' ).css( \"color\",'#'+@@font@@+'' );\n}\n$( '#' + @@AUTOID@@ + '_button .fa' ).css( \"font-size\",fontsize+'px' );\n\n\nif(!player.prop('paused') && !player.prop('ended')){\n   //change button style \n    player.get(0).pause();\n    playing=false;\n    clear(); \n}else{\n //change button style\n   clear();\n  doPlay();\n}//end of if playerprop\n})\n\nplayer.on('ended',function(){\n  //change button style\n player.get(0).pause();\n playing=false;\n clear();\n if(button.hasClass('playing')){\n\t$(button).removeClass('playing');\n\t$(button).empty();\n\t$(button).append('<i class=\"fa fa-play\" aria-hidden=\"true\"></i>');\n        $( '#' + @@AUTOID@@ + '_button .fa' ).css(\"color\",'#'+@@font@@+'' );\n        $( '#' + @@AUTOID@@ + '_button .fa' ).css( \"font-size\",fontsize+'px' );\n }\n})\n$( '#' + @@AUTOID@@ + '_button .fa' ).css(\"background-color\",'#'+@@background@@+'' );\n$( '#' + @@AUTOID@@ + '_button .fa' ).css( \"color\",'#'+@@font@@+'' );","style":"/* SINGLE BUTTON PLAYER */\n.poodll_onebuttonaudio_container{\n    position: relative;\n    text-align: center;\n    border-radius: 50%;\n    background-color: #333;\n}\nbutton.poodll_onebuttonaudio_button{\n    height: 60%;\n    width: 60%;\n    border-radius: 50%;\n    border: none;\n    background-color: #333;\nbackground-image: none;\n    position: absolute;\n  top: 50%;\n  left: 50%;\n -webkit-transform: translateY(-50%) translateX(-50%);\n  -ms-transform: translateY(-50%) translateX(-50%);\n  transform: translateY(-50%) translateX(-50%);\n    padding: 0px !important;\n    text-align: center;\n    margin: 0px !important;\n}\n.poodll_onebuttonaudio_button button:focus{\n\tborder-style: none;\n}\n\n.poodll_onebuttonaudio_button:focus{\noutline: none;\nborder: none !important;\n}\n.poodll_onebuttonaudio_button .fa{\n       margin-top: 2px;\n       font-size: 10px;\n}\n","dataset":"","datasetvars":"","alternate":"<audio id=\"@@AUTOID@@\" controls=\"controls\" class=\"nomediaplugin\">\n  <source src=\"@@VIDEOURL@@\" type=\"audio/mpeg\">\n</audio>","alternateend":""}