Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/leoasis/react-sound
Sound component to play audio in your web apps
https://github.com/leoasis/react-sound
Last synced: 14 days ago
JSON representation
Sound component to play audio in your web apps
- Host: GitHub
- URL: https://github.com/leoasis/react-sound
- Owner: leoasis
- License: isc
- Created: 2015-06-11T15:56:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2024-08-19T08:12:01.000Z (3 months ago)
- Last Synced: 2024-10-21T17:58:22.870Z (22 days ago)
- Language: JavaScript
- Homepage:
- Size: 59.6 KB
- Stars: 486
- Watchers: 11
- Forks: 80
- Open Issues: 35
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# react-sound
[](https://www.npmjs.com/package/react-sound)
Sound component to play audio in your web apps. Backed by the mighty [soundmanager2](https://github.com/scottschiller/SoundManager2) library.
## Example
```js
// In your React component:
render() {
return (
);
}
```
## Sound as a component?
Yes! It's really easy to use sounds in your app as part of the component tree in your React app.
* **Want to start playing a sound?** Just render it with a `PLAYING` status.
* **Want to remove a playing sound?** Just stop rendering it.
* **Want to sync it with your app state?** Render it using props and state, just as with any React component!
## How to install
`npm install react-sound --save`
## How to use
```js
var React = require('react');
var Sound = require('react-sound').default;
// ... or using import:
import React from 'react';
import Sound from 'react-sound';
class MyComponentWithSound extends React.Component {
render() {
return ; // Check props in next section
}
}
```
**Note:** By default, a restriction on mobile prevent you from playing multiple sounds. To avoid this, you need to set the `ignoreMobileRestrictions` property to `true` when setting up [soundManager2](http://www.schillmania.com/projects/soundmanager2/doc/).
### Props
* *url (string)*: The url of the sound to play.
* *playStatus (Sound.status.{PLAYING,STOPPED,PAUSED})*: The current sound playing status. Change it in successive renders to play, stop, pause and resume the sound.
* *playFromPosition (number)*: Seeks to the position specified by this prop, any time it changes. After that, the sound will continue playing (or not, if the `playStatus` is not `PLAYING`). Use this prop to seek to different positions in the sound, but not use it as a controlled component. You should use either this prop or `position`, but not both.
* *position (number)*: The current position the sound is at. Use this to make the component a controlled component, meaning that you must update this prop on every `onPlaying` callback. You should use either this prop or `playFromPosition`, but not both.
* *volume (number)*: The current sound's volume. A value between 0 and 100.
* *playbackRate (number)*: Number affecting sound playback. A value between 0.5 and 4 of normal rate (1).
* *autoLoad (boolean)*: If the sound should start loading automatically (defaults to `false`).
* *loop (boolean)*: If the sound should continue playing in a loop (defaults to `false`).
* *onError (function)*: Function that gets called when the sound fails to load, or fails during load or playback. It receives the arguments `errorCode` and `description` with details about the error.
* *onLoading (function)*: Function that gets called while the sound is loading. It receives an object with properties `bytesLoaded`, `bytesTotal` and `duration`.
* *onLoad (function)*: Function that gets called after the sound has finished loading. It receives an object with property `loaded`, a boolean set to true if the sound has finished loading successfully.
* *onPlaying (function)*: Function that gets called while the sound is playing. It receives an object with properties `position` and `duration`.
* *onPause (function)*: Function that gets called when the sound is paused. It receives an object with properties `position` and `duration`.
* *onResume (function)*: Function that gets called while the sound is resumed playing. It receives an object with properties `position` and `duration`.
* *onStop (function)*: Function that gets called while the sound playback is stopped. It receives an object with properties `position` and `duration`.
* *onFinishedPlaying (function)*: Function that gets called when the sound finishes playing (reached end of sound). It receives no parameters.
* *onBufferChange (function)*: Function that gets called when the sound buffering status changes. It receives a single boolean representing the buffer state.
## How to contribute
Feel free to fork and send PRs or issues, be it for features, bug fixes, or documentation!