Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Ionic 3 Soundboard

This app takes a collection of sounds from a custom URL. That way sounds can be added and removed at will, while still keeping the app code the same. The app makes use of Ionic 3 with TypeScript.

Note: Some of the Ionic Native features (such as caching) add quite a bit of complexity to the code. For a more simple version of the app without these native features you can check out the 'simple' branch.


Assumes that Homebrew is installed. For alternative installation options for Node, refer to their website

brew install node
npm install -g cordova
npm install -g ionic


Assumes that Git is installed along with the prerequisites.

git clone
cd ionic-soundboard
npm install

Then run it locally with any of the following

ionic serve --lab
ionic cordova run ios
ionic cordova run android

The first one running it in the browser, while the others run on a device or emulator. Note that Ionic Native features (such as caching) are disabled in the browser.


The app is a simple soundboard, with a list of sounds, which can be played, and stopped when they are playing. In the soundboard, you have the option to mark certain sounds as favourites, moving them to the top of the list. This way, you can have all your favourite sounds right there at your fingertips. When running on a native platform (iOS, Android, etc.), every sound is cached for seven days when playing it. That way the sounds can still be accessed when there is no internet connection. Local caching can be enabled or disabled, and the cache can be cleared in the preferences menu.


Title & Default Preferences

Open ionic-soundboard/src/pages/soundboard/soundboard.ts to edit the title variable.

Open ionic-soundboard/src/services/preferences.service.ts to edit the default preferences:

  return {
    baseUrl: '',
    soundsFile: '/sounds.json',
    cachingEnabled: true

Edit the default values to point to your own base url and your own sounds file.

Icon & Splash Screen

Replace ionic-soundboard/resources/icon.png and ionic-soundboard/resources/splash.png with your own files. Then run:

ionic cordova resources ios
ionic cordova resources android


There should be a file at the path specified by preferenceService.get('baseUrl') + preferenceService.get('soundsFile') containing a json array with objects in the following format:

    "title": "Sample Title",
    "file": "/sample_sound.mp3"

For example looks like this:

        "title": "Bird",
        "file": "/res/bird.mp3"
        "title": "Cat",
        "file": "/res/cat.mp3"
        "title": "Cow",
        "file": "/res/cow.mp3"
        "title": "Dog",
        "file": "/res/dog.mp3"
        "title": "Dolphin",
        "file": "/res/dolphin.mp3"
        "title": "Frog",
        "file": "/res/frog.mp3"
        "title": "Pig",
        "file": "/res/pig.mp3"

Resulting in this soundboard: Soundboard


Please refer to the ContactApp Wiki for a comprehensive guide to testing, building, and publishing Ionic apps. Do note that the ContactApp was written in an older version of Ionic.