*

html5のaudioタグで出るプレイヤーにダウンロードボタンがあるんだが【Chromeのみ】

公開日: : 最終更新日:2017/10/01 ブラウザ

html5 には audio タグというものがあって、音声ファイルを指定するだけでウェブサイト上で音声を流せる便利なタグがあります。昔のように WMP や Quick Time プラグインに頼らず、FLASH プレイヤーに頼る必要もありません。

<audio src="音声ファイルのURL" controls></audio>

概ねこのように記述します。

audioタグにダウンロードボタンがある件

audio-tag2

さて、本題となります。最近気がついたのですが、audio タグで出るプレイヤーにダウンロードボタンが付いています。これ、前はありませんでしたよね?あったらこの有難みに今更気がつく筈がありません。そして、わざわざダウンロードリンクを作ったりしません。

audio タグを記述するだけでストリーミング再生に加えてダウンロードボタンまで付いてくれるので大変ありがたい機能です。

しかし、そうも喜んでいられません。どうやらダウンロードボタンが付くのは Chrome のみのようです。ようやく audio タグは最新の主要ブラウザで使えるようになりましたが、audio タグで出るプレイヤーはブラウザによって異なるのが現状です。これも統一してほしいですね。

Chromeの場合

audio-tag3

白くて細いスリムなプレイヤーでオシャレです。

Android版Chromeの場合

audio-tag6

PC 版 Chrome と同様のプレイヤーです。再生前は再生ボタンだけでしたが、再生するとボリューム、ダウンロードボタンが出現します。

Edgeの場合

audio-tag4

黒いプレイヤーで紫の差し色でちょっとドきつい配色で残念。

可変式ボリュームとシークバーがあります。

Firefoxの場合

audio-tag5

ちょっと古くさいです。Windows3.1か!

可変式ボリュームとシークバーがあります。

Internet Explorer11の場合

audio-tag7

でかいわ!

しかもシークバーもなくて途中から再生する事もできません。ボリュームも0か100のみの使えなさっぷりです。

ダウンロードボタンを表示したくない場合

Chrome のみご丁寧に、またはありがた迷惑のように audio タグにダウンロードボタンが表示されるわけですが、ダウンロードされたくない場合もあるでしょう。その場合は以下のようにするとダウンロードボタンが表示されません。ただし、Chrome のバージョンが58以上の場合のみです。

<audio src="音声ファイルのURL" controlslist="nodownload" controls></audio>

controlslist に nodownload を指定すれば OK です。

おわりに

手軽にウェブサイト上で音声を再生できる audio タグですが、ブラウザごとにこれだけプレイヤーが違うのが難点ですね。昔は再生できるファイル形式も難点だったのですが、現在は mp3 ファイルなら全てのブラウザで再生できるようになっています。

という事で、Chrome のみ audio タグのプレイヤーにダウンロードボタンがあるよという話題でした。

  • Pocket

おすすめトピックス

関連記事

タブレットのGoogle Chromeで全てのタブを閉じるのが意外に難関だった

先日友人にある相談を持ちかけられました。 「タブレット(Android)でインターネットがクソ重いんだけど…。」 どうせあの友人の事だから、ゲームや色んなアプリをインストールしまくって重くなっているんだろうなとは思ってい […]

Chrome
【Chrome】ブックマークは左という固定観念やめたら?上でもいいじゃない

Google Chrome では2014年12月現在、Internet Explorer や Firefox のようにブックマーク(お気に入り)をブラウザの左側に固定して表示する事はできません。そして Google はわ […]

拡張機能不要!Chromeでウェブページの全体スクリーンショットを撮る「フルサイズスクリーンショット」

2017年6月5日、ウェブブラウザ Google Chrome の最新版のバージョン59が公開されました。30種類の脆弱性を改善した他、いくつかの新機能が実装されています。その中でも目を引いたのが「フルサイズスクリーンシ […]

ウェブサイトの右クリック無効を解除するChrome拡張「Enable right click」

稀にですが右クリックを無効化しているウェブサイトにたどり着く事があります。右クリックを無効にしている理由は色々とあるでしょうが、右クリックが無効だとマウス操作で戻ったりタブを閉じたりするマウスジェスチャが使えなくなるので […]

スマホのChromeブラウザでページ内検索を行う方法

ブラウザでウェブサイトを閲覧中に何かの文字でページ内を検索したいと思った時、ブラウザには「ページ内検索」という機能があります。例えば1万文字を越える文章の中から目的の文章を探す為にある語句で検索して、目的の文章を一瞬で探 […]

Chromeブラウザのタブがしばらく経つと勝手に自動リロードされてしまう対処法

Google Chrome のアップデートの影響か、しばらく時間が経つとタブの切り替え時に自動リロード(更新)されてしまうようになりました。普通にインターネットを見る分には気にならないかもしれませんが、タブをいくつも開い […]

著者について

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

フォローはこちら

       

       
Photoshopでアルファベットが大文字しか打てない時に確認する事

Photohsop で作業中ある異変に気が付きました。それはア

松本市のクレープ専門店「クレープ工房」モチモチ食感がくせになる

長野県松本市にクレープ専門店の「クレープ工房」があります。クレ

中野市のうどん専門店「田りた麺之助」で美味しさに衝撃を受けた

長野県に行ったら食べたいものと想像するのはやはり信州そばではな

志賀高原の池めぐりコースをトレッキングする時の駐車場や帰りのバスについて

大自然の山々や湿原を散策するのが好きで長野県の志賀高原へ行って

諏訪市の無添加手作りカレー専門店「黄金マッハカレー」

長野県諏訪市にある黄金マッハカレーはカレー専門店です。ただのカ

→もっと見る