*

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

公開日: : ブラウザ

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のみの使えなさっぷりです。

おわりに

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

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

上部広告

  • Pocket

おすすめトピックス

関連記事

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

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

ノートパソコンでタイピング
ChromeやFirefoxならフォームの狭いテキストエリアを伸ばせます

インターネットをしていれば、よく文字を入力する場面は多いかと思います。ブログのコメント欄、インターネットショッピングで配送先の入力などなど、色々ありますね。それらは総じて入力フォームと言います。 ピンと来ない方は、下の画 […]

Web制作の明るいオフィス
Google検索結果のリンクから下線が消えたので無理やり出した

ある日いつも通り Google 検索を利用したらある事に気づきました。いや、それはもう驚愕の事態でした。 目次1 Google 検索結果のリンクから下線が消えている!!!2 リンクの下線を復活するには2.1 Styleb […]

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

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

超便利!Android版Chromeのタップして検索で気になる単語をその場で検索

スマートフォンで Android 版 Google Chrome を使用して色々なサイトを見ていた時、偶然にですが便利機能を見つけてしまいました。それはタップして検索です。 Android 版 Chrome のバージョン […]

辞書サイトに行かずにその場で翻訳できるChrome拡張「どこでも翻訳」が便利

インターネット閲覧中やパソコンで作業中、この言葉を英語でどう書くんだろう?と思う事もしばしばあると思います。そんな時はブラウザの別タブを開いて辞書サイトへ行ったり Google 翻訳を開いたり、本の辞書を開いたりしますよ […]

上部広告

著者について

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

フォローはこちら

       

上部広告

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

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

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

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

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

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

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

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

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

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

→もっと見る