html5のオーディオ要素が効かない場合がある

締切済

質問者：gasfdsafs
質問日時：2012/12/14 02:21
回答数：2件

html5でaudioタグを使って、ユーザーのことなる環境に配慮してマルチsourceにすると、再生できないブラウザがでてきてしまいます。

たとえば先日試した環境ですと、operaとfirefoxはOKでsafariが駄目でした。
駄目というのは、sourceの順番が変わると再生がされないということです。
つまり１番目に置く以外は再生されないということです。

また、ネットで検索してみると、http://www.html5.jp/html5doctor/native-audio-in- … のようにまったく逆の症状になるケースもあるようです。おそらく同じブラウザでもバージョンが違うからでしょう。（リンクのブラウザは私が試したのより昔のブラウザです）

これらから推測するに、たとえflashの代替ソースを末尾につけても、同様の症状になるのではと考えられます。ではflashを１番目に置いたら？それならaudioタグを使う意味がほとんどないような気がしますし、そんな使い方をされている先達は知りません。

みなさんはこのオーディオ要素（ビデオ要素も同様なのか？）をどうとらえていて、使うならどう使いますか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： b0a0a
回答日時：2012/12/14 17:31

[[audio]].error.code

で再生エラーを拾って別のソースに切り替えてください

この回答への補足

ヒントありがとうございます。
onerror属性を使うことでうまく処理できました。

ですが[[audio]].error.codeの使い方を調べましたがよくわかりませんでした。
ifとeventlistnerでaudioオブジェクトにerrorがでてたらsrcを切り替えるのでしょうか？
そのerrorがでてたらsrcを切り替えるのコードの書き方がわかりません。functionとしてそのなかに何かコードを書くような気はしてるんですが。
私の勉強のために１例使い方をお示しいただけたら助かります。

補足日時：2012/12/14 21:26

通報する

- 0
- 件

通報する

この回答へのお礼

自分でやるとエラーに対してソースを切り替えるのがどうも上手くいきません。
mp3を受け付けないブラウザ用に下記のコードを試しました。
これだとエラー検出とソースの交換が失敗します。
どうやったらうまくできるのでしょか？
お忙しいところご迷惑をおかけしておりますが、回答よろしくお願いします。

<script>
getElementByTagName('audio')[0].addEventListener('error', function(event) {
$("#audio_id").error(function () {

var mediaelement = document.getElementsByTagName("audio")[0];
if (mediaelement.networkState == mediaelement.NETWORK_NO_SOURCE) {
alert("error!!!");
}
}).$("source").attr("src") = 'music01.ogg';;

});

</script>

</head>
<body>
<audio id="audio_id" controls>
<source src="music02.mp3">
</audio>
</body>
</html>

通報する

お礼日時：2012/12/15 20:45

No.1

回答者： ixkaito
回答日時：2012/12/14 03:55

videoタグ、audioタグについては、まだ歴史が浅いのでやはりいろいろ問題を抱えているようです。

またブラウザのアップデートによって状況は頻繁に変わるでしょう。

ここ最近実際に使用した経験をお話しいたします。

videoタグは質問者様のaudioタグの症状と同じです。
mp4を一番最初にしないとSafariは読み込んでくれません。
ちなみにvideoの場合、mp4とwebmの二つで、videoタグ対応ブラウザをほぼカバーできます。

audioタグについては、mp3とoggの順番に関わらず、Win、MacどちらのFx、Safariでも問題なく再生できています。

そこでIE8に対応する方法についてですが、javascriptのプラグインを使用しております。
（ほとんどのプラグインはIE6や7も同時に対応していますが、正直もう考慮に入れたくないです。
IE8がなければおそらくこんなことすらやっていません。）

videoのプラグインは色々あります。html5 video プレイヤーで検索するとまとめサイトなどができてくると思います。
ちなみにvideo.jsというプラグインを使用しました。

videoに比べて、audioのプラグインは少し少ないように感じます。
audio.jsというプラグインを使用しましたが、video.jsと関係がある訳ではなさそうです。

こういったjsのプラグインを使用する利点としては、Flashを別で制作する必要がないところが一番大きいでしょう。
JSのスクリプトを適応させるだけで、videoやaudioタグ非対応のブラウザでは、自動的にFlashで表示させてくれます。
また、もう一つの利点として、各ブラウザのコントロールの見た目を統一できることです。
デザインの変更も画像とCSSで簡単にできるものが多いと思います。

最後に使用したプラグインの挙動について少しお話しいたします。

video.jsの場合、video対応ブラウザではHTML5で表示されます。IE6～8ではFlashで表示されます。
audio.jsの場合は少し違います。audio.jsはaudioタグのmp3形式に対応していないとFlashで再生する事になります。
要するにFxでもFlashを使用することになりますので、逆にFlash Playerがインストールされていないと、Fxで再生されません。

両プラグインを使用した結果として、OS：Win、Mac／ブラウザ：IE6～9、Fx、Safari、Chrome、Opera／スマートフォン：iPhone、Android において、すべて問題なく再生されています。

以上、ご参考になればと思います。