- 締切済み
html5のオーディオ要素が効かない場合がある
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)
[[audio]].error.code で再生エラーを拾って別のソースに切り替えてください
- ixkaito
- ベストアンサー率69% (18/26)
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 において、すべて問題なく再生されています。 以上、ご参考になればと思います。
お礼
詳しい情報ありがとうございます。参考にしたいとおもいます。 プラグインを使う事でflashにも対応できるから、変に再生されない事態はほぼ免れるということですね。 将来的に全ブラウザが安定してカバーするようになってプラグイン等抜きで使えるようになればいいのですが。。
関連するQ&A
- embedタグのloopやvolume要素について
embedタグでホームページに音楽を埋め込んだのですが、 クロームブラウザに限りloopとvolume要素が認識されません。 クロームブラウザにおいても、IEと同じように音量を自動調整させたり、ループさせる方法はないでしょうか？ 音楽ファイルごとに、あらかじめsoundengine等で編集しておくしかないでしょうか？ audioタグは使いたくありません、 クロームで自動再生が禁止されているので。
- ベストアンサー
- HTML
- safari,firefoxでスタイルシートを使いたい。
safari,firefoxでスタイルシートを使いたい。 お世話になっております。 link要素で、以下のような感じで、 ブラウザごとにスタイルシートを使い分けたいのですが、 どうもsafariとfirefoxは、link要素は認識してくれないようです。（opera、chromeは未確認） （私の勘違い？） safariとfirefoxは、スタイルシートのファイルを指定するのは、 どのようにするのでしょうか。 ご存知の方、ご教授ください。よろしくお願いします。 ↓----------------------- （OSの判定は省略） browser = getBrowserName(); if (browser == "Netscape") dirName = "macNsc.css"; if (browser == "Explorer") dirName = "winIE.css"; if (browser == "Safari") dirName = "macSaf.css"; ： document.write("<link rel='stylesheet' href='"+dirName+"' type='text/css'>"); ↑-----------------------
- ベストアンサー
- JavaScript
- audioタグを不特定多数使用する場合の設定
HTML5のaudioタグで音声再生しようとしています。 コントローラーは非表示にして、inputタグで画像を指定しています。再生さえできればよいので、設定はplay()のみです。解説サイトのスクリプトを元に、play()だけ残しています。 ------------------------------ ☆HTML側 <audio id="audio" preload="auto"> <source src="http://......" type="audio/wav"></audio> <source src="http://......" type="audio/mpeg"></audio> <input type="image" src="audio.png" alt="再生" onclick="audioPlay()" value="再生"> ☆JavaScript側 function audioPlay(){ document.getElementById("audio").play(); } ------------------------------ この設定で問題なく機能するのですが、この場合、 id指定をしているので、1ページに1つしか使えません。 1ページに不特定多数のaudioタグを使いたいのですが、どのように設定すれば良いのかGoogleで探しても（わたしの理解できるレベルのものは）見つかりませんでした。audioタグはまだこれから普及していないので、情報が少ないようです。 JavaScript側で設定することになるのでしょうが、JavaScriptはほとんどわからないので、お手上げの状態になっています。 ご教授ください。
- 締切済み
- JavaScript
- Flash playerとJavaが動かない
ある日突然、両方とも機能しなくなりました。 Flashのほうは、部分的に機能しなくなり、例えばYoutubeは見れるのですが、 ニコ動や、Yahooゲーム等は「最新のFlashPlayerを入れてください」というメッセージが出て見れません。 一度、再インストールをしたのですが、それでも見れませんでした。 Chromeは最初からFlashを積んでいるようなので見れますが、それ以外のブラウザ（IE、Fox、Safari、Opera）では見れません。 原因がまったくわかりません。 Javaも同様で、Javaを使うサイトでは、Javaがインストールされていないというメッセージが出ます。 しかし、こちらの方はIE、Safari、Chromeがダメで、FoxとOperaでは動きました。 Javaも再インストールをしましたが、症状が改善されることはありませんでした。 これはブラウザよりもPC側の問題のように思うのですが、どうでしょうか？ もし、症状の改善にお心当たりのある方がいらっしゃいましたら、ご教示いただければ幸いです。
- ベストアンサー
- ブラウザ
- javascriptのaudioで困ってます。
ブラウザーで音楽を再生させたいと思い、いろいろ調べながら下記のようにつくってみましたが、うまく再生されません。 やりたいことは、ローカルファイルからユーザーが選択した音楽ファイルをaudio要素のsrcわたして、再生させたいと考えています。 inputタグでユーザーが選択したファイルへのパスを取得する方法がよく分かってません。window.webkitURL.createObjectURL(this.files[0]);の部分はブラウザーによっていろいろ変わるのでしょうか？ファイルへのパスを取得する別の方法があるのでしょうか？もっとほかに原因があるのでしょうか？分かっていないことが多いのです。教えていただければありがたいです。よろしくお願いします。 <!doctype html> <html> <head> <title>audio test</title> <script type="text/javascript"> var audio_src; document.getElementById('input').onchange = function() { audio_src = window.webkitURL.createObjectURL(this.files[0]); // AudioElement を作成 var audio = new Audio(); // サウンドファイルまでの URL アドレスを指定 audio.src = audio_src; // 再生を開始する audio.play(); }; </script> </head> <body> <input type="file" id="input" /> </body> </html>
- ベストアンサー
- JavaScript
- Firefox、Safariで、midiをBGMとして流したいのですが
Firefox、Safariで、midiをBGMとして流したいのですが、、 midiの再生にはQuickTimeのプラグインが必要みたいですが、 midiサイトをどのブラウザで試聴しても、再生されました。 ということは、プラグインはされているということでよろしいのでしょうか？ 私のソースの記述がおかしいから、FirefoxやSafariでは音が再生されない だけだと思うのですが、勉強不足で何がなんやらわかりません。。 各ブラウザ、それぞれ違った記述でも構いません。 各ブラウザ用にhtmlを作ろうと思いますので、 埋め込みタグのobjectかembedだと思うのですが、違いますでしょうか？ スライドショーのページにどうしてもＢＧＭを流せたら…と、、 どうかアドバイス宜しくお願いします。
- 締切済み
- HTML
- Flashがインストールされていない場合に
Flashがインストールされていない場合やゲーム機のブラウザ（たとえばDSiブラウザ、iPod touchのSafari）などの Flashがインストールされていない環境の場合、 代わりに画像を表示する なんてことはできるのでしょうか！？ できるのならやり方を教えてください。 できればjavascriptは使わないほうがいいですが、そんな贅沢いえませんよね。
- 締切済み
- HTML
- 動画再生でオーディオインタフェースだと音が出ない
YoutubeやTwitterなどの動画で、一部の動画だけ、オーディオインタフェースを出力先にすると音が出ません。ところが内臓出力に切り替えると音がでます。 ブラウザはsafari（11.0.2）、Chrome（63.0.3239.132）、 macOSは 10.12.6です。 試しにダウンロードしてQuicktime 10で再生すると、ブラウザ時と同様、オーディオインタフェースでは音が出ないのですが、内臓出力では音が出ました。しかし、Quicktime 7 Proで再生すると、オーディオインタフェースでも内臓出力でも問題なく音がでます。 オーディオインタフェースはLine6 SonicPort VX（USB2.0）と Focusrite Clarett 2pre（Thunderbolt）、どちらで試しても同じ症状です。 一度にどちらか１つのみしか接続していません。 以上の情報で、何か耳寄りな情報をお持ちの方、宜しくお願い致します。
- 締切済み
- Mac
- Safari WinXP リファラを有効にする方法教えてください。
大人には聞こえない音/聴力検査FLASH (Mosquito Sound) http://itsd210.s24.xrea.com/ja/mosquito_sound/ のページをSafariで見ようとしたところ、 『リファラを有効にしてリロードしてください。』 のメッセージがフラッシュの部分に出て操作できません。（音が聞けません）。 以下のブラウザでは機能します。 IE8,Chrome,Firefox,Opera Safariはいつも使用しているブラウザなので、「リファラを有効」にしたいのですが、方法が不明。【設定】を一通りみてみてもそれらしいものはないし、「リファラを有効」で検索してもましたが、よく分かりませんでした。 （フラッシュも再インストールしてみましたが、ダメ。） 初心者の私に教えていただける親切な方いらっしゃいましたら、お願いします。 環境 Windows XP Home Edition SP3 Safari 4.02 Norton Inernet Security 2009（関係ないと思いますが一応）
- 締切済み
- ブラウザ
お礼
自分でやるとエラーに対してソースを切り替えるのがどうも上手くいきません。 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>
補足
ヒントありがとうございます。 onerror属性を使うことでうまく処理できました。 ですが[[audio]].error.codeの使い方を調べましたがよくわかりませんでした。 ifとeventlistnerでaudioオブジェクトにerrorがでてたらsrcを切り替えるのでしょうか？ そのerrorがでてたらsrcを切り替えるのコードの書き方がわかりません。functionとしてそのなかに何かコードを書くような気はしてるんですが。 私の勉強のために１例使い方をお示しいただけたら助かります。