ブラウザにおける録音及び音声ファイルの生成、転送



調

Chrome, Firefox, Edge 


Chrome  HTML5  Web Audio API 使
(Web Audio API  API )
 Web Audio API
http://caniuse.com/#search=web%20audio


if (navigator.getUserMedia) {
  var bufferSize = 4096;
  var mediaStreamSource = audioContext.createMediaStreamSource(stream);
  var scriptProcessor = audioContext.createScriptProcessor(bufferSize, 1, 1);
  mediaStreamSource.connect(scriptProcessor);
  audioBufferArray = [];
  scriptProcessor.onaudioprocess = function(event){
   var channel = event.inputBuffer.getChannelData(0);
   var buffer = new Float32Array(bufferSize);
   for (var i = 0; i < bufferSize; i++) {
   buffer[i] = channel[i];
   }
   audioBufferArray.push(buffer);
  }
  scriptProcessor.connect(audioContext.destination);
}
else
{
  alert('このブラウザではWeb Audio APIがサポートされていません');
}

 https://developer.mozilla.org/ja/docs/Web/API/AudioContext/createMediaStreamSource

Firefox  navigator.getUserMedia  navigator.webkitGetUserMedia使



Internet Explorer 11 


Internet Explorer 11  Web Audio API Flash Player 使
Flash Player  Microphone 

Microphone  AS3
http://help.adobe.com/ja_JP/FlashPlatform/reference/actionscript/3/flash/media/Microphone.html


var mic:Microphone = Microphone.getMicrophone(); 
mic.setSilenceLevel(0, DELAY_LENGTH); 
mic.addEventListener(SampleDataEvent.SAMPLE_DATA, micSampleDataHandler); 
function micSampleDataHandler(event:SampleDataEvent):void { 
    while(event.data.bytesAvailable)     { 
        var sample:Number = event.data.readFloat(); 
        soundBytes.writeFloat(sample); 
    } 
}

 : 
http://help.adobe.com/ja_JP/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7d1d.html

Flash  Web Audio API 


 

Chrome, Firefox, Edge 


Chrome WAVRecorder.jsWAV JavaScript 
recorder.js
https://github.com/mattdiamond/Recorderjs

 jQuery  $.ajax() 使

 
var fd = new FormData();
fd.append('fname', 'test.wav');
fd.append('data', soundBlob);

$.ajax({
    type: 'POST',
    url: '/upload.php',
    data: fd,
    processData: false,
    contentType: false
}).done(function(data) {
       console.log(data);
});

Internet Explorer 11 


Internet Explorer 11  Flash Player 使WAV

WAV ActionScript 3.0 

使ActionScript 3.0
MicRecorder
http://www.bytearray.org/?p=1858

 
// 録音のボリュームレベルを設定
var volume:Number = .5;
// WaveEncoder クラスを使用して WAVエンコーダを生成
var wavEncoder:WaveEncoder = new WaveEncoder( volume );
// MicRecorder クラスを使用して 音声レコーダーを生成
var recorder:MicRecorder = new MicRecorder( wavEncoder );
// 録音開始
recorder.record();
// 録音終了
recorder.stop();


Chrome HTML5  Web Audio APIWAVChrome SSLHTTPInternet Explorer  Flash Player 使

マイク利用の可否

Chrome Edge Firefox IE 11
HTTP接続 NG OK OK OK
SSL(https)接続 OK OK OK OK

サンプル

HTML5版 (Chrome, Firefox, Edge 用)

HTTP接続
http://labs.irohasoft.com/webaudio/chrome/

SSL接続
https://labs.irohasoft.com/webaudio/chrome/

Flash版 (Internet Explorer 11 用)

HTTP接続
http://labs.irohasoft.com/webaudio/ie/

SSL接続
https://labs.irohasoft.com/webaudio/ie/

 

関連記事:

2 thoughts on “ブラウザにおける録音及び音声ファイルの生成、転送”

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください