web-dev-qa-db-ja.com

ダウンロードボタン付きのhtml5オーディオ

以下のコードを使用して、会社のポータル（asp.net Webフォーム）で.mp3ファイルを再生します。

 <audio id="player" style="margin-top:10px;margin-bottom:10px" src="audio/aaa.mp3" controls loop autoplay></audio>

すべて正常に動作しますが、chromeを使用すると、ダウンロードボタンがオーディオコントロール内に表示されます。

オーディオダウンロードボタン

他のコントロールを無効にせずに、ダウンロードボタンを非表示または無効にするにはどうすればよいですか？

ありがとう。

javascriptasp.nethtmlaudio
10
Andy L.

chrome 58以降、Googleは新しい機能を追加しました。これで、これを実行できます：

<audio width="400" height="38" controls controlsList="nodownload">
    <source data-src="...." type="audio/mpeg">
</audio>

詳細はこちら

https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist

18
bernardo

同じ問題に遭遇しました。ネイティブオーディオ要素の利便性が欲しいのですが、新しいChromeダウンロードボタンを表示したくないビジネス要件があります。

Chrome 55以上を検出した場合、ダウンロードボタンの上にマスキングdivを配置して非表示にするハックソリューションを作成しました。

<div id="player">
  <audio src="https://upload.wikimedia.org/wikipedia/commons/8/8f/Fur_Elise.ogg" controls></audio>
  <div id="mask"></div>
</div>

<style media="screen">
#player {
  position: relative;
  width: 300px;
}
#mask {
  display: none;
  background-color: #F3F5F6; /* match the background color of the page */
  position: absolute;
  width: 34px;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 10
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function(event) {
  var match = navigator.userAgent.match(/Chrome\/(\d+)/);
  if (match && parseInt(match[1]) >= 55) {
    document.getElementById('mask').style.display = 'block';
  }
});
</script>

https://jsfiddle.net/keeth/bqdc4uL7/6/

3
Keeth

Chrome= HTML5 Audioが使用されている場合、これによりダウンロードボタンが非表示になります。

 #aPlayer > audio { width: 100% }
        /* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
       /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>

スクリーンショットを表示するにはここをクリックしてください

1
Alper Ebicoglu
 #aPlayer > audio { width: 100% }
        /* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
  and (min-resolution:.001dpcm) {
       /* HIDE DOWNLOAD AUDIO BUTTON */
     #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}

/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
    
      #aPlayer {
           overflow: hidden;width: 390px; 
        }

    #aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
 <audio autoplay="autoplay" controls="controls">
  <source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
 </audio>
</div>
0
santosh naagula