聊天界面

talkview/src/js/controller/messageController.js

@@ -18,21 +18,23 @@ angular.module('appMessage').controller('MessageController', ['$scope', '$filter
             scroll(document.body);
         };
 
-        $scope.voicePlay = function() {
-            var audio = angular.element("audio")[0];
-            console.log(audio.duration);
+        $scope.voicePlay = function($event) {
+            var audio = $($event.target.parentElement.nextElementSibling)[0];
+            var unread = $($event.target.nextElementSibling);
+            console.log($($event.target));
             if (audio !== null) {
                 if (audio.paused) {
-                    angular.element(".app-voice-state").removeClass("app-voice-pause");
-                    angular.element(".app-voice-state").addClass("app-voice-play");
+                    unread.removeClass("app-voice-unread");
+                    $($event.target).removeClass("app-voice-pause");
+                    $($event.target).addClass("app-voice-play");
                     $timeout(function() {
-                        angular.element(".app-voice-state").removeClass("app-voice-play");
-                        angular.element(".app-voice-state").addClass("app-voice-pause");
+                        $($event.target).removeClass("app-voice-play");
+                        $($event.target).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");
+                    $($event.target).removeClass("app-voice-play");
+                    $($event.target).addClass("app-voice-pause");
                     audio.pause();
                     audio.load();
                 }

talkview/src/less/app.main.less

@@ -461,7 +461,8 @@ body {
 }
 
 .app-voice-pause,.app-voice-play {
-  float: right;
+  cursor:pointer;
+  margin-left: 50px;
   height: 25px;
   width: 25px;
   background-repeat: no-repeat;
@@ -469,7 +470,6 @@ body {
   opacity: 1;
 }
 .app-voice-you {
-    cursor:pointer;
     height: 25px;
     width: 75px;
     .app-voice-time {
@@ -480,6 +480,11 @@ body {
         /*从未播放*/ 
         background-position: -2px -5px;
     }
+    .app-voice-unread {
+       height:4px; width:4px; border-radius:4px; 
+       background:#EC3300;
+       position: relative; top: -25px; right: -75px;
+    }
 }
 .app-voice-you .app-voice-play {
   /*播放中（不需要过渡动画）*/

talkview/src/templates/messages.html

@@ -225,19 +225,20 @@
                 <div class="well 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">
+                        <div class="app-voice-you">
+                            <div class="app-voice-time">
                                 1"
                             </div>
                             <div class="app-voice-state-bg">
-                                <div style="background-image: url(../img/yuyin.png);" class="app-voice-state app-voice-pause"></div>
+                                <div class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin.png);"></div>
+                                <div class="app-voice-unread"></div>
                             </div>
+                            <audio >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                                您的浏览器不支持 audio 元素。
+                            </audio>
                         </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>
@@ -250,19 +251,20 @@
                 <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">
+                        <div class="app-voice-you">
+                            <div class="app-voice-time">
                                 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 class="app-voice-state app-voice-pause" ng-click="voicePlay($event)" style="background-image: url(../img/yuyin-self.png);"></div>
+                                <div class="app-voice-unread"></div>
                             </div>
+                            <audio >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.mp3" >
+                                <source src="local://E:/LxtalkUIView/dist/img/111.ogg" >
+                                您的浏览器不支持 audio 元素。
+                            </audio>
                         </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>