締切済み

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

2012/12/14 02:21

html5でaudioタグを使って、ユーザーのことなる環境に配慮してマルチsourceにすると、再生できないブラウザがでてきてしまいます。たとえば先日試した環境ですと、operaとfirefoxはOKでsafariが駄目でした。駄目というのは、sourceの順番が変わると再生がされないということです。つまり１番目に置く以外は再生されないということです。また、ネットで検索してみると、http://www.html5.jp/html5doctor/native-audio-in-the-browser.html のようにまったく逆の症状になるケースもあるようです。おそらく同じブラウザでもバージョンが違うからでしょう。（リンクのブラウザは私が試したのより昔のブラウザです）これらから推測するに、たとえflashの代替ソースを末尾につけても、同様の症状になるのではと考えられます。ではflashを１番目に置いたら？それならaudioタグを使う意味がほとんどないような気がしますし、そんな使い方をされている先達は知りません。みなさんはこのオーディオ要素（ビデオ要素も同様なのか？）をどうとらえていて、使うならどう使いますか？

gasfdsafs
お礼率47% (9/19)

HTML
回答数2
ありがとう数2

みんなの回答 （2）
専門家の回答

みんなの回答

b0a0a
ベストアンサー率49% (156/313)

2012/12/14 17:31 回答No.2

[[audio]].error.code で再生エラーを拾って別のソースに切り替えてください

質問者

お礼 2012/12/15 20:45

自分でやるとエラーに対してソースを切り替えるのがどうも上手くいきません。 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/14 21:26

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

ixkaito
ベストアンサー率69% (18/26)

2012/12/14 03:55 回答No.1

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 において、すべて問題なく再生されています。以上、ご参考になればと思います。

質問者