QA@IT

WEB上で録音・追加録音・再生が出来る画面の作成

8003 PV

WEB上で録音・追加録音、再生が出来る画面を作りたく、HTMLとJavaScriptで実現できないか模索中です。
ブラウザやOSの種類に制限されない機能として実現したいのですが、実現方法や参考サイトを教えてください。
追加録音は音声を録音した音声ファイル(wav形式)の最後尾に、続けて録音をしていく機能を実現したいと考えています。
イメージとしては
http://phpjavascriptroom.com/?t=strm&p=jplayer#a_audio1
で実現している音楽プレイヤーに録音、追加録音機能が追加されたものを目指しています。
再生機能は上記のサイトを参考にすればよいと考えていますが、録音・追加録音の実現方法がどうしてもわからずこの場をお借りして質問をさせていただきました。
当方WEB開発の経験がなく、説明不足もあるかと思いますが何卒よろしくお願い致します

-追記-
上記の「ブラウザやOSの種類に制限されない」についてはイメージに挙げたJPlayerがサポートしているブラウザでの動作が可能であることを望んでいます。
最低でもWindows(Chrome, IE), OSX(Safari)はサポートしたいと考えています。
説明不足でしたので追記させていただきました。

回答

IE では確認してませんが、Chrome、Safari なら Web Audio API でできそうな気がします。
実装例は "web audio recording" などで検索すると色々でてきます。

たとえば下記のページではマイクから録音して wav でダウンロードできます。

このサイトでの説明 によれば Recorder.js というライブラリを使っているようです。

Web Audio API に関して知りたいのであれば、O'Reilly Japan から出版されている Web Audio API が基本的な事項を学ぶには良いので、ご一読をおすすめします。

編集 履歴 (0)

WEB上で録音・追加録音、再生が出来る画面を作りたく、HTMLとJavaScriptで
実現できないか模索中です。ブラウザやOSの種類に制限されない機能として
実現したのですが、実現方法や参考サイトを教えてください。

100% 不可能とまで言い切る自信はないですが、「HTMLとJavaScriptで」「ブラウザやOSの種類に制限されない」はどうやっても無理だと思います。

可能性があるとすると、自分が思いつくのは ActiveX プラグインぐらいですが、OS とブラウザ依存にならざるを得ないです。

編集 履歴 (0)
  • SurferOnWww様 ご回答ありがとうございます。「制限されない」についてですが、イメージとして挙げさせて頂きましたJPlayerが当方が望む汎用性を持っておりましたので、実現可能かと考えておりました。本文に説明不足でしたので追記しておきたいと思います。ありがとうございました。
    ちなみにActiveXプラグインだとIE固定になるのでは?と思うのですが認識の誤りでしょうか?
    -
  • 「OS とブラウザ依存にならざるを得ない」=「OS は Windows で、ブラウザは IE になる」と言う意味です。 -
  • やはりそうですよね。ありがとうございます。
    もう少し模索しようと思います。
    -
ウォッチ

この質問への回答やコメントをメールでお知らせします。