*

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

おすすめトピックス

関連記事

Chromeの検索窓でAmazon等色々なサイトの検索をする方法

ブラウザの Google Chrome をお使いの方であれば、アドレスバーに検索キーワードを入力して検索する事は日常茶飯事でしょう。そして、そこに入力した結果表示されるものは Google だと思います。 実は、Chro […]

Chromeで間違って閉じてしまったタブを再度開き復活させる方法

Google Chrome をはじめとするタブブラウザは一つのウィンドウで複数のタブを開き、色々なウェブサイトを切り替えて見ることができるので便利です。しかし、便利だからといってあまりにタブを開き過ぎると間違えて必要なタ […]

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

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

ログアウト
Googleアカウントのログアウト後も残るメールアドレスの消し方【ブラウザ別対処】

Google アカウントは今や多くの方が利用されていると思います。これがなければ、Gmail も Google ドライブも Google フォトなど各種 Google サービスがほとんど使えません。 その Google […]

Chromeでページ上に広告やポップアップが出現したらマルウェアに感染しているかもしれません

Freepikによるデザイン あなたのパソコンに害をなすコンピュータウイルスや不正なソフトウェア(マルウェア)はインターネット上にはびこっています。この手のものであなたのパソコンへの侵入経路はメールだったり、怪しいサイト […]

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

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

著者について

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

フォローはこちら

       

       
朝食もできる古民家パン屋カフェ、米原駅徒歩5分「cafe du MBF」

滋賀県の米原駅東口から徒歩5分程度の場所にcafe du MBF とい

フリーソフトAviUtlで動画に音楽に同期する棒グラフを付ける方法(オーディオスペクトラム)

動画サイトなどで音楽が主体なものを見ていると、よく音楽に同期す

AviUtlを動画編集ソフトとして使う最低限の導入方法【2018年版】

フリーの動画編集ソフトを探していたところ、AviUtl という

エアアジア国内線に搭乗する際にチェックインなどの注意点

エアアジアとは格安航空会社(LCC)の一つです。スカイマーク、

Premiere Elementsで動画を白くフェードアウトするには?

動画をフェードイン、フェードアウトする事は動画編集の基本中の基

→もっと見る