Page Example

Sound Manager Sample Overview

Mobile Web

Related Info

The Sound Manager sample application demonstrates how you can manage custom sound profiles. A sound profile is a structure consisting of a unique name and a list of volume values of all available sound types, such as ringtone, notification, and alarm.

The following figure illustrates the screens of the Sound Manager.

Figure: Sound Manager screens

Sound Manager screens

The application opens with the main screen, which lists the created sound profiles. The profile without the Set button is currently active.

On the main screen:

  • To active a profile, click Set.

    The system sound settings are set up with the profiles values.

  • To add a new profile, click + in the top left corner.

    The new profile is initialized with the current system sound settings and you can specify its name.

  • To modify an existing profile, click it in the list.

    The profile details screen opens:

    • To change the values of various sound types, use the sliders. When an active profile is changed, the changes are applied directly to the system settings.
    • To restore the profile values to the state when the screen opened, click Reset.
    • To delete the profile, click Delete.

Source Files

You can create and view the sample application project including the source files in the IDE.

The application uses a simple MVC (Model-View-Controller) architectural model.

File name Description
config.xml This file contains the application information for the platform to install and launch the application, including the view mode and the icon to be used in the device menu.
css/ This directory contains the CSS styling for the application UI.
index.html This is a starting file from which the application starts loading. It contains the layout of the application screens.
js/ This directory contains the application code.
js/core/ This directory contains the application framework.
js/models/ This directory contains the application model modules.
js/views/ This directory contains the implementation code for the application views.
templates/ This directory contains the templates of the list items.

Implementation

To implement the main module managing custom sound profiles:

  1. Define variables:
    • currentProfileId: Object containing the current profile values
    • profiles: Array of all profiles
    • SOUND_TYPES: Array containing all available sound types
    • activeProfileId: ID of the active profile or null if there is no active profile
    var currentProfile = {},
        profiles = [],
        SOUND_TYPES = 
        [
           'SYSTEM',
           'NOTIFICATION',
           'ALARM',
           'MEDIA',
           'VOICE',
           'RINGTONE'
        ],
        activeProfileId = null;
    

    The sound profile is represented by an object with the following fields:

    • id: Unique identifier of the profile
    • title: Title of the profile
    • XXX: Value of the XXX sound type, where XXX is a SOUND_TYPES value
    {
       id: 1313,
       title: 'Custom Profile',
       SYSTEM: 0.1,
       NOTIFICATION: 0.2,
       ALARM: 0.3,
       MEDIA: 0.5,
       VOICE: 0,
       RINGTONE: 1
    }
    
  2. Initialize the application by first loading the current system profile and storing it in the currentProfile object. Next, register a changing volume listener that updates the currentProfile object and clears the activeProfileId variable (volume is changed so the current system profile is different than the active profile; therefore, the active profile stops being active).

    function init() 
    {
       var i = 0,
           soundType = null;
    
       for (i = 0; i < SOUND_TYPES.length; i += 1) 
       {
          soundType = SOUND_TYPES[i];
          try 
          {
             currentProfile[soundType] = tizen.sound.getVolume(soundType);
          } 
          catch (e) 
          {
             console.error(e.message);
          }
       }
    
       try 
       {
          tizen.sound.setVolumeChangeListener(onVolumeChanged);
       } 
       catch (e) 
       {
          console.error(e.message);
       }
    }
    
    function onVolumeChanged(soundType, volume) 
    {
       if (currentProfile[soundType] !== volume) 
       {
          currentProfile[soundType] = volume;
          if (activeProfileId !== null) 
          {
             activeProfileId = null;
          }
       }
    }
    
  3. Define the setActive() method that sets a profile active:

    function setActive(id) 
    {
       if (activeProfileId !== id) 
       {
          changeSystemProfile(getProfile(id));
          activeProfileId = id;
       }
    }
    
    function getProfile(id) 
    {
       var i = 0,
           profile = null;
    
       for (i = 0; i < profiles.length; i += 1) 
       {
          profile = profiles[i];
          if (profile.id === id) 
          {
             return profile;
          }
       }
    
       return null;
    }
    

    The changeSystemProfile() method changes the system profile values to values from the specified profile:

    function changeSystemProfile(profile) 
    {
       var i = 0,
           soundType = null;
    
       for (i = 0; i < SOUND_TYPES.length; i += 1) 
       {
          soundType = SOUND_TYPES[i];
          changeSystemSoundVolume(soundType, profile[soundType]);
       }
    }
    
    function changeSystemSoundVolume(soundType, volume) 
    {
       try 
       {
          currentProfile[soundType] = volume;
          tizen.sound.setVolume(soundType, volume);
       } 
       catch (e) 
       {
          console.error('Setting ' + soundType + ' error: ' + e.message);
       }
    }
    
  4. Define the createProfile() method that creates a new profile with values from the system settings. The method obtains the title of the created profile. The following code takes advantage of the fact that sound settings are contained in the currentProfile object.

    function createProfile(title) 
    {
       var currentProfileCopy = JSON.parse(JSON.stringify(currentProfile)),
           id = profiles.length ? profiles[profiles.length - 1].id + 1 : 0;
       currentProfileCopy.title = title;
       currentProfileCopy.id = id;
       profiles.push(currentProfileCopy);
    }
    
  5. Define the updateProfile() method to update the specified profile. In this method, you can use the functions defined in the previous steps.

    The method obtains the ID of the profile that you want to change, the name of the sound type, and the new value.

    function updateProfile(profileId, soundType, volume) 
    {
       var profile = getProfile(profileId);
    
       if (profile) 
       {
          profile[soundType] = volume;
          if (profile.id === activeProfileId) 
          {
             changeSystemSoundVolume(soundType, volume);
          }
       }
    }
    
  6. Define the deleteProfile() method that deletes the profile with the specified ID.
    function deleteProfile(id) 
    {
       var index = getProfileIndex(id);
       if (index !== -1) 
       {
          profiles.splice(index, 1);
       }
    }
    
    function getProfileIndex(profileId) 
    {
       var i = 0;
    
       for (i = 0; i < profiles.length; i += 1) 
       {
          if (profiles[i].id === profileId) 
          {
             return i;
          }
       }
    
       return -1;
    }