たまたまOpusが気になってたら

Opusっていうコーデックがある。

https://twitter.com/sudosan/status/615819784001695744

見ての通りロイヤリティーフリーで幅広く扱える、WebRTCに不可欠¹とも言われる便利そうなコーデック。

ffmpegもネイティブにコーデックを含んでいるため結構扱いやすい。もちろんVLCで再生可。

性質上使い勝手もよく、たとえば吉里吉里Zにも対応できたり(吉里吉里Z開発ブログ参照)、それを作中音声、BGMに使っているプロダクトも出てきてるらしい。

ブラウザではChrome 27+.Firefox 15+ がサポートしている²らしいんだけど致命的な問題がある。モバイル端末はいまだサポートされていない。もちろんChrome 44 + Android 5.1³だって例外ではない。

さて、これをHTMLでaudioタグで使用しようとするとモバイルサポートには必然的に大体コーデックが必要となる。

とりあえずoggを使おうか。Apple系?しらんがな

ところがどっこい。これらのmimeはどちらもaudio/oggを指定する必要があるんだ。opusはaudio/opusってmimeもあるらしいが、これはブラウザが扱えないらしい。(非対応として)無視される。

つまり、以下のHTMLは思うように動かない。

これをPCのChromeでみてみよう。

ちゃんと再生できるよね。

でもこれをモバイルChromeからみてみると再生できない。

もちろんこれで再生自体は出来るようになるがこれだと上述の通りいずれからのアクセスでもoggのほうが使われる。

opusが使いたいのに意味ないじゃん!!

と、しばらく途方に暮れていたところにたまたま流れ込んできた@sudosanのブログエントリー『 videoタグについて 』をみて気付いた。

そう。mediaタグのtypeにはmimeに加えてcodecsを使用することができるのだ、と。

で、修正したHTMLがこんな感じ。

これでちゃんとモバイルからも再生できるようになった。

ちなみにCodecsを指定するとブラウザに判断を任せられる、という事実はちゃんとMDNにも書かれていた。

サンプルは今は上げる余裕が無いのであとで追加する。とりあえず公式から拝借したものを何も考えずにエンコかけた。