html5デバイス-ブラウザーでのオーディオキャプチャ

最新のhtml仕様には多くの興味深い利点がありますが、その中の1つがdevice



要素です。 カメラやマイクなどのデバイスへのアクセスを提供します。 また、この要素はどのブラウザでもまだサポートされていませんが、これがWeb開発の未来です。

 interface HTMLDeviceElement : HTMLElement { attribute DOMString type; readonly attribute any data; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

HTML5はブラウザの次世代標準であり、 WHATWGの最新の開発であり、現在ブラウザ開発者によって実装されています。 仕様の開発には5年以上かかり、現在も開発中です。 HTML5は、ブラウザーをいくつかの新機能を備えた強力なアプリケーションプラットフォームに変える大きな一歩を踏み出しました。 WebSocketとサーバー送信イベントは柔軟なネットワークアプリケーション向けに開かれており、 メディア要素とキャンバス要素を使用して、新しいタイプのコンテンツをWebページにシームレスに埋め込むことができます。 HTMLの次のステップは何ですか？



上記の質問に対する答えは、新しいタイプの入力デバイスを制御することを可能にします。 device HTML要素は、マイクやWebカメラなどのデバイスへのアクセスを提供するデバイスへのアクセスを提供します。 以下のコードスニペットは、デバイス要素とStream APIを使用して短いオーディオクリップを記録する方法を示しています。 デバイス要素とその関連APIはどのブラウザでもまだ利用できず、ブラウザが表示される前に変更される可能性があることに注意してください。 いずれにしても、今のところ、コードは次のようになります。

 <p>Select device: <device type="audio_capture" id="media_device"></p> <input type="button" id="record_ctl_but" value="Record" disabled></input>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ページレイアウトには、デバイスタグとボタンで示されるデバイスへのリンクが含まれています。 デバイスタグ属性「タイプ」は、オーディオを録音するデバイスを選択するために「audio_capture」として指定されます。

 // in window.onload document.getElementById("media_device").onchange = function () { // ready to record audioStream = this.data; recordCtlBut.disabled = false; };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

デバイスが選択されると、変更イベントが発生します。このイベントでは、コールバックを切って変更に応答できます。 データプロパティは、選択したデバイスを表すStreamオブジェクトです。

 // in window.onload recordCtlBut = document.getElementById("record_ctl_but"); recordCtlBut.onclick = function () { if (!recorder) { // start recording recordCtlBut.value = "Stop"; recorder = audioStream.record(); // set the maximum audio clip length to 10 seconds recordTimer = setTimeout(stopRecording, 10000); } else stopRecording(); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このボタンは録音の開始と終了の両方に使用され、クリックすることで、碑文を再生から一時停止に、またはその逆に変更します。 recordメソッドを呼び出すと、Streamオブジェクトは記録を開始し、StreamRecorderオブジェクトを返します。 タイマーを使用して、記録時間を10秒に制限します。

 function stopRecording() { clearTimeout(recordTimer); var audioFile = recorder.stop(); useAudioFile(audioFile); // reset to allow new recording session recorder = null; recordCtlBut.value = "Record"; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

「停止」ボタンを押すか、10秒が経過すると、記録が停止します。 録音されたオーディオデータは、stopメソッドを呼び出すことによりStreamRecorderオブジェクトから取得されます。 録音されたオーディオデータは、Fileオブジェクト（ W3C File API ）として表されます 。 記録されたクリップをどのように処理するかはあなた次第です。おそらく、Webサーバーで公開するでしょう。



前述のように、オーディオデバイスのデバイス要素の数に制限はありません。 同様に、これを使用して、Webカメラなどの他のタイプのデバイスを選択できます。この場合、ビデオ要素を使用して表示内容を表示します。 その後、新しいファッションタグに基づいてオンライン会議を行うことができます。

結論として、ブラウザーのプラグインを使用してアクセスできる新しいデバイスを追加するために、デバイス要素とその関連APIが開かれていると言いたいです。 ブラウザは強力なプラットフォームになりつつ、アプリケーションの最高の移植性を活用しています。 仕様の開発を楽しみにしています。