Sounds System
Arwes uses a HOC to provide sounds to the components. This provider should be at the root of the application and receives the sounds settings. Some components play specific provided sounds when provided and you can create your own components to play your own sounds.
The library Howler is used to do the real playing. The provider takes configuration for the sounds and behind the scenes Howler plays them.
import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider, createTheme, SoundsProvider, createSounds, Button } from 'arwes'; const mySounds = { shared: { volume: 1, }, // Shared sound settings players: { // The player settings click: { // With the name the player is created sound: { src: ['/sound/click.mp3'] } // The settings to pass to Howler }, typing: { sound: { src: ['/sound/typing.mp3'] }, settings: { oneAtATime: true } // The custom app settings }, deploy: { sound: { src: ['/sound/deploy.mp3'] }, settings: { oneAtATime: true } }, } }; const App = () => ( <ThemeProvider theme={createTheme()}> <SoundsProvider sounds={createSounds(mySounds)}> <Button animate>Click me</Button> </SoundsProvider> </ThemeProvider> ); ReactDOM.render(<App />, document.querySelector('#root'));
The <Button />
component plays the click
sound when provided. It uses
the component <Frame />
which uses the deploy
sound when component is
animated and sound is provided. The typing
sound is used by the component
<Words />
when characters are being animated and rendered.
In each player provided, the sound
object are the settings to pass to Howler.
Read Howler docs for more details.
Play Sounds
You can create your own plays with your own components. You can use the
withSounds
HOC to get and play the provided sounds.
Suppose you want to play an alert sound when you click on a button:
import React from 'react'; import ReactDOM from 'react-dom'; import { ThemeProvider, createTheme, SoundsProvider, createSounds, withSounds, Button } from 'arwes'; const mySounds = { players: { alert: { sound: { src: ['/sound/alert.mp3'] } }, } }; const MyButton = withSounds()(props => ( <Button onClick={props.sounds.alert.play()} {...props} /> )); const App = () => ( <ThemeProvider theme={createTheme()}> <SoundsProvider sounds={createSounds(mySounds)}> <MyButton animate>Alert!</MyButton> </SoundsProvider> </ThemeProvider> );
When you click on the button you are gonna hear the alert sound played.