SoundBoard has been designed and developed exclusively for RapidWeaver. You will not find the code or plugin for this stack anywhere else! SoundBoard was originally created for an educational website, where it was necessary to present several dozen short audio clips of bird song. By pressing the buttons, a user can listen to the short audio clips. It's a very 'tactile' stack that adds pleasant interaction to websites. Great for both children and adults!
The buttons are presented in the format of a responsive CSS grid. You can either apply the same background styling to all buttons or customise button backgrounds individually on a button-by-button basis. The completed result is a tidy and particularly user-friendly interface; which will work perfectly in any newer web browser. You can either use MP3 files added to RapidWeaver as resources, or link to MP3 files that are already stored in a public location online.
To start an MP3 track playing, simply click or press its button. To stop the MP3 track playing, press the button a second time. To prevent the obvious problem of multiple tracks playing simultaneously, SoundBoard will automatically stop the current track, if another one on the page begins playing. SoundBoard is also configured to stop playing if a user clicks elsewhere on the webpage (like a tab or another media player).
The buttons are presented in the format of a responsive CSS grid. You can either apply the same background styling to all buttons or customise button backgrounds individually on a button-by-button basis. The completed result is a tidy and particularly user-friendly interface; which will work perfectly in any newer web browser. You can either use MP3 files added to RapidWeaver as resources, or link to MP3 files that are already stored in a public location online.
To start an MP3 track playing, simply click or press its button. To stop the MP3 track playing, press the button a second time. To prevent the obvious problem of multiple tracks playing simultaneously, SoundBoard will automatically stop the current track, if another one on the page begins playing. SoundBoard is also configured to stop playing if a user clicks elsewhere on the webpage (like a tab or another media player).
Example
Here is a working example of the SoundBoard stack, configured to play some different English countryside sounds of various durations.Mallard
Buzzard
Watermill Race
Swallows
Walking
Chough
Tawny Owl
Winter Birds
Robin
Jay
Sparrows
Old 'Fergie'
Setup
Follow these instructions to get SoundBoard setup in your website.- Once installed into Stacks and RapidWeaver, open your Stacks Library. Drag and drop a copy of SoundBoard into your webpage.
- Click the blue button to add MP3 tracks. Link to MP3 files you add as resources or files stored online.
- It is suggested that you give each track a simple title. Drag and drop basic stacks (like a text stack) into the track area marked 'drag stacks here'.
- Select the main SoundBoard stack to change the style and layout of all buttons.
- If you want to apply unique background styling to each track, select the track in edit mode and choose to apply a custom background style.
- Preview your page to test the SoundBoard stack. Export or publish your webpage when done.
There is no limit imposed on the number of audio tracks you add to your SoundBoard stack or the duration of each audio track. However you must ensure the audio files are all saved in MP3 format, for the widest possible web browser compatibility. You can use free software like Miro Converter to easily generate MP3 files, from other audio or video file formats. Add your MP3 files as RapidWeaver resources or upload them to a web server. Obviously SoundBoard may be less-well suited towards long audio files, where the desirability to skip through audio with a scrub bar may be required. SoundBoard is ideal for shorter audio clips and samples.
