*

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

おすすめトピックス

関連記事

オートコンプリート
PC、スマホ版Chromeでオートコンプリート(入力履歴)を一部消す方法

オートコンプリートとは、ウェブサイトのフォーム内のテキストボックスなどに入力した言葉をブラウザが記憶して、今までに入力した内容をテキストボックス下に表示される機能です。 ウェブサイトの検索窓やお問合せフォームなどで活躍す […]

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

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

Chromeリロード
「ブラウザを更新しても画像が変わらない」を解決するChromeの小技

ホームページを作っていたり、Web 制作の現場ではあるあるな事を紹介します。 Web サイトを運営していれば、画像を差し替える事は度々ある事です。違う画像ファイル名でアップロードして html ファイルも書き換えるのはめ […]

ブラウザ
最新IE以外が衝撃のサポート終了!バージョンの確認方法とアップデート方法

2016年1月13日をもって旧バージョンの Internet Explorer(ブラウザ) のサポートが終了した事をご存知でしょうか。サポートが終了という事は、もう金輪際アップデートはないという事です。どんな危険な脆弱性 […]

思わぬトラブル!IEだけ画像が表示されない

こんにちは、桐村です。私が過去一瞬だけ Web デザイナーになった時に一度だけ経験したトラブルを紹介。 今現在の Windows の主要ブラウザ、「Internet Explorer」だけ画像が表示されない事態が起きまし […]

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

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

著者について

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

フォローはこちら

       

       
エックスサーバーでメールが送れない「Client host rejected:Access denied」

エックスサーバーで作成したメールアカウントでメールを送信しよう

札幌駅パセオ地下1階のパスタとパフェが美味しい「プロヴァンス」でランチ

札幌駅のパセオ地下1階にあるプロヴァンスは南フランスとイタリア

千歳市の和食処「ほうりん」の安い充実の寿司ランチ

千歳市にある和食処ほうりんは千歳駅の南西にある居酒屋が立ち並ぶ

スパホテルソーレ
札幌のカプセルホテル「スパホテルソーレすすきの」に泊まった感想

札幌の地下鉄すすきの駅の近くにあるカプセルホテル「スパホテルソ

札幌駅近くのモダン和食レストラン「えりも亭」で珍しい縮れ蕎麦ランチ

札幌駅の北口から徒歩2分程度の所に和風なモダンレストラン「えり

→もっと見る