MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

This API is available on Firefox or Firefox OS for installed or higher privileged applications.

요약

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();
  }
})

Note: The audio is output through the normal audio channel available on the device.

주파수 변경하기

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

직접 변경하기

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

  • 주파수는 FMRadio.frequencyLowerBoundFMRadio.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 객체를 반환합니다.

이 메소드들은 frequencyLowerBoundfrequencyUpperBound 값에 도달할 때까지 반복적으로 더 높거나, 낮은 주파수를 찾습니다. 새로운 라디오 채널을 찾으면 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.

참고자료

문서 태그 및 공헌자

 이 페이지의 공헌자: kyungmin_yoo, mmnmm
 최종 변경: kyungmin_yoo,