A tutorial of Firefox OS Apps' development. It consists of 3 parts: the development tools' installation, evolving Hello world app to an illuminometer app and development of IC recorder app on Firefox OS. You can acquire an overview of Firefox OS apps and their development with this slide.

4. Firefox Developer Edition

29. body{
font-size: 18px;
overflow: hidden;
background-color: #00539F;
}
h1{
font-size: 640%;
line-height: .8;
color: white;
}

32. var handleDeviceLightEvent = function(event){
var indicator = document.querySelector("h1");
var lux = event.value;
if(indicator != null){
indicator.textContent = lux;
}
};
window.addEventListener("devicelight", handleDeviceLightEvent);

37. "type": "privileged",
"permissions": {
"device-storage:music": {
"access": "readwrite",
"description": "録音データの保存ため"
},
"audio-capture": {
"description": "録音のため"
},
"desktop-notification": {
"description": "保存できたかどうかを通知するため"
}
}

38. function initializeAudioStream(){
navigator.getUserMedia({video: false, audio:true},
function(_stream){
console.log("ストリーム取得")
stream = _stream;
initializeRecorder();
initializeVisualizer();
ui.startButton.disabled = false;
}, function(error){
console.log(error);
});
}

39. function initializeRecorder(){
if(stream != null){
console.log("MediaRecorder 初期化")
recorder = new MediaRecorder(stream);
recorder.addEventListener("stop", function(event){
toggleRecordButtonState();
});
recorder.addEventListener("dataavailable", function(event){
console.log("blob取得");
saveCapturedData(event.data);
});
}
}

40. function initializeStorage(){
storage = navigator.getDeviceStorage("music");
}

41. function saveCapturedData(blob){
if(storage != null){
var filename = createFileName();
var req = storage.addNamed(blob, filename);
req.onsuccess = function(){
console.log(this.result + "に保存");
};
req.onerror = function(){
console.log(this.error.name + ":" +
this.error.message);
};
}
}

43. function initializeVisualizer(){
if(stream != null && ui.indicator != null){
update();
}
}

44. var audioContext= new AudioContext();
visualizer.sourceNode =
audioContext.createMediaStreamSource(stream);
visualizer.analyser = audioContext.createAnalyser();
visualizer.analyser.fftSize = 32;
visualizer.buffer =
new Uint8Array(visualizer.analyser.frequencyBinCount);
visualizer.sourceNode.connect(visualizer.analyser);
visualizer.audioContext = audioContext;

46. visualizer.canvas = ui.indicator;
visualizer.graphicsContext =
visualizer.canvas.getContext("2d");

47. function initializeVisualizer(){
if(stream != null && ui.indicator != null){
var audioContext= new AudioContext();
visualizer.sourceNode = audioContext.createMediaStreamSource(stream);
visualizer.analyser = audioContext.createAnalyser();
visualizer.analyser.fftSize = 32;
visualizer.buffer = new Uint8Array(visualizer.analyser.frequencyBinCount);
visualizer.sourceNode.connect(visualizer.analyser);
visualizer.audioContext = audioContext;
visualizer.canvas = ui.indicator;
visualizer.graphicsContext = visualizer.canvas.getContext("2d");
update();
}
}

48. get volume(){
this.analyser.getByteFrequencyData(this.buffer);
return scale(average(this.buffer), 0, 128);
}

49. function doUpdateVisualizer(){
var gc = visualizer.graphicsContext;
gc.fillStyle = "white";
gc.fillRect(0, 0,
visualizer.canvas.width,
visualizer.canvas.height);
var h = visualizer.volume * visualizer.canvas.height;
gc.fillStyle = "green";
gc.fillRect(0, visualizer.canvas.height - h,
visualizer.canvas.width,
h);
}

50. req.onsuccess = function(){
console.log(this.result + "に保存");
new Notification("IC Recorder", {
body: "音声を " + filename +
" に保存しました。",
icon: "/icons/icon16x16.png"
});
};