Joue / stoppe le son

css/style.css

@@ -359,6 +359,11 @@ a.btn-play:before {
     position: absolute;
     left: 10px;
 }
+a.btn-play.playing:before {
+    content: "▩";
+    font-size: 1.2em;
+    top: 7px;
+}
 .btn:active,
 a.btn:active {
     top:3px;

js/app/models/sound.js

@@ -20,6 +20,8 @@ define(
                 }
 
                 this.audio.play();
+                this.audio.onended = this.stop.bind(this);
+                this.audio.onpause = this.stop.bind(this);
 
                 this.set('playing', true);
             },

js/app/views/sound.js

@@ -16,14 +16,30 @@ define(
                 soundItem: 'a'
             },
             events: {
-                'click @ui.soundItem': 'playSound'
+                'click @ui.soundItem': 'toggleSound'
             },
-            playSound: function(e) {
+            initialize: function() {
+                this.listenTo(this.model, "change:playing", this.playingAttributeChanged);
+            },
+            toggleSound: function(e) {
                 e.preventDefault();
 
-                this.trigger('sound:play');
+                if( this.model.get('playing') ) {
+                    this.trigger('sound:stop');
 
-                this.model.play();
+                    this.model.stop();
+                } else {
+                    this.trigger('sound:play');
+
+                    this.model.play();
+                }
+            },
+            playingAttributeChanged: function() {
+                if( this.model.get('playing') ) {
+                    $(this.ui.soundItem).addClass('playing');
+                } else {
+                    $(this.ui.soundItem).removeClass('playing');
+                }
             }
         });