play only one audio in one moment

Author: tiye

README.md

@@ -14,6 +14,8 @@ Demo http://ui.talk.ai/react-lite-audio/
 
 ### Supposition
 
+* Only one piece of audio is playing at one moment.
+
 ### Usage
 
 ```bash
@@ -55,6 +57,7 @@ gulp build
 ```
 
 ### Special notice
+
 However there is a significant anomaly here in Opera, Safari and IE10, which is that the .paused flag remains false when the media has ended.
 You can see the problem [here](here)
 

package.json

@@ -7,7 +7,8 @@
     "classnames": "^2.1.3",
     "flex.less": "^1.1.0",
     "react": "^0.13.3",
-    "volubile-ui": "^0.0.10"
+    "volubile-ui": "^0.0.10",
+    "wolfy87-eventemitter": "^4.3.0"
   },
   "devDependencies": {
     "cirru-script": "^0.2.3",

src/audio-slim.coffee

@@ -1,6 +1,8 @@
 React = require 'react/addons'
 cx    = require 'classnames'
 
+bus = require './bus'
+
 div   = React.createFactory 'div'
 span  = React.createFactory 'span'
 audio = React.createFactory 'audio'
@@ -29,11 +31,13 @@ module.exports = React.createClass
     @_audioEl.addEventListener 'durationchange', @setDuration
     @_audioEl.addEventListener 'timeupdate', @updateProgress
     @_audioEl.addEventListener 'ended', @endProgress
+    bus.on 'play', @onBusPlay
 
   componentWillUnmount: ->
     @_audioEl.removeEventListener 'durationchange', @setDuration
     @_audioEl.removeEventListener 'timeupdate', @updateProgress
     @_audioEl.removeEventListener 'ended', @endProgress
+    bus.off 'play', @onBusPlay
 
   setDuration: ->
     # safari may get wrong duration
@@ -71,12 +75,19 @@ module.exports = React.createClass
 
   playClick: ->
     if @_audioEl.paused
+      bus.trigger 'play'
       @_audioEl.play()
       @setState pause: false, played: true
     else
       @_audioEl.pause()
       @setState pause: true, played: true
 
+  onBusPlay: (event) ->
+    console.log 'on play event', event
+    if not @state.paused
+      @_audioEl.pause()
+      @setState pause: true, played: true
+
   render: ->
     src = @props.source
     duration = @state.duration

src/audio.coffee

@@ -1,6 +1,8 @@
 React = require 'react/addons'
 cx    = require 'classnames'
 
+bus = require './bus'
+
 div   = React.createFactory 'div'
 span  = React.createFactory 'span'
 audio = React.createFactory 'audio'
@@ -29,11 +31,13 @@ module.exports = React.createClass
     @_audioEl.addEventListener 'durationchange', @setDuration
     @_audioEl.addEventListener 'timeupdate', @updateProgress
     @_audioEl.addEventListener 'ended', @endProgress
+    bus.on 'play', @onBusPlay
 
   componentWillUnmount: ->
     @_audioEl.removeEventListener 'durationchange', @setDuration
     @_audioEl.removeEventListener 'timeupdate', @updateProgress
     @_audioEl.removeEventListener 'ended', @endProgress
+    bus.off 'play', @onBusPlay
 
   setDuration: ->
     # safari may get wrong duration
@@ -71,12 +75,19 @@ module.exports = React.createClass
 
   playClick: ->
     if @_audioEl.paused
+      bus.trigger 'play'
       @_audioEl.play()
       @setState pause: false, played: true
     else
       @_audioEl.pause()
       @setState pause: true, played: true
 
+  onBusPlay: (event) ->
+    console.log 'on play event', event
+    if not @state.paused
+      @_audioEl.pause()
+      @setState pause: true, played: true
+
   render: ->
     src = @props.source
     duration = @state.duration

src/bus.coffee

@@ -0,0 +1,4 @@
+
+EventEmitter = require 'wolfy87-eventemitter'
+
+module.exports = new EventEmitter