WebFM API

요약

WebFM API를 이용하면 FM 라디오를 사용할 수 있습니다. 라디오를 켜고, 끄거나 라디오 방송국을 변경 할 수 있습니다. FMRadio 객체의 navigator.mozFMRadio 속성을 통해 사용할 수 있습니다.

라디오 켜기/끄기

기본적으로 FMRadio.enable() 메소드로 라디오를 켜고, FMRadio.disable() 메소드로 라디오를 끌 수 있습니다.

라디오를 켜기 전에 안테나 사용 가능 여부를 체크하는 것이 좋습니다(안테나가 없으면 내장된 라디오가 신호를 받을 수 없습니다). FMRadio.antennaAvailable 속성으로 안테나 사용 가능 여부를 확인할 수 있습니다. 모바일 기기에서는 헤드폰 케이블이 안테나 역할을 하는데, 헤드폰 케이블 연결 상태에 따라 안테나 사용 여부가 변경되면 antennaavailablechange 이벤트가 발생됩니다.

라디오를 켜기 위해서 주파수 번호(MHz 단위)를 FMRadio.enable() 메소드에 넘겨 실행합니다.

// The frequency of the radio station
// to listen express in MHz
var frequency = 99.1;
var radio = navigator.mozFMRadio;

if (radio.antennaAvailable) {
  radio.enable(frenquency);
} else {
  alert("You need to plug your headphone");
}

radio.addEventListener('antennaavailablechange', function () {
  if (radio.antennaAvailable) {
    radio.enable(frenquency);
  } else {
    radio.disable();
  }
})

주파수 변경하기

주파수는 직접 또는 자동으로 변경할 수 있습니다. 현재 내장 라디오의 주파수는 FMRadio.frequency 속성으로 알 수 있으며 해당 속성 값은 MHz 단위의 숫자로 표현합니다.

직접 변경하기

FMRadio.setFrequency() 메소드는 새로운 주파수를 할당할 때 사용합니다. 설정할 수 있는 주파수는 제한적입니다. 메소드 호출 후 성공 또는 실패 상황을 제어하는 DOMRequest 객체를 반환합니다. 주파수는 다음의 요구사항을 만족해야 합니다.:

• 주파수는 FMRadio.frequencyLowerBound와 FMRadio.frequencyUpperBound에 정의된 범위 내에 있어야 합니다. 이 범위를 벗어나면 에러가 반환됩니다.
• 주파수는 FMRadio.channelWidth에 정의된 값만큼 이동해야 합니다. 그렇지 않으면 주파수는 반올림됩니다. 예를 들어 100MHz가 정상적인 주파수이고 channelWidth가 0.2로 설정된 경우, 100.15 주파수로 설정하더라도 주파수는 100.2로 할당됩니다.

var change = radio.setFrequency(frequency);

change.onerror = function () {
  var min = radio.frequencyLowerBound;
  var max = radio.frequencyUpperBound;
  console.warn('The frequency must be within the range [' + min + ',' + max + ']');
}

change.onsuccess = function () {
  console.log('The frequency has been set to ' + radio.frequency);
}

자동으로 찾기

WebFM API를 사용하면 편리하게 라디오 채널을 검색할 수 있습니다. FMRadio.seekUp()(현재 주파수보다 높은 채널 찾기) FMRadio.seekDown() 메소드를 사용합니다. 현재 주파수보다 높거나, 낮은 주파수의 라디오 채널을 찾을 때 사용합니다. 이 메소드들은 호출 후에 성공/실패를 제어할 수 있는 DOMRequest 객체를 반환합니다.

이 메소드들은 frequencyLowerBound나 frequencyUpperBound 값에 도달할 때까지 반복적으로 더 높거나, 낮은 주파수를 찾습니다. 새로운 라디오 채널을 찾으면 frequencychange 이벤트가 발생되고 현재 주파수로 변경됩니다.

동시에 두 메소드를 실행할 수 없으며(동시에 상위/하위 채널을 찾을 수 없습니다) 동시에 실행할 경우 에러가 반환됩니다. 더 이상 찾을 필요가 없을 때 FMRadio.cancelSeek() 메소드를 호출합니다. 이 메소드 역시 DOMRequest 객체를 반환합니다.

var radio   = navigator.mozFMRadio;
var seeking = false;
var UP      = document.querySelector("button.up");
var DOWN    = document.querySelector("button.down");

// When the frequency change, the seek
// functions automatically stop to seek.
radio.onfrequencychange = function () {
  seeking = false;
}

function seek(direction) {
  var cancel, search;

  // If the radio is already seeking
  // we will cancel the current search.
  if (seeking) {
    var cancel = radio.cancelSeek();
    cancel.onsuccess = function () {
      seeking = false;

      // Once the radio no longer seek,
      // we can try to seek as expected
      seek(direction);
    }

  // Let's seek up
  } else if (direction === 'up') {
    // Just to be sure that the radio is turned on
    if (!radio.enabled) {
      radio.enable(radio.frequencyLowerBound);
    }
    search = radio.seekUp();

  // Let's seek up
  } else if (direction === 'down' {
    // Just to be sure that the radio is turned on
    if (!radio.enabled) {
      radio.enable(radio.frequencyUpperBound);
    }
    search = radio.seekDown();
  }

  if (search) {
    search.onsuccess = function () {
      // Ok, we are seeking now.
      seeking = true;
    };
    search.onerror = function () {
      // Something goes wrong... ok, let's try again.
      seek(direction);
    }
  }
}

UP.addEventListener('click', function () {
  seek('up');
});

DOWN.addEventListener('click', function () {
  seek('down');
});

표준

Not part of any specification.

참고자료

• FMRadio
• The FM app on Gaïa