Post on 24-Jan-2018
<body> <h1>こんにちは！せかい！</h1></body>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1">
<title>Hello World</title> <link rel="stylesheet" href="app.css"> <script src="app.js" defer></script></head>
body{ font-size: 18px; overflow: hidden; background-color: #00539F;}
h1{ font-size: 640%; line-height: .8; color: white;}
var handleDeviceLightEvent = function(event){ var indicator = document.querySelector("h1"); var lux = event.value;if(indicator != null){indicator.textContent = lux;
}}; window.addEventListener("devicelight", handleDeviceLightEvent);
"type": "privileged","permissions": { "device-storage:music": { "access": "readwrite", "description": "録音データの保存ため"
}, "audio-capture": { "description": "録音のため"
}, "desktop-notification": { "description": "保存できたかどうかを通知するため"
}}
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); });}
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); }); }}
function initializeStorage(){ storage = navigator.getDeviceStorage("music");}
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); }; }}
function initializeVisualizer(){ if(stream != null && ui.indicator != null){ update(); }}
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");
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(); } }
get volume(){ this.analyser.getByteFrequencyData(this.buffer); return scale(average(this.buffer), 0, 128);}
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);}
req.onsuccess = function(){ console.log(this.result + "に保存");
new Notification("IC Recorder", { body: "音声を " + filename +
" に保存しました。",
icon: "/icons/icon16x16.png" });};