聊天界面

talkview/src/js/controller/messageController.js

@@ -1,4 +1,4 @@
-angular.module('appMessage').controller('MessageController', ['$scope', '$filter', '$location', '$anchorScroll', '$element', function($scope, $filter, $location, $anchorScroll, $element) {
+angular.module('appMessage').controller('MessageController', ['$scope', '$filter', '$location', '$anchorScroll', '$timeout', '$element', function($scope, $filter, $location, $anchorScroll, $timeout, $element) {
         lxtalkClient.Invoke('{15180DEF-D508-45F7-BAEB-6486CD8752C8}', '_Register', '', $scope);
         $scope.glued = true;
         $scope.count = true;
@@ -18,6 +18,27 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             scroll(document.body);
         };
 
+        $scope.voicePlay = function() {
+            var audio = angular.element("audio")[0];
+            console.log(audio.duration);
+            if (audio !== null) {
+                if (audio.paused) {
+                    angular.element(".app-voice-state").removeClass("app-voice-pause");
+                    angular.element(".app-voice-state").addClass("app-voice-play");
+                    $timeout(function() {
+                        angular.element(".app-voice-state").removeClass("app-voice-play");
+                        angular.element(".app-voice-state").addClass("app-voice-pause");
+                    }, 1000 * audio.duration);
+                    audio.play();
+                } else {
+                    angular.element(".app-voice-state").removeClass("app-voice-play");
+                    angular.element(".app-voice-state").addClass("app-voice-pause");
+                    audio.pause();
+                    audio.load();
+                }
+            }
+        };
+
         $scope.showMessage = function(jsonStr) {
             console.log(jsonStr);
             jsonStr = jsonStr.replace(/ /g, "&nbsp");

talkview/src/less/app.main.less

@@ -460,55 +460,64 @@ body {
 	100% {opacity:0;left:-150px; top:0px;}
 }
 
-.app-voice-pause,.app-voice-play{
-  height: 30px;
-  width: 30px;
+.app-voice-pause,.app-voice-play {
+  float: right;
+  height: 25px;
+  width: 25px;
   background-repeat: no-repeat;
-  background-image: url(../img/yuyin.png);
   background-size: 100px 30px;
   opacity: 1;
 }
- .app-voice-you .app-voice-pause{
-  /*从未播放*/
-  background-position: -0px -5px;
+.app-voice-you {
+    cursor:pointer;
+    height: 25px;
+    width: 75px;
+    .app-voice-time {
+        float: left;
+        margin-top: 2.5px;
+    }
+    .app-voice-pause{
+        /*从未播放*/ 
+        background-position: -2px -5px;
+    }
 }
-.app-voice-you .app-voice-play{
+.app-voice-you .app-voice-play {
   /*播放中（不需要过渡动画）*/
-  background-position: -0px -5px;
-  -webkit-animation: voiceplay 1s infinite step-start;
-  -moz-animation: voiceplay 1s infinite step-start;
-  -o-animation: voiceplay 1s infinite step-start;
-  animation: voiceplay 1s infinite step-start;
+  background-position: -2px -5px;
+  -webkit-animation: voiceplay 2s infinite step-start;
+  -moz-animation: voiceplay 2s infinite step-start;
+  -o-animation: voiceplay 2s infinite step-start;
+  animation: voiceplay 2s infinite step-start;
 }
 
 @keyframes voiceplay {
 
-  0%  {background-position: -0px -5px;}
+  0%  {background-position: -5px -5px;}
 
   33.333333% {
-    background-position: -25px -5px;
+    background-position: -27.5px -5px;
   }
 
   66.666666% {
     background-position: -50px -5px;
   }
 
-  100% {background-position: -75px -5px;}
+  100% {background-position: -72.5px -5px;}
 
 }
 
 @-webkit-keyframes voiceplay {
 
-  0%  {background-position: -0px -5px;}
+  0%  {background-position: -5px -5px;}
 
   33.333333% {
-    background-position: -25px -5px;
+    background-position: -27.5px -5px;
   }
 
   66.666666% {
     background-position: -50px -5px;
   }
 
-  100% {background-position: -75px -5px;}
+  100% {background-position: -72.5px -5px;}
 
 }

talkview/src/templates/messages.html

@@ -224,19 +224,43 @@
                 </p>
                 <div class="well m-l-xs m-t-xs fit-content">
                     <div class="text-point"></div>
-                    <span class="text-message speech">
-                        <div class="app-voice-you">
-                            <img class="app-voice-headimg"/>
+                    <span class="text-message">
+                        <div class="app-voice-you" ng-click="voicePlay(this)">
+                            <div class="app-voice-time app-voice-unread">
+                                1"
+                            </div>
                             <div class="app-voice-state-bg">
-                                <div class="app-voice-state app-voice-pause"></div>
+                                <div style="background-image: url(../img/yuyin.png);" class="app-voice-state app-voice-pause"></div>
                             </div>
+                        </div>
+                        <audio controls>
+                            <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                            <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                            您的浏览器不支持 audio 元素。
+                        </audio>
+					</span>
+                </div>
+            </div>
+        </div>
+        <div class="feed-element">
+            <div class="media-body">
+                <p>
+                    <strong>陆趣趣</strong><small class="text-muted">-Today 2:10 pm - 12.06.2014</small>
+                </p>
+                <div class="wellself m-l-xs m-t-xs fit-content">
+                    <div class="text-point"></div>
+                    <span class="text-message">
+                        <div class="app-voice-you" ng-click="voicePlay(this)">
                             <div class="app-voice-time app-voice-unread">
-                                1'6"
+                                1"
+                            </div>
+                            <div class="app-voice-state-bg">
+                                <div style="background-image: url(../img/yuyin-self.png);" class="app-voice-state app-voice-pause"></div>
                             </div>
                         </div>
-                        <audio preload="auto" hidden="true">
-                            <source src="local://E:/LxtalkUIView/dist/img/111.mp3" type="audio/mpeg">
-                            <source src="local://E:/LxtalkUIView/dist/img/111.ogg" type="audio/mpeg">
+                        <audio controls>
+                            <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                            <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
                             您的浏览器不支持 audio 元素。
                         </audio>
 					</span>