From cc8ede74fb5997d0dde8658870e0df3b230292de Mon Sep 17 00:00:00 2001 From: Rahul maddineni Date: Tue, 27 Sep 2016 11:44:37 -0400 Subject: [PATCH] Solved: when scrubber is at the end and play is hit audio starts from beginning --- demo/pow.min.js | 2 +- src/player.html | 1 - src/pow.directive.js | 3 +++ 3 files changed, 4 insertions(+), 2 deletions(-) diff --git a/demo/pow.min.js b/demo/pow.min.js index 718eadc..d329300 100644 --- a/demo/pow.min.js +++ b/demo/pow.min.js @@ -1 +1 @@ -angular.module("pow",[]).run(["$templateCache",function($templateCache){$templateCache.put("player.html",'
')}]);(function(){"use strict";angular.module("pow").directive("pow",function($pow,$timeout){return{restrict:"E",templateUrl:"player.html",replace:true,link:function(scope,element,attrs,controller){scope.$watch(attrs.arrayBuffer,function(arrayBuffer){if(scope.data.arrayBuffer.__proto__.toString()==="[object ArrayBuffer]"){window.player.fetch(arrayBuffer);$timeout(function(){scope.data.arrayBuffer={}},0,false)}});function Player(el){this.ac=new(window.AudioContext||webkitAudioContext);this.url=url;this.el=el;this.button=el.children()[0].children[0];this.downloadButton=el.children()[0].children[2];this.track=el.children()[0].children[1];this.progress=el.children()[0].children[1].children[0];this.scrubber=el.children()[0].children[1].children[1];this.loading=true;this.bindEvents()}Player.prototype.bindEvents=function(){this.downloadButton.addEventListener("click",this.download.bind(this));this.button.addEventListener("click",this.toggle.bind(this));this.scrubber.addEventListener("mousedown",this.onMouseDown.bind(this));window.addEventListener("mousemove",this.onDrag.bind(this));window.addEventListener("mouseup",this.onMouseUp.bind(this))};Player.prototype.fetch=function(arrayBuffer){if(arrayBuffer){this.loading=true;this.decode(arrayBuffer)}};Player.prototype.decode=function(arrayBuffer){this.ac.decodeAudioData(arrayBuffer,function(audioBuffer){this.buffer=audioBuffer;this.wav=$pow.audioBufferToWav(audioBuffer);this.position=0;this.draw();this.loading=false}.bind(this))};Player.prototype.connect=function(){if(this.playing){this.pause()}this.source=this.ac.createBufferSource();this.source.buffer=this.buffer;this.source.connect(this.ac.destination)};Player.prototype.play=function(position){this.connect();this.position=typeof position==="number"?position:this.position||0;this.startTime=this.ac.currentTime-(this.position||0);this.source.start(this.ac.currentTime,this.position);this.playing=true};Player.prototype.pause=function(){if(this.source){this.source.stop(0);this.source=null;this.position=this.ac.currentTime-this.startTime;this.playing=false}};Player.prototype.seek=function(time){if(this.playing){this.play(time)}else{this.position=time}};Player.prototype.updatePosition=function(){this.position=this.playing?this.ac.currentTime-this.startTime:this.position;if(this.position>=this.buffer.duration){this.position=this.buffer.duration;this.pause()}return this.position};Player.prototype.toggle=function(){if(!this.playing){this.play()}else{this.pause()}};Player.prototype.download=function(){if(!this.loading){var anchor=document.createElement("a");document.body.appendChild(anchor);anchor.style="display: none";var blob=new window.Blob([new DataView(this.wav)],{type:"audio/wav"});var url=window.URL.createObjectURL(blob);anchor.href=url;anchor.download="audio.wav";anchor.click();window.URL.revokeObjectURL(url)}else{}};Player.prototype.onMouseDown=function(e){this.dragging=true;this.startX=e.pageX;this.startLeft=parseInt(this.scrubber.style.left||0,10)};Player.prototype.onDrag=function(e){var width,position;if(!this.dragging){return}width=this.track.offsetWidth;position=this.startLeft+(e.pageX-this.startX);position=Math.max(Math.min(width,position),0);this.scrubber.style.left=position+"px"};Player.prototype.onMouseUp=function(){var width,left,time;if(this.dragging){width=this.track.offsetWidth;left=parseInt(this.scrubber.style.left||0,10);time=left/width*this.buffer.duration;this.seek(time);this.dragging=false}};Player.prototype.draw=function(){var progress=this.updatePosition()/this.buffer.duration,width=this.track.offsetWidth;if(this.playing){this.button.classList.add("fa-pause");this.button.classList.remove("fa-play")}else{this.button.classList.add("fa-play");this.button.classList.remove("fa-pause")}this.progress.style.width=progress*width+"px";if(!this.dragging){this.scrubber.style.left=progress*width+"px"}requestAnimationFrame(this.draw.bind(this))};var url="http://static.kevvv.in/sounds/callmemaybe.mp3";window.player=new Player(element)}}})})();(function(){"use strict";angular.module("pow").factory("$pow",function(){function encodeWAV(samples,format,sampleRate,numChannels,bitDepth){var bytesPerSample=bitDepth/8;var blockAlign=numChannels*bytesPerSample;var buffer=new ArrayBuffer(44+samples.length*bytesPerSample);var view=new DataView(buffer);writeString(view,0,"RIFF");view.setUint32(4,36+samples.length*bytesPerSample,true);writeString(view,8,"WAVE");writeString(view,12,"fmt ");view.setUint32(16,16,true);view.setUint16(20,format,true);view.setUint16(22,numChannels,true);view.setUint32(24,sampleRate,true);view.setUint32(28,sampleRate*blockAlign,true);view.setUint16(32,blockAlign,true);view.setUint16(34,bitDepth,true);writeString(view,36,"data");view.setUint32(40,samples.length*bytesPerSample,true);if(format===1){floatTo16BitPCM(view,44,samples)}else{writeFloat32(view,44,samples)}return buffer}function interleave(inputL,inputR){var length=inputL.length+inputR.length;var result=new Float32Array(length);var index=0;var inputIndex=0;while(index
')}]);(function(){"use strict";angular.module("pow").directive("pow",function($pow,$timeout){return{restrict:"E",templateUrl:"player.html",replace:true,link:function(scope,element,attrs,controller){scope.$watch(attrs.arrayBuffer,function(arrayBuffer){if(scope.data.arrayBuffer.__proto__.toString()==="[object ArrayBuffer]"){window.player.fetch(arrayBuffer);$timeout(function(){scope.data.arrayBuffer={}},0,false)}});function Player(el){this.ac=new(window.AudioContext||webkitAudioContext);this.url=url;this.el=el;this.button=el.children()[0].children[0];this.downloadButton=el.children()[0].children[2];this.track=el.children()[0].children[1];this.progress=el.children()[0].children[1].children[0];this.scrubber=el.children()[0].children[1].children[1];this.loading=true;this.bindEvents()}Player.prototype.bindEvents=function(){this.downloadButton.addEventListener("click",this.download.bind(this));this.button.addEventListener("click",this.toggle.bind(this));this.scrubber.addEventListener("mousedown",this.onMouseDown.bind(this));window.addEventListener("mousemove",this.onDrag.bind(this));window.addEventListener("mouseup",this.onMouseUp.bind(this))};Player.prototype.fetch=function(arrayBuffer){if(arrayBuffer){this.loading=true;this.decode(arrayBuffer)}};Player.prototype.decode=function(arrayBuffer){this.ac.decodeAudioData(arrayBuffer,function(audioBuffer){this.buffer=audioBuffer;this.wav=$pow.audioBufferToWav(audioBuffer);this.position=0;this.draw();this.loading=false}.bind(this))};Player.prototype.connect=function(){if(this.playing){this.pause()}this.source=this.ac.createBufferSource();this.source.buffer=this.buffer;this.source.connect(this.ac.destination)};Player.prototype.play=function(position){this.connect();if(this.position===this.buffer.duration){this.position=0}this.position=typeof position==="number"?position:this.position||0;this.startTime=this.ac.currentTime-(this.position||0);this.source.start(this.ac.currentTime,this.position);this.playing=true};Player.prototype.pause=function(){if(this.source){this.source.stop(0);this.source=null;this.position=this.ac.currentTime-this.startTime;this.playing=false}};Player.prototype.seek=function(time){if(this.playing){this.play(time)}else{this.position=time}};Player.prototype.updatePosition=function(){this.position=this.playing?this.ac.currentTime-this.startTime:this.position;if(this.position>=this.buffer.duration){this.position=this.buffer.duration;this.pause()}return this.position};Player.prototype.toggle=function(){if(!this.playing){this.play()}else{this.pause()}};Player.prototype.download=function(){if(!this.loading){var anchor=document.createElement("a");document.body.appendChild(anchor);anchor.style="display: none";var blob=new window.Blob([new DataView(this.wav)],{type:"audio/wav"});var url=window.URL.createObjectURL(blob);anchor.href=url;anchor.download="audio.wav";anchor.click();window.URL.revokeObjectURL(url)}else{}};Player.prototype.onMouseDown=function(e){this.dragging=true;this.startX=e.pageX;this.startLeft=parseInt(this.scrubber.style.left||0,10)};Player.prototype.onDrag=function(e){var width,position;if(!this.dragging){return}width=this.track.offsetWidth;position=this.startLeft+(e.pageX-this.startX);position=Math.max(Math.min(width,position),0);this.scrubber.style.left=position+"px"};Player.prototype.onMouseUp=function(){var width,left,time;if(this.dragging){width=this.track.offsetWidth;left=parseInt(this.scrubber.style.left||0,10);time=left/width*this.buffer.duration;this.seek(time);this.dragging=false}};Player.prototype.draw=function(){var progress=this.updatePosition()/this.buffer.duration,width=this.track.offsetWidth;if(this.playing){this.button.classList.add("fa-pause");this.button.classList.remove("fa-play")}else{this.button.classList.add("fa-play");this.button.classList.remove("fa-pause")}this.progress.style.width=progress*width+"px";if(!this.dragging){this.scrubber.style.left=progress*width+"px"}requestAnimationFrame(this.draw.bind(this))};var url="http://static.kevvv.in/sounds/callmemaybe.mp3";window.player=new Player(element)}}})})();(function(){"use strict";angular.module("pow").factory("$pow",function(){function encodeWAV(samples,format,sampleRate,numChannels,bitDepth){var bytesPerSample=bitDepth/8;var blockAlign=numChannels*bytesPerSample;var buffer=new ArrayBuffer(44+samples.length*bytesPerSample);var view=new DataView(buffer);writeString(view,0,"RIFF");view.setUint32(4,36+samples.length*bytesPerSample,true);writeString(view,8,"WAVE");writeString(view,12,"fmt ");view.setUint32(16,16,true);view.setUint16(20,format,true);view.setUint16(22,numChannels,true);view.setUint32(24,sampleRate,true);view.setUint32(28,sampleRate*blockAlign,true);view.setUint16(32,blockAlign,true);view.setUint16(34,bitDepth,true);writeString(view,36,"data");view.setUint32(40,samples.length*bytesPerSample,true);if(format===1){floatTo16BitPCM(view,44,samples)}else{writeFloat32(view,44,samples)}return buffer}function interleave(inputL,inputR){var length=inputL.length+inputR.length;var result=new Float32Array(length);var index=0;var inputIndex=0;while(index
-

diff --git a/src/pow.directive.js b/src/pow.directive.js index d10e44b..632d35f 100644 --- a/src/pow.directive.js +++ b/src/pow.directive.js @@ -76,6 +76,9 @@ Player.prototype.play = function( position ) { this.connect(); + if(this.position === this.buffer.duration){ + this.position = 0; + } this.position = typeof position === 'number' ? position : this.position || 0; this.startTime = this.ac.currentTime - ( this.position || 0 ); this.source.start(this.ac.currentTime, this.position);