鈍足ランナーのIT日記

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

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

Mobile browserで録音したblobをすぐに再生したい

Recorder.jsで録音したものを再生する。
以下のようなソースなんですが、PCのブラウザでは
blobを再生できるのですが、モバイルブラウザでは動作しません。

対処の仕方がわからないなぁ。一旦サーバーに挙げてから
URLを組み立てていけばいいんでしょうけど。

var blob;
// blob object has been created other logic.
function startPlaying(button) {
var url = URL.createObjectURL(blob);
audio = document.getElementById("audio");
audio.src = url;
audio.load();
audio.play();
}

とりあえず、以下のブログにはモバイル関連でためしたみたいなことが
書いてあるので、参考にしてみようと思います。

この辺も参考にしてみよう。

Recoreder.jsのハウリングに対応したから?

ただ、今回再生できなくなったのは、Recorder.jsのIssue#45を適用しているから?かもしれない??再度、destination指定を付けて試してみるかなぁ。

Turn off listening myself · Issue #45 · mattdiamond/Recorderjs · GitHub

動いていた時のRecorder.jsのサンプルをgithub-pagesにあげてみた。(これでモバイルブラウザで動作確認してみよう!)

こちらは、スピーカー出力あり(ハウリングする)
Live input record and playback
こちらは、スピーカー出力なし(ハウリングしない)
Live input record and playback

ソースはこちら
https://github.com/dokechin/Recorderjs/tree/gh-pages

再生にはdestination指定が必須とわかった場合・・。

フィルターかまして、ハウリングを抑えられないかためしてみる。


お手上げなのでIssueで報告

うーん。やっぱりできない。


バグなのか?


できた―

こんな感じで、Mobileでも動作確認とれた。

var reader = new FileReader();
reader.onload = function(e) {
au.src = e.target.result;
};
reader.readAsDataURL(blob);