HTML5で<audio>と<source>を使ってもモバイルデバイスで再生できない！

Question

#困っていること

PCのChromeでは再生されるm4aファイルが、Android9のChromeでは再生できない。
#試したこと

<audio preload="metadata" autoplay loop controls>
<source src="http://*.m4a" type="audio/aac">
</audio>

#現状
変わらずPCでは再生できるが、Androidでは再生できない。
再生ボタンを押すと、一時停止に替わるが、その後再生に失敗し、再生ボタンに戻ってしまう。

#WEB Audio APIもあるらしいけど
記事もいくつか読んでみたけど、いまいち理解できなくて諦めかけている。

Comments

[yoshinavi]

現在のモバイルブラウザで「.m4a」が再生不可の場合、対応ファイルでの再生は、ダメなのですか？
「.m4a」の再生検証のサイト等でないかぎり、一般的には、複数用意することが多いかと思います。

[phpsyoshinsya]

確かに、.mp3に変換してしまう方法が一番楽だとは私も思います。時間の制約もないので、この際に、.m4aを再生させる方法をマスター（はできないか？）したいと思ったのですが、かなり無理があるということでしょうか?

[yoshinavi]

<audio><source>の設定は、どのファイルも同じなので、回答にもあるように現状では、モバイル版での完全サポートを待つ、または、代替ファイルを用意する、のどちらかではないでしょうか。

[phpsyoshinsya]

すみません、質問の何を変更または追記することが求められているのか、理解できていません。

[yoshinavi]

分かりづらいコメントでスミマセン。質問の変更や追記を求めてはいません。

モバイルブラウザが「.m4a」の再生に対応するまで待つか、「.mp3」等のモバイルブラウザで再生可能なファイルを用意するしか現状では無いのでは？との、ことを言いたかったまでです。

[phpsyoshinsya]

なるほどですよね。あれからいろいろ調べてみたのですが、.mp3を用意することが、早道に見えてしまって悔しいです。

[退会済みユーザー]

mp3用意が一番楽だしいーとおもうんだけどなー

Answer 1

<audio>で対応できるファイルの種類は、一般的にmp3、webm、oggあたりです。
mp3を使えば、ほぼほぼ問題ないです。
m4aを再生できるブラウザはあるかもしれないですが、ブラウザで再生するのには適していません。
例えばこういうところの変換ツールで、web最適化をしましょう。

https://developer.mozilla.org/ja/docs/Web/HTML/Supported_media_formats#Browser_compatibility
https://ja.wikipedia.org/wiki/HTML5%E3%82%AA%E3%83%BC%E3%83%87%E3%82%A3%E3%82%AA

Comments

[phpsyoshinsya]

どうしてもm4aをWEBに埋め込んで再生したい場合には？どうするのがいいですか？

[maisumakun]

どうしようもありません。ファイル形式を変換するのが適切かと思います。

[oikashinoa]

agg ではなく ogg では？

[kszk311]

＞oikashinoaさん
そうでしたね。ありがとうございます、ただの間違いでした。oggに直しておきました。

Answer 2

ただ単にchromeでもデスクトップ版はサポートして、モバイル版は未サポートなだけでは？

Browser_compatibility

Comments

[phpsyoshinsya]

もっともクロスブラウザ・クロスOSにたけている方法はなんですか？

[oikashinoa]

Browser_compatibility のリンク先を見ました？

再生させたい音源フォーマット、対象ブラウザから自分で考えるべきですよ。

どうしてもm4aである必要があるならブラウザを絞るべきだし、多くのユーザーに聞いて欲しいなら出来るだけサポートブラウザが多いフォーマットを選ぶ。

m4aを再生させたいのが、要件だったのではないのですか？

あと、kszk311さんのコメントを参考にしてください。

[phpsyoshinsya]

もちろん、時間に制約があれば.mp3を用意して、さっさと対応完了にします。ブラウザコンパティビリティは、須知です。。PHPも組むので、これを理解せずには通り抜けられないと思ってはいます。

Answer 3

方向性が違う回答なので、別にしました。

クライアントサイドで変換するのがよいのかも。
以下、参考程度ですが。(可能性があるものを書き連ねてます)

howler.jsでなんとかなるかも知れない。

• 再生はブラウザに丸投げかな？コンバートしてそうにないのです。誰かドキュメント読んでください

ffmpeg.js(videoconveryet.js)でmp3に変換

aurora.jsならデコード可能っぽい。

Comments

[phpsyoshinsya]

なるほど、いずれにしても最後は.mp3に持ってこないとクロスブラウザ・クロスOSは無理ってことですね。それじゃあ、HTML5は諦めて、<object>で.m4aに対応してる埋め込みプレイヤーのIDと書き方とかについて調べた方がいいですか？それともさっさと諦めて.mp3にしとけって感じでしょうか?

[oikashinoa]

まずは<object>が要件に合うか調べてみても損は無いと思います。

[phpsyoshinsya]

.m4a対応埋め込みプレイヤーの名前だけでもご教授いただけるとうれしいのですが?それを求めすぎと言われればその通りですが…。

[oikashinoa]

> どうしてもm4aである必要があるならブラウザを絞るべきだし、多くのユーザーに聞いて欲しいなら出来るだけサポートブラウザが多いフォーマットを選ぶ。

1. まずはご自身の方針を決めて下さい。どっちが正しいのかはそちらの状況次第なので。
2. <object>が要件に合うか調べてみました？

やることやってから聞いたほうがいいですよ。

[phpsyoshinsya]

はい、<object><embed>が適応できそうな気がするのですが、プレイヤーの名前とバージョンが指定できないと、適切なIDと埋め込みURLが取得できず、困っています。

[oikashinoa]

ブラウザコンパティビリティを求めているのに、<object>を使ってプレイヤーを必要とさせるのは矛盾してませんか？

[oikashinoa]

aurora.jsならデコード可能っぽいです。一度しらべてみてください。