HTML5　バッテリーAPI

2014/06/16
HTML
,

HTML5では新たにバッテリーAPIが実装され、バッテリーの情報が取得出来るようになりました。
ただし、一部のブラウザにはまだ非対応だったりするので注意してください。
私の方で確認が出来ているのはFirefoxだけです。
ちなみに現在のあなたの環境はです。

充電量

現在の充電量：
充電量
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
現在の充電量：<span id="battery_level_val"></span>
 
<script>
var ele = document.getElementById("battery_level_val");
 
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
if (!battery){
    // 未対応
    ele.innerHTML= "未対応";
}else{
    // 対応
    ele.innerHTML= (battery.level * 100) + "%";
}
</ script>
battery.levelで取得出来ます。
注意としてはbattery.levelで取得した値は1=100%の充電量になりますので気をつけてください。

充電の状態の取得

現在：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
現在：<span id="battery_charging"></span>
 
<script>
var ele = document.getElementById("battery_charging");
 
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
if (!battery){
    // 未対応
    ele.innerHTML= "未対応";
}else{
    if (battery.charging){
        ele.innerHTML = "充電中";
    }else{
        ele.innerHTML = "非充電";
    }
}
</ script>
battery.charging = true|falseで充電の状態を受け取ります。
true = 充電中
false = 非充電

充電完了までの時間

充電完了時間：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
充電完了時間：<span id="charging_time"></span>
 
<script>
var ele = document.getElementById("charging_time");
 
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
if (!battery){
    // 未対応
    ele.innerHTML= "未対応";
}else{
    if(battery.chargingTime== "Infinity"){
        ele.innerHTML = "放電中のため取得できません。"
    }else{
        ele.innerHTML = battery.chargingTime + "秒";
    }
}
</ script>
返り値はdouble型で秒数で返ってきます。
放電中は【Infinity】が返ってくるので気をつけてください。

放電完了（電池が切れる）までの時間

放電完了時間：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
放電完了時間：<span id="discharging_time"></span>
 
<script>
var ele = document.getElementById("discharging_time");
 
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
 
if (!battery){
    // 未対応
    ele.innerHTML= "未対応";
}else{
    if(battery.discharging== "Infinity"){
        ele.innerHTML = "充電中のため取得できません。"
    }else{
        ele.innerHTML = battery.dischargingTime + "秒";
    }
}
</ script>
返り値はdouble型で秒数で返ってきます。
充電中は【Infinity】が返ってくるので気をつけてください。

イベントの発生

充電、放電の変化やバッテリーの変化が起こった時のイベントを受け取れます。

onchargingchange
充電、放電のイベント：event_type ‘chargingchange’

onchargingtimechange
充電時間のイベント：event_type ‘chargingtimechange’

ondischargingtimechange
放電時間のイベント：event_type ‘dischargingtimechange’

onlevelchange
バッテリーのイベント：event_type ‘levelchange’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
function changeBatteryStatus() {
    var msg = "バッテリー: " + battery.level * 100 + " %";
    if(battery.charging) {
        msg = "\r\n充電中";
        msg = "\r\n充電完了まで" + battery.chargingTime + "秒";
    }else{
        msg = "\r\n放電中";
        msg = "\r\n放電完了まで" + battery.discharging + "秒";
    }
}
 
// 充電、放電状態のイベント
battery.addEventListener("chargingchange", updateBatteryStatus);
// 充電時間のイベント
battery.addEventListener("onchargingtimechange", updateBatteryStatus);
// 放電時間のイベント
battery.addEventListener("ondischargingtimechange", updateBatteryStatus);
// バッテリーのイベント
battery.addEventListener("levelchange", updateBatteryStatus);

関連記事

HTML5 進捗状況を表示するプログレスバーを使ってみる
HTML5 getUserMedia APIでカメラが使ってみる
【HTML5】Geolocation APIを使用して位置情報を受け取る方法
ファイルアップ時に進捗を表示する方法
HTML5 バイブレーション API
Javascriptでtableタグに行、列の追加や削除を行う

コメントを残す