読者です 読者をやめる 読者になる 読者になる

鈍足ランナーのIT日記

走るのが好きな5流のITエンジニアのブログ。

趣味の範囲は広いけど、どれも中途半端なクソブロガー楽しめるWebアプリを作ってあっと言わせたい。サーバーサイドPerl(Mojolicious)、クライアントサイドVue.js。Arduinoにも触手を伸ばす予定。

firefoxでaudioエレメントを動的に作成したい

audio - HTML5 Microphone capture stops after 5 seconds in Firefox - Stack Overflow

下記のようなエレメントを動的にjavascript でつくりたいのですが、うまくできない。

以下のようにajaxのsuccessに記述しておいて、動的に audio要素を生成している。

    success: function(data){
      console.log(data.id);
      var url = "/audio/" + data.id + ".wav";
      var li = document.createElement('li');
      var au = document.createElement('audio');
      au.setAttribute("controls",true);
      au.setAttribute("src",url);
      au.setAttribute("type","audio/wav");
      li.appendChild(au);
      var recordingslist = document.getElementById("recordingslist");
      recordingslist.appendChild(li);
    },

どうも、audioのurlに対してGETでとりに行ってしまうからと思われる?! でも、同じくgetでとりに行くchromeでは動くのですが?!

コンソールにこんなワーニングが表示されるし。

f:id:kechiya:20141026052119p:plain

こちらのリンクのデモはfirefoxでうごくしなぁ。

Introduction to the HTML5 audio tag javascript manipulation « Position Absolute - Waves of front-end, product and entrepreneurship articles

配信側のContent-Typeに問題か?

結局Mojoliciousでwavファイルを配信するときのContent-Typeがtext/plainとなってしまうのが 問題のようです。mp3にしたらちゃんと表示された。mp3だとMojoliciousはContent-typeをaudio/mpegで返します。

Mojolicious::Typesというモジュールにwavは切られていないのでそのせいなのか? https://metacpan.org/pod/Mojolicious: なぜ、wavが設定されていないのだろうか?

MojoliciousのChangeLog

5.31  2014-08-19
  - Improved Mojolicious::Static to allow custom content types.
  - Improved url_for performance.

どうも、Content-Typeがカスタマイズ可能なように5.31に変更になっているようで。 その設定方法を調べればよろしそうです。

http://mojolicio.us/perldoc/Mojolicious

# Add custom MIME type
$app->types->type(wav => 'audio/wav');

結局、上記のように変更したらうまくできました。