add rate prop + .rate() method (#119)

README.md

@@ -64,6 +64,7 @@ playing | true | Set to `true` or `false` to pause or play the media.<br>Se
 loop | false | Set to `true` or `false` to enable/disable loop
 mute | false | Set to `true` or `false` to mute/unmute current audio
 volume | 1.0 | The volume of the specific howl, from `0.0` to `1.0`
+rate | 1 | The initial playback rate (speed)
 html5 | false | Set to `true` to force HTML5 Audio. This should be used for large audio files so that you don't have to wait for the full file to be downloaded and decoded before playing.
 format | [] | howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream).
 xhr | {} | When using Web Audio, howler.js uses an XHR request to load the audio files. If you need to send custom headers, set the HTTP method or enable `withCredentials` ([see reference](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)), include them with this parameter. Each is optional (method defaults to `GET`, headers default to `null` and withCredentials defaults to `false`). For example: <pre lang="JSX">`<ReactHowler src="sound.webm" xhr={{ method: 'POST', headers: { Authorization: 'Bearer:' + token, }, withCredentials: true, }} />`</pre>
@@ -101,6 +102,12 @@ Check the load status of the `Howl`, returns a string `unloaded`, `loading` or `
 Stops playback of sound, resetting `seek` to `0`.
 * **id**: `Number` `optional` The sound ID. If none is passed, all sounds in group are stopped.
 
+#### rate([value], [id])
+Speeds up/down an audio playback.
+Calling with no arguments will reset all howls to default rate.
+* **value**: `Number` `optional` The playback rate. If empty, will default to `1`.
+* **id**: `Number` `optional` The sound ID. If empty, all sounds in group get updated.
+
 #### Other howler.js methods
 If you need to use other howler.js [methods](https://github.com/goldfire/howler.js#methods)
 that are not included in this wrapper you can access the howler instance directly via `howler`

examples/react/src/players/FullControl.js

@@ -14,6 +14,7 @@ class FullControl extends React.Component {
  mute: false,
  volume: 1.0,
  seek: 0.0,
+ rate: 1,
  isSeeking: false
  }
  this.handleToggle = this.handleToggle.bind(this)
@@ -27,6 +28,7 @@ class FullControl extends React.Component {
  this.handleMouseDownSeek = this.handleMouseDownSeek.bind(this)
  this.handleMouseUpSeek = this.handleMouseUpSeek.bind(this)
  this.handleSeekingChange = this.handleSeekingChange.bind(this)
+ this.handleRate = this.handleRate.bind(this)
  }
 
  componentWillUnmount () {
@@ -111,6 +113,12 @@ class FullControl extends React.Component {
  }
  }
 
+ handleRate (e) {
+ const rate = parseFloat(e.target.value)
+ this.player.rate(rate)
+ this.setState({ rate })
+ }
+
  clearRAF () {
  raf.cancel(this._raf)
  }
@@ -193,6 +201,22 @@ class FullControl extends React.Component {
  </label>
  </div>
 
+ <div className='rate'>
+ <label>
+ Rate:
+ <span className='slider-container'>
+ <input
+ type='range'
+ min='0.1'
+ max='3'
+ step='.01'
+ value={this.state.rate}
+ onChange={this.handleRate}
+ />
+ </span>
+ </label>
+ </div>
+
  <Button onClick={this.handleToggle}>
  {(this.state.playing) ? 'Pause' : 'Play'}
  </Button>

examples/react/src/styles/index.css

@@ -172,3 +172,7 @@ a.source-link:hover {
 .slider-container input {
  vertical-align: bottom;
 }
+
+.rate {
+ margin-bottom: 0.5em;
+}

src/ReactHowler.js

@@ -41,6 +41,7 @@ class ReactHowler extends Component {
  loop: props.loop,
  preload: props.preload,
  volume: props.volume,
+ rate: props.rate,
  onend: props.onEnd,
  onplay: props.onPlay,
  onplayerror: props.onPlayError,
@@ -128,6 +129,23 @@ class ReactHowler extends Component {
  }
  }
 
+ /**
+ * Update playback rate (speed) of sound or group
+ * If no value given, apply default rate of 1
+ * If no id given, apply rate to all
+ * @param {Number} value = 1 [rate to apply]
+ * @param {Number} id = undefined [sound of group to update]
+ */
+ rate (value = 1, id = undefined) {
+ if (typeof value === 'number') {
+ if (id) {
+ this.howler.rate(value, id)
+ } else {
+ this.howler.rate(value)
+ }
+ }
+ }
+
  /**
  * Check the load status of the Howl
  * @return {String} [unloaded, loading or loaded]
@@ -231,6 +249,7 @@ ReactHowler.propTypes = {
  loop: PropTypes.bool,
  preload: PropTypes.bool,
  volume: PropTypes.number,
+ rate: PropTypes.number,
  onEnd: PropTypes.func,
  onPause: PropTypes.func,
  onPlay: PropTypes.func,
@@ -251,6 +270,7 @@ ReactHowler.defaultProps = {
  preload: true,
  loop: false,
  volume: 1.0,
+ rate: 1,
  onEnd: noop,
  onPause: noop,
  onPlay: noop,