web-dev-qa-db-fra.com

audio html5 avec bouton de téléchargement

I Utilisez le code ci-dessous pour lire les fichiers .mp3 dans un portail d'entreprise (formulaire Web asp.net).

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

Tout fonctionne bien, mais lorsque j'utilise chrome un bouton de téléchargement est visible dans les commandes audio.

bouton de téléchargement audio

Comment masquer ou désactiver le bouton de téléchargement, sans désactiver les autres commandes?

Merci.

javascriptasp.nethtmlaudio
10
Andy L.

Google a ajouté une nouvelle fonctionnalité depuis chrome 58. Maintenant, vous pouvez le faire:

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

Plus d'infos ici

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

18
bernardo

J'ai rencontré le même problème, où je veux la commodité de l'élément audio natif mais j'ai des exigences commerciales où je ne veux pas afficher le nouveau bouton de téléchargement Chrome.

J'ai fait une solution hacky où je positionne un div de masquage sur le bouton de téléchargement pour le cacher, si je détecte Chrome 55 ou supérieur.

<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

Cela peut masquer le bouton de téléchargement sur Chrome lorsque HTML5 Audio est utilisé.

 #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>

Cliquez ici pour voir la capture d'écran

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