Page Example

FM Radio Sample Overview

The FM Radio sample application demonstrates how you can play the FM radio, scan frequencies to find stations, and manage stations and save them in the HTML local storage.

The following figure illustrates the screens of the FM Radio.

Figure: FM Radio screens

FM Radio screens

The application opens with the main screen, which shows the control panel of the radio:

  • In the circular widget, use the control buttons to change to the next or previous available station, change the current frequency ±0.1MHz, mute the radio, and scan the whole spectrum in order to find all available stations.

    The middle of the circular widget displays the currently played radio station.

  • In the footer, use the buttons to navigate between saved stations. The middle button opens the stations screen.

The stations screen displays all stations found after clicking Scan in the circular widget on the main screen. On this screen, you can manage the stations: remove or change the name of each station.

Prerequisites

  • Device with the FM Radio module

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/radio.js This file contains the methods for handling radio data.
js/models/stations.js This file contains the methods for handling radio station data.
js/views/main.js This file contains the methods related to the main screen UI.
js/views/popup.js This file contains the methods related to popups.
js/views/stationList.js This file contains the methods related to the stations screen UI.
templates/stationsListItem.tpl This file contains the template of the station list row. The HTML content of the list is generated from this template.

Implementation

The application can work only if the FM Radio module is supported on the device. Additionally, the external antenna has to be connected to the device in order to switch on the radio. The following functions checks whether the radio is supported and the antennal connected:

/* js/app.js */
function isRadioSupported() 
{
   var isSupported = false;

   try 
   {
      isSupported = tizen.systeminfo.getCapability('http://tizen.org/feature/fmradio');
   } 
   catch (error) 
   {
      console.error('No support for radio feature: ', error.message);
   } 
   finally 
   {
      return isSupported;
   }
}

function isAntennaConnected() 
{
   return tizen.fmradio.isAntennaConnected;
}

When the application starts, the init() methods check the application requirements, set up all event handlers, and initialize the radio:

/* js/app.js */
function init() 
{
   if (checkRequirements()) 
   {
      main.initialize(); /* Call views/main.js init() */
   }
}

/* js/views/main.js */
function init() 
{
   bindEvents(); /* Bind all events */
   refreshStationButtons(); /* Refresh main page UI */ 
   radio.initialize(); /* Initialize the radio */
}

After initializing, the radio is ready to be played. The following functionalities are provided:

  • Starting the radio:
    /* js/models/radio.js */
    function start(freq) 
    {
       if (radio.state !== radioState.SCAN) 
       {
          radio.start(freq);
       }
    }
    
  • Stopping the radio:
    /* js/models/radio.js */
    function stop() 
    {
       if (radio.state !== radioState.PLAY) 
       {
          radio.stop();
       }
    }
    
  • Muting the radio:
    /* js/models/radio.js */
    function setMuted(isMuted) 
    {
       radio.mute = isMuted;
    }
    
  • Scanning the whole frequency spectrum.

    The radio.scanStart() function takes an object containing 2 callbacks (onfrequencyfound and onfinished as the first parameter and the error callback as the second parameter. The onfrequencyfound callback is called for each found station, while the onfinished callback is called when the scanning is finished.

    /* js/models/radio.js */
    var scanCallback = 
    {
       onfrequencyfound: function onFrequencyFound(frequency) 
       {
          /* Found a frequency */
       },
        
       onfinished: function onFinished(frequencies) 
       {
          /* Finished finding all frequencies */
       }
    };
    
    function scanStart() 
    {
       if (radio.state === radioState.PLAY) 
       {
          radio.stop();
       }
       radio.scanStart(scanCallback, errorCallback);
    }
    
  • Stopping the scan.

    The radio.scanStop() function takes a success callback function and error callback function as parameters.

    /* js/models/radio.js */
    function scanStop() 
    {
       if (radio.state === radioState.SCAN) 
       {
          radio.scanStop(scanStopSuccess, errorCallback);
       }
    }
    
  • Finding the nearest station with a greater or lower frequency than the currently played one:

    Both the radio.seekUp() and radio.seekDown() functions take a success and error callback as parameters. The success callback is called with the found frequency.

    /* js/models/radio.js */
    
    /* Nearest station with a greater frequency */
    function seekUp(successCb) 
    {
       if (radio.state === radioState.PLAY) 
       {
          radio.seekUp(successCb, errorCallback);
       }
    }
    
    /* Nearest station with a lower frequency */
    function seekDown(successCb) 
    {
       if (radio.state === radioState.PLAY) 
       {
          radio.seekDown(successCb, errorCallback);
       }
    }