console.lealog();

@leader22のWeb系に関する勉強めもブログですのだ

Html5のバッテリーAPI

そんなんまで取得できるんですねw
まだまだ検討段階+バグあり+動作環境もなんだか制限ありみたいですけど、おもしろそー。

参考:window.navigator.battery - MDN

window.navigator.battery

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
alert("Battery status: " + battery.level * 100 + " %");

プロパティ

batteryオブジェクトには以下のプロパティがあります。

  • charging : チャージ中かどうか
  • chargingTime : 充電完了までの時間
  • dischargingTime : 電池0までの時間
  • level : 電池残量10段階

イベント

  • chargingchange
  • chargingtimechange
  • dischargingtimechange
  • levelchange

上記プロパティそれぞれに変化があったら発火するようです。

サンプル

上記リンクそのままです。

var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
function updateBatteryStatus() {
  alert("Battery status: " + battery.level * 100 + " %");

  if (battery.charging) {
    alert("Battery is charging");
  }
}

battery.addEventListener("chargingchange", updateBatteryStatus);
battery.addEventListener("levelchange", updateBatteryStatus);
updateBatteryStatus();

使い道

ベタに表示するだけだと、OSやらですでに表示できるしいらないよなぁーとも。
フルスクリーンのときとか?
ブラウザ以外で使えたらおもしろそうやのに。

電池残量少ない時だけ遭遇するイベントがあるとか、ゲーム的演出の材料にはなりそうw
節電ブームの時みたく、なんか画面暗くなるとか。