*

ChromeではHTML5のaudioタグは1ページに6つまでしか使えないみたいだよ

公開日: : ノウハウ

HTML5 から新しく追加された要素の audio タグはプラグイン不要でブラウザ上で音声を再生する事ができます。従来ではウェブサイトで音声を再生させようとする場合、Quicktime や Windows Media Player、Real Player、FLASH などプラグインに頼るしかありませんでした。それが HTML5 の audio 要素をサポートする新しいブラウザならそんなプラグインは不要で誰でも再生する事が可能になります。

audio要素対応ブラウザ

現在存在している主要ブラウザの最新版であれば全て対応しています。

  • Internet Explorer9 以上
  • Firefox3.5 以上
  • Google Chrome3 以上
  • Safari3 以上
  • Opera10 以上

未だに根強いシェアの Internet Explorer8 以下も今では10%未満にまで下がっています。そろそろ本格的に HTML5 を使っても良い頃合いなのかなとも。

audio要素の対応ファイル形式

  • Internet Explorer 9以上 : mp3, aac
  • Google Chrome 25 以上 : mp3, aac, ogg, wave, WebM
  • Firefox 21 以上 : mp3(winのみ),aac(winのみ), ogg, wave, WebM
  • Opera 14 以上 : mp3, aac, ogg, wave, WebM
  • Safari 3.1 以上 : mp3, aac, ogg, wave

ブラウザごとに対応音声ファイル形式が異なるのですが、mp3 さえ用意すれば全てのブラウザをカバーできるようになりました。

参考

Chromeではaudio要素を6つまでしか使えない?

ここで本題です。あまり話題になっていないようですが、Google Chrome では1ページにつき6つまでしか audio タグを使えないようです。厳密に言うと、プレイヤーは表示されるのですが音声ファイルが7つ目以降の audio 要素にはロードされてこないようです。

オリジナルの楽曲ファイルを掲載するサイトを作っていた時に気が付きました。

他のブラウザはどうなのかと調べてみた所、Internet Explorer11 では20個の audio タグを並べようとも全て再生可能でした。Firefox でも同じく。Edge でも可能。更に、Android 版 Chrome でも再生が可能でした。どうも audio タグ6個制限はデスクトップ版 Chrome のみにかかっているようです。

今ではかなりのブラウザシェアを占めている Chrome を無視するわけにはいきません。これを回避する為には FLASH のプレイヤーや他プラグインを使う方法がありますが、それでは本末転倒です。プラグイン無しで音楽を再生できる HTML5 の良さを無くしてしまいます。

仕方なく Chrome の仕様に従って1ページに audio タグは6つまでにしてページを作るしかありませんでした。

上部広告

  • Pocket

おすすめトピックス

関連記事

オフィス画像モニタ
CSSのみでhtmlタグの中に文章を挿入する方法があります

ウェブサイトの中で html の編集が出来ない場所に文章を書くなど編集する事は出来ません。一見当たり前の事を言っているだけです。しかし、CSS なら出来てしまうかもしれません。 目次1 htmlの編集が出来ない場所とは2 […]

スマホサイト
プラグイン無しで簡単に実現するスマホサイトの上からドロワーメニューの作り方【jQuery】

近年どこでもスマートフォン向けサイトが用意されているのが当たり前です。スマートフォンを使っていればいつも何気なしにスマートフォンサイトを見ていると思います。 そのスマートフォンサイトをちょっと思い出してみてください。 こ […]

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

MP3ダウンロード
MP3を1クリックだけでストリーミングせずにダウンロードする方法

私はこのサイトとは別に、効果音や BGM の素材サイトを運営しています。ふとそのサイト名で google 検索をしてみた所、驚くべき光景を目にしました。 ポケットサウンドというのがそのサイト名なのですが、Google の […]

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

上部広告

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

上部広告

       
つるやパンの2号店!ふわふわまるい食パン専門店が長浜駅前にオープン

つるやパンと言えば聞いたことがある方も多いかもしれません。つる

コンビニ受け取り
不在がちでもAmazonの注文の品をコンビニで受け取る事ができます【ファミリーマート編】

ネットショッピングは今では物を購入する手段としてメジャーな存在となりま

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

→もっと見る