From 1ce41b3ab1f0433e0cf009e645fbd37377c041d1 Mon Sep 17 00:00:00 2001
From: listen1 <githublisten1@gmail.com>
Date: Mon, 2 May 2016 20:44:52 +0800
Subject: [PATCH] add volume control

---
 css/player.css                     |  43 ++++++++++--
 images/player_small.png            | Bin 5480 -> 6408 bytes
 js/app.js                          | 109 ++++++++++++++++++++++-------
 js/vendor/angular-soundmanager2.js |   2 +-
 listen1.html                       |  17 ++++-
 5 files changed, 137 insertions(+), 34 deletions(-)

diff --git a/css/player.css b/css/player.css
index 0ed2371..9afb08b 100644
--- a/css/player.css
+++ b/css/player.css
@@ -352,8 +352,21 @@ a {
 
 .m-pbar {
     position: relative;
-    margin-top: 14px;
+    
+}
+
+.m-pbar.play {
     width: 80%;
+    margin-top: 14px;
+}
+
+.m-pbar.volume {
+    position: absolute;
+    right: 13px;
+    bottom: 11px;
+    float: right;
+    width: 56%;
+    margin-top: 0px;
 }
 
 .m-pbar .barbg, .m-pbar .cur, .m-pbar .rdy {
@@ -413,15 +426,13 @@ em, i {
 .m-playbar .ctrl {
     position: absolute;
     right: 0px;
-    bottom: 17px;
+    bottom: 48px;
     z-index: 10;
-    width: 110px;
+    width: 79px;
     padding-left: 13px;
     float: none;
 }
 
-
-
 .m-playbar .icn-add {
     background-position: -25px 0px;
 }
@@ -434,6 +445,14 @@ em, i {
     background-position: -125px 0px;
 }
 
+.m-playbar .icn-vol {
+    background-position: -175px 0px;
+}
+
+.m-playbar .icn-vol-mute {
+    background-position: -200px 0px;
+}
+
 .m-playbar .icn-list:hover {
     background-position: -125px -25px;
 }
@@ -446,6 +465,13 @@ em, i {
     background-position: -50px -25px;
 }
 
+.m-playbar .icn-vol:hover {
+    background-position: -175px -25px;
+}
+
+.m-playbar .icn-vol-mute:hover {
+    background-position: -200px -25px;
+}
 
 .m-playbar .icn-shuffle {
     background-position: -150px 0px;
@@ -506,6 +532,13 @@ em, i {
     background-position: -75px -25px;
 }
 
+.volume-ctrl {
+    position: absolute;
+    right: 0px;
+    bottom: 16px;
+    width: 110px;
+}
+
 li {
     list-style: none;
 }
diff --git a/images/player_small.png b/images/player_small.png
index 28b55036b9ae9c31a64d844410865a3c7e938d54..d79cf4e403149252c3a83cba7c2e81dd23204eb6 100644
GIT binary patch
delta 5653
zcmai&WmMEp*!N+{B?Rg24(XOyQb17YP9>HQS-O6dAR>q~$V!8BEGg0g(o496N|$v1
z7g*rl=f(5#KKF~6Ip>-=b7sz5XTG27yCd{Yk~87Cp$<6-6A2Cu4!Q0VO(X2Mifxj_
zgxJ24@%v2!rvivWUQSL%T0%x$TwY#ALPAScU0y~?UPD}5OIA)?TUt&kEd<2!{})02
z*F`NLCw46b1u1PQ87*-wNpV?u2?=>|c_~eZ6hvG?Lt9#2D@_g$03QDFcE!P=mDSaR
zm;^2E+k$;)O~0wY-||Fq;4`2cX|>aFqRFBoMT*vpKt)`790KX;!(%(nERfQX>GJ1p
zy#*qVBDr=7);MBBK-y9wTwFhJlGReQ@IjUwoHxPCf%4(yu=e)Wn<XB($Jce&m07=A
zvtSc}cbj>4zf+7z0CSr+ykS(UbWy^!vF1g8xV|nqF~l7>Gs}7kxG%hX`7-?~&Euer
z2Lp&6b=}mq`K(62OH8DefzDDcEG%#d2~`IB`T4P9SV(DTXlYAn=;_%jtXpdZL_}!j
z=}t~g*1B#Et5QN4<b4YEXUadi&3^r~sPbkl)}}k6bG|FQ16W0+==TZhIXOGif+1~M
ze>(z?5^XyoYnQ|S`ztGQV>&3K^N~$7{sC)cEj%NmRND2kte0liBikRCtFz5Ga^_lM
zF2x3hFmUzTZifaEd7pt4pQEKtUW+ggP0l7U3*MK5`37f+2zm=M_qTp~D1*a4?K3`3
zgOHm6H3WH&FTf*<C_LDeb3+!0O<ZudP(Z!rg_V`V88aD?u_qR__$bh}hG4%ATd?K>
zc9pymdXKqU+Rt*Y=^j3O=!7hQtd)KCrdl6NqE@}fAZA~MTBh=3D}s#z@IE%);+AG;
z`XS(1!NlA)cj^#G@2BtIzu%{4W`5~$!Dka^yD93r1ulOVjg5_I%m>m5pycw%UxK_M
z$JI`=C7gx6_c>aP)L6H^Z(Rx*t+!r%{rzN6ExV|WkC)dU5ehHW&ni=QHiXN+S=;WF
zU3yWhJ$!T2oxl0@r`+qM?~+7@a7EK4-%(Mgf%mjdz0m|&qTrYcYOw^|RG-^mT;jg7
zZhX&KV&IA?;OJKa9|m(a`6~ze#D^(DvV43lQYj@eMO1EGVCB%ueSZx4giE@1E9jk@
z85_z2^7}{MA1K9ia_CAFQEl()Ra7mmR{@jLXr^dzry4vOD$p5nK{aO^2*+%sJ&R=}
z2i@1<sH}D)k*y9=Mp^FQrnIQ#^vph^-Q_kQpH-jka+A<HAc$?DP=n}GUY-c{<XT4d
zzWMgy7a1!EIj=?Ol`FG4yPDne+KxlX>feSxFt39f-KMzwC(gDf6T@#V!PnJ94_MkZ
zR1dJ(J-aby7h3bxwxeZnyU9>wnhZ^i1Z8i>1ObC<`8}L}7wT{ZcayuM=RH!w3;{*B
z&von@Y>s(Rva;F|$&C|^=vk5*dz*Fy9B?&XRt?;WH|VXNZNx;@bl>0I7|vgiiT_<5
zW)C}t1poGGRrp6Ua=CapDo()XB8cpC8PA113DVQnj_W~u<z=QJ=;Dl#U+3oLo`Lik
z^wKcB<Bca{EQ(emJD;sI)$id?2ZYUQMPNgoJz>eIsj1M-j*~9$?<d+*?XYNzE{sOP
zL?3K9hKM4QTl<4U`KECi(?m7&dPUbtKc|G-QWnQOmq!)n84mD@sG?Q33%`?XOeScJ
zzriMcGotf`0*85hAF8FE?fjR5T_ucI^Fxh!ot?zHvXBw%mU@4MCH{N?2-a+SPURye
zLAgcz<FWU!(Sz1yyGP(Dm=LHDx7MmzZ-2fa=Aj06N<i@HTY82UCih^!?}ArXSD+1#
zw-Xz6NR+-0Af5A%-Wzi<XU~4{r~Pbtru<o8e+c<yeG;?W7r(8soWM!AQfse!P7;fP
z5lHCU`-vwqZs@0a#!YU(l=?)Dl+IsR8lM5pi!02mqG7WIM-APF53EWkm?661G+F7;
z;kj;s=SwTA+^B1lEt%n7*W!<)0IEP?M6toq2yk1MO~oa2_);XJ9)sJ)x&y{ow<@v0
zj1_p!1IgVjy?@OGn;orRTQA+dzsj%wbiBWS@UQ*0E0pl%J5DU{LEHJ#UrgqrvF5P-
z$x}Ql9YQ1>R96zWg=to-8{_o-YU?xAq8{sVi<h-EF1a=@C;tL-^gAwo{&I>Z({!UX
z9E%8!UM5OkjxQ1qN}lveG_S3%Q@r`wCx~14H$#D_+mc1WSJU%%i-F(4qG|n!ZyO$*
z{FdK&vB|y2w90G^D9?{Da<TWP&dwklv7T1vz+G@ZWfaJdxE8c!d)8iT7;DK-%kjYs
zApL+WNl{djeV+DwfGnzu(=L7vtt_tf+F1BdAigO|*X=qo>Qd?AVd2AoKIy8^ahbXE
za&<`mw+%(*kaKa@b4{rFkFv5dm&N0p*;FQELUu-yo%Pxx&~i`Y1P7f!i!>^T`Zfzr
zhNhn4L!L#3NxxoWlJ!JedwV~E=Y6wqQEV4;;{&T&xVQN4p};BDJiNRWPj-gbfe&}X
zDS=DD{G%pM^Hprsg@vSoF83GqX+S7_Q*><CNbXj!x_Y#9jOS>U82yrl5bYB+N6sJ8
zi7s6Ks6@K~goc;J!*FtOwK`z;sHfh*Ix#VEw5JG3k6Xw|Zbo*Q1*O4#%c>MG78T6&
zP+&LK`Ny0+;PtztNpGgi;8l0TtqEQ$H#OhWNMPow3HAO0*}ol?^5$ENGYcO{Ng|#C
zqTVh)PmBLebj(En{-Qb`AD@tGepEKEekQ|g+&LIH>io}+miLuU+{0;R?>0zIIg41H
z0*ue#2CA(6(_s{Svi=KEU`%f+UB<ZiY8BlW^gc$uF0hz|a05z4Dk#2QvnnK{2wjqY
zS2{tII<Olr_I9#>%h-jYJ?O;APS^#jMFZyc;r_T!+n)gZa2bzG{!>(EXyCsRxq%a?
zE)1AVMg~TqR)g%>!Xb2u($3Pvx~GMz0!bsIqlx_zSK@E>q8KpNnSU1~1zc$(7uw!%
z%X|)bkey8!J|BA6uJagk+z+}d+YQQ<d;KVxUG<S&=z&af|6;^e<uSMus}YY<Ss7fJ
zP8Jv})XTXRqAX%$4EH7tJrhY#jpMyLF+k=4ofUJOdLOet$KW~G-X-nSF*QzEarZCY
ziyK<&CpuJmu!Qj4AZZs_pYF;O{1R<vyu$@VdE`f)DfwHomk5_}o@Qd^meZBAG%w{?
zK2tjr6B9nn;-JO7>9ReKbbhRM5(wg?_LFpenK<c?MYqH6pOIEU<jIlCIR2BT)Ih^n
zMDpi@1%yuH42SN&&xcE$)=8va9tSrrLVHj(*22d3DC^gzFOcc!G$(gAN6fQmk<jbA
zgT>~w+5OoKYJS6#BjGDd)Gjj44+Y8Ywv6VEX-a_dA}KiSwp~{I35PE(_Y`qV4xa2N
z!&X4=%FK3WE4Z=Tz&GwCN+7)nxFt8fxK3jJZ;$^3_$4nW)_I;P1}n626vs>IH+u_P
z68Oa$)<c$CjGX?bI94-A>S(3Y_qfz6G#T{>g;<^0{M|_pmCqgg^eIaSm>@rxtw`HI
zuK$}UANbP_i-DGyu2SzBnpmh`Rpw=hT9@6mzFt<rV@-?=7WMABav?wf6Y@9li1Gr_
zTY^zGGU>1ayhkjfN?r?F;`4Mf)YJIa)|7K8nE|)o=HA>$Yc_K^T3K1?OXm@a%UBf@
zvLfy>)6&+b;>=7b(wbwHUvcC=PZG2w)Mrd6Szi51{QYAgcm(3zfj@g!WfdK(Qy68X
zK69%!y~=1IQEKrq+TRKUH0tfI|GawhKmyH`A*K+9u7^hEv6GB%FHAbV6ErS+w^!F~
z=RRU?7p!ITKpmiqK+HF}r_~$k6pJ^8?$1jsw7#~dy?DE~$|yzVG)Qj1_@M6@VeTFb
z^LH<sSz1tEgy;8R4@<LMaYI*JQ;UT4qJYf|O66u>ics7M(nAFWT2oW0`g!8$A(FFg
zv5qVW2?@GtF~**HPoGL-K2hF%(mbjjdy$QRxD$V#LCsb(xb>Q^udm<7-;yeTX3l+L
z2+0@w&NmtvnU;0;_j>duCnmm(4Qk~Jq%=W)>7_cH!;x;Z=;fu(P+`y)<xsP+Yzd8$
zvNEQ^$2z5-l_7?Jbur<lJSUzU$JZALGpKJ)5^N5vUntg?oPClAHvP}<4wb4^IGc<)
znPv$RndHLIiDdK068*@Q_mP8w+QpAZ{Cv&ku_&r=Z2eF4`LkzAB*0LleQ@WJSDb3c
z&MOTn;@tbTI!4Y-@Q@h9?+U&CkrYat>+UjO1cNd3vEu?_fvfVIA{^ZKsr1C`#;7pj
zp^_z<UW3YQ89FpqF5Ix+#~w{)fL1BY)D~A5igIZ7D-F^or);KVI`FE7O@CwBL;P-&
zFZb<<#NAcaOs1bEvO%~c)i^S=CReq#@%Rm7h$nt_9;7w5q58J=USA!{`vbg%!nOZz
z3L6Bl(UA;6?~#7!BSV+m^PMRTU$UuC#cU<A&D3K(nhDc$o_hkL9|Pu=LRu=<JKPFE
z#|~$rzyz;p+H!u#uAto2(I#^0Tj$GC;<KTk)O!$w|DL=A3}8-lGJ=zaPLfDBoi#ND
z4u;Oz`r|3Oxpvz?zR{-!XvVcQ{KHCG!0fqv0l)V>9$L+rQ9MShH!kGRVRL}qJ{^*7
zK;}bq%yt~Of>(euUoi*ZypMd<!_s-AQV{TUGBr0>DDnM!8uVpvx}Y)7G8}^imsypq
zwN+uq)ynnC>NJv-Ugw@iE_YQwJidB*E^U*$is_#1tG0FVUx}fL-(z)VWeyD(+>s)L
z+a*H=Fqkk|moAfCo+*(u{7w=-m`{a?gAk?P=`yw^krIyjrqg9GIlPWqmXeg@u_svb
z(C}JpYWGaLC$!`@b8M`a^SN!nC8jED=73F#RKN2uu{yQy60N;sprwTlNcIZZO9(cY
z%;M*@nq#Y~PnT6i7yYv!G_YtK>Y0q^$$Jl%a!uBI_;WTg%6AZ%?yTXMTJq<QO}poU
zq`$uGml&1h?jHm68p^}KKxyz(u8W8ajJeI2GF7@bIewbu8!9<!MP42r8{hn}{=0@D
zHtLJLIf@_^zmQ797l(2FzZ0_WMO#xyNJ>;%^(-)dV3QScyPY5P^#HxpN!9!B*KJ8x
z6R#-!ok*y=?(kMVi#mr>9yyDkx%g&mk(v1qj^X`*KY(Qkzp$iHp(`=(7TipKKfKcF
z!SOoK2+#d50?p}WLQCu|{<g!)H*Nv~HmOpz7w<gYcd7D~=Qytibs+{@k7D%hZk9ri
zDkyr6BXSfXbrZX<fGy^TjEbi<pL1FbR2#k#C;TeWrEc(9RWEBxDc1RT`A2R!&sAmm
zl*y+gMlb3^VF1;=!Dn6H6p=H_%WEc&NZvK4Mbdy|d$&_^)LySm48L76?|(pXpwtt&
z7dF=}5k4w~|6)uc^L>b|WaziF!4pH1@tYntIOx9Dk9t~>6ada}k7^X_&Wkx`%blY?
zu<ePA{b2VI&&8&MisMq&gT8eNR>cj4rC!A2ANT`mwp}bFWV1KyrG!Kwc()f_%47Jf
zAH)U%xyMh-+jG*=ic#)x7UhsxnD|kCZp=-q_g|}nus%`imamO`e9yjAN4x|{cq5k3
zBG`X!T3W}FACO(FvY)zV1?3SieU6<{xp^`gTn0*vZqu&VyxVz~j~`Ljdr@e&eTt5A
z<mL?7A<O35CM6|3dydq4dhdW&YO{tm0=8YuT+R5vJ0*KzSDRVNL#pRU4Z|;=N=A`9
zFG<c9)C>Zo)r?nySAZ)o@)ZuBk28ZFR4Ki5=txOkfLH6ZBNkiKnojCbr*5?>XhJ}#
z@1EwGu;NLHco1f`O&HGbY-ZU<2#!{zk#KOH$krnp;rN~{dGV}U&p1<4f*^ryp?<en
z_Ob!G^u!R8F-6KZ%#=h7o0M1_2Y-R$_#;>Jh=Fas7YpJCZff?8z<q>P2+`y;_$Qtf
zt}|dUoEv-ZQdb3*XZ%_|yf~!0Zi}@B%JXKXr)h8vL|yMDZb~h4b8;$@*Uu2#4aHNz
zkNQG?gQJs@C5x(*%p#6?9l}j<z#TZQBEP+&V3}vqs41`VIf0XJs#`<KWe->DJo^;9
z#?vr!xh(O~OH0V8T%#ne0?MBf>;fqz<v@AXu)VwaS6i!A?}PK#E|;|-Yfg7Bo}Jov
zewgXazE+&~>pM)y4_X5+bOS(h#Oa1E-<S+TN};$GcX7#6f8rW0MgQFrs%KLaVOu$_
zk8{Q<tB^EsmGEz;uX9A<&bg*OmRkaiEjLDW4j&7Dm##k~t~+p7EXuE#6ZX!l2La*g
z$>e<2P39t$1e$21Cn2!Sz;&yg()4q={pw`wbSy_rojTJhRwXOOwW3CbWqevGiX!TI
zajY=l<=rQu$U`+*Jfna~@-;yN7?x}#C*Q2};C`f&G*EzrPnYOQrYqKxz|z-q$_AWr
zONWPtQ=`iDWOcS@wh^8m3A!5d0N0dDYPel7(s!b8k;1cLb(EjR@jq}>DaWrlx}t&L
zPZP&nPGsXoBJRm_M3p{JX~pyEm)fhKPalU;B3*nOu*L#5(^!Wldjwb`9sQ~~>%j%a
zEfzOX8co4e9{>G0-?Lb9!RZ&ma$+i`o+Nywx>_W7<LASLj=<NJwtO!EG}r38hul1>
zHqM!dyVUw=G%CDIaNG-3Y#Gm)dMuk;w9g<Km2=S3pLsU+>rg|0#|HPj8B<rcWPb3(
zLYvwO0&8Mnmslj5Mk~q9Y&4uSf?|4WZ9864CS^JP)KwEx7A^zV<L(r=&YaKj7{Gj&
zu$Dp9Y1z?6)tN&~X$#P#tpiW37Yb7cHa%JAUOgY4Yp8w()g^kRv;252F_t|WBGC!|
z8Y8|XB5EaIx%kX4Bnd>?z}gJ2zlt@P;rMlgylKWE6P7RV_}fB;USv|cU^_!dnGHH;
zXJ=C9V@(9653hY`+$wI#xwI`L-+1Ihc<=pvjUqlrIa{5dR0Dkl)L^~)47^jU5%67P
zE2z<1N=nMK*5t@H;&hmwJc7sX{_b{{`2**~mK7Q1h0PeAhan+j=}_UgZQwuLfHORC
zj0^sD3LDuf)3nl+Uo%{3q!64^Nh7dk!5PmgkMC#;&Fhn;-uC@a-;>N&a$KBNrogmj
zquLRa;Rxk01#aS(adSdc)&x7dpHtY+tB4JWDTqM4g0{vOudp&KfXH!<omC6#!q%x)
zW<!d#?}D?!y3Wu2hOfy^Eupz84v~^fMMEKbM8QdcVHq88MPhz14EMo=EA-`w5;+s<
zg5|-Vbqn8=<wh~}^-+ZNs+8+QwGfqI>gCJ#GlTkJ_vxDFvbg^=2)I@@4b_jXt9}gs
zI>Kp<EB5?jo+D()^e?z(lkfgl;ZZA`>_xT<`L@X^>35990|VFG3QS8r{Qm?UoAy%x
bM27PZpT4p(#as*P^y27h8EV$5J4F8v#yRg$

delta 4693
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
VzPS01OZZI@KucX$twzNr@;_iv1zG?A

diff --git a/js/app.js b/js/app.js
index c5ff23e..cb2443f 100644
--- a/js/app.js
+++ b/js/app.js
@@ -286,6 +286,7 @@
       current.nowplaying_track_id = data;
       localStorage.setObject('player-settings', current);
     });
+
   }]);
 
 
@@ -295,14 +296,15 @@
      function($scope, $timeout, $log, $anchorScroll, $location, angularPlayer,
       $http, $httpParamSerializerJQLike, $rootScope, Notification, loWeb){
       $scope.menuHidden = true;
-
+      $scope.volume = angularPlayer.getVolume();
+      $scope.mute = angularPlayer.getMuteStatus();
       $scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
 
       $scope.loadLocalSettings = function() {
-        var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1}
+        var defaultSettings = {"playmode": 0, "nowplaying_track_id": -1, "volume": 90};
         var localSettings = localStorage.getObject('player-settings');
         if (localSettings == null) {
-          $scope.settings = {"playmode": 0, "nowplaying_track_id": -1};
+          $scope.settings = defaultSettings;
           $scope.saveLocalSettings();
         }
         else {
@@ -319,6 +321,12 @@
         if (angularPlayer.getShuffle() != shuffleSetting) {
           angularPlayer.toggleShuffle();
         }
+
+        $scope.volume = $scope.settings.volume;
+        if($scope.volume == null) {
+          $scope.volume = 90;
+          $scope.saveLocalSettings();
+        }
       }
 
       $scope.saveLocalSettings = function() {
@@ -350,6 +358,12 @@
         $scope.saveLocalSettings();
       };
 
+      $scope.$on('music:volume', function(event, data) {
+          $scope.$apply(function() {
+              $scope.volume = data;
+          });
+      });
+
       $scope.$on('angularPlayer:ready', function(event, data) {
         $log.debug('cleared, ok now add to playlist');
         if (angularPlayer.getRepeatStatus() == false) {
@@ -400,6 +414,11 @@
         }
       };
 
+      $scope.toggleMuteStatus = function() {
+        // mute function is indeed toggle mute status.
+        angularPlayer.mute();
+      }
+
       $scope.playmylist = function(list_id){
         $timeout(function(){
           angularPlayer.clearPlaylist(function(data) {
@@ -471,6 +490,10 @@
           $scope.myProgress = data;
         });
       });
+
+      $scope.$on('music:mute', function (event, data) {
+        $scope.mute = data;
+      });
   }]);
 
   app.controller('InstantSearchController', ['$scope', '$http', '$timeout', 'angularPlayer', 'loWeb',
@@ -589,17 +612,58 @@
 
   app.directive('draggable', ['angularPlayer', '$document', '$rootScope',
       function(angularPlayer, $document, $rootScope) {
-    return function(scope, element, attr) {
+    return function(scope, element, attrs) {
       var x;
       var container; 
+      var mode = attrs.mode;
+
+      function onMyMousedown() {
+        if(mode == 'play') {
+          scope.changingProgress = true;
+        }
+      }
+
+      function onMyMouseup() {
+        if(mode == 'play') {
+          scope.changingProgress = false;
+        }
+      }
+
+      function onMyUpdateProgress(progress) {
+        if(mode == 'play') {
+          $rootScope.$broadcast('track:myprogress', progress*100);
+        }
+        if(mode == 'volume') {
+          angularPlayer.adjustVolumeSlider(progress*100);
+          if (angularPlayer.getMuteStatus() == true) {
+            angularPlayer.mute();
+          }
+        }
+      }
+
+      function onMyCommitProgress(progress) {
+        if(mode == 'play') {
+          if (angularPlayer.getCurrentTrack() === null) {
+            return;
+          }
+          var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
+          var duration = sound.durationEstimate;
+          sound.setPosition(progress * duration);
+        }
+        if (mode == 'volume') {
+          var current = localStorage.getObject('player-settings');
+          current.volume = progress*100;
+          localStorage.setObject('player-settings', current);
+        }
+      }
 
       element.on('mousedown', function(event) {
-        scope.changingProgress = true;
-        container = document.getElementById('progressbar').getBoundingClientRect();
+        onMyMousedown();
+        container = document.getElementById(attrs.id).getBoundingClientRect();
         // Prevent default dragging of selected content
         event.preventDefault();
         x = event.clientX - container.left;
-        setPosition();
+        updateProgress();
         $document.on('mousemove', mousemove);
         $document.on('mouseup', mouseup);
 
@@ -607,19 +671,22 @@
 
       function mousemove(event) {
         x = event.clientX - container.left;
-        setPosition();
+        updateProgress();
       }
 
-      function changeProgress(progress) {
-        if (angularPlayer.getCurrentTrack() === null) {
-            return;
-        }
-        var sound = soundManager.getSoundById(angularPlayer.getCurrentTrack());
-        var duration = sound.durationEstimate;
-        sound.setPosition(progress * duration);
+      function mouseup() {
+        var progress = x / (container.right - container.left);
+        commitProgress(progress);
+        $document.off('mousemove', mousemove);
+        $document.off('mouseup', mouseup);
+        onMyMouseup();
       }
 
-      function setPosition() {
+      function commitProgress(progress) {
+        onMyCommitProgress(progress);
+      }
+
+      function updateProgress() {
         if (container) {
           if (x < 0) {
             x = 0;
@@ -628,15 +695,7 @@
           }
         }
         var progress = x / (container.right - container.left);
-        $rootScope.$broadcast('track:myprogress', progress*100);
-      }
-
-      function mouseup() {
-        var progress = x / (container.right - container.left);
-        changeProgress(progress);
-        $document.off('mousemove', mousemove);
-        $document.off('mouseup', mouseup);
-        scope.changingProgress = false;
+        onMyUpdateProgress(progress);
       }
     };
   }]);
diff --git a/js/vendor/angular-soundmanager2.js b/js/vendor/angular-soundmanager2.js
index d947210..2bcda14 100644
--- a/js/vendor/angular-soundmanager2.js
+++ b/js/vendor/angular-soundmanager2.js
@@ -4938,7 +4938,7 @@ ngSoundManager.directive('soundManager', ['$filter', '$timeout', 'angularPlayer'
                 });
                 scope.$on('currentTrack:position', function(event, data) {
                     $timeout(function() {
-                        scope.currentPostion = $filter('humanTime')(data);
+                        scope.currentPosition = $filter('humanTime')(data);
                     });
                 });
                 scope.$on('currentTrack:duration', function(event, data) {
diff --git a/listen1.html b/listen1.html
index 7eac918..0232f9c 100644
--- a/listen1.html
+++ b/listen1.html
@@ -275,15 +275,15 @@
             <a open-song-source="currentPlaying" class="src" title="原始链接"></a>  
           </div>
 
-          <div class="m-pbar" >
-            <div class="barbg" id="progressbar" draggable>
+          <div class="m-pbar play" >
+            <div class="barbg" id="progressbar" mode="play" draggable>
               <!-- <div class="rdy" ng-style="{width : myProgress + '%' }"></div> -->
               <div  class="cur" ng-style="{width : myProgress + '%' }">
                 <span class="btn"><i></i></span>
               </div>
             </div>
 
-            <span class="time"><em>{{ currentPostion }}</em> <span ng-show=" currentDuration!=none ">/</span> {{ currentDuration }}</span>
+            <span class="time"><em>{{ currentPosition }}</em> <span ng-show=" currentDuration!=none ">/</span> {{ currentDuration }}</span>
           </div>
 
           <!-- init soundManager2 player -->
@@ -296,6 +296,17 @@
           <a class="icn icn-list" title="列表" ng-click="togglePlaylist()"></a>
         </div>
 
+        <div class="volume-ctrl">
+          <a class="icn" ng-class="{ 'icn-vol-mute': mute, 'icn-vol': mute == false }"  title="音量" ng-click="toggleMuteStatus()"></a>
+          <div class="m-pbar volume" >
+            <div class="barbg" id="volumebar" mode="volume" draggable>
+              <div class="cur" ng-style="{width : volume + '%' }">
+                <span class="btn"><i></i></span>
+              </div>
+            </div>
+          </div>
+        </div>
+
         <div class="menu" ng-hide="menuHidden">
           <div class="menu-header">播放列表 
               <a class="remove-all" ng-click="menuHidden=!menuHidden">