html5 audio с кнопкой загрузки

Question

I Используйте приведенный ниже код для воспроизведения .mp3 файлов на портале компании (веб-форма asp.net).

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

Все работает нормально, но когда я использую хром, кнопка загрузки видна внутри элементов управления аудио.

audio download button

Как можно скрыть или отключить кнопку загрузки, без отключения других элементов управления?

Спасибо.

Answer 1

Google добавила новую функцию, так как хром 58. Теперь вы можете сделать это:

<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

Answer 2

Проверить этот синтаксис

<audio controls> 
    <source src="audio/aaa.mp3" type="audio/mpeg"> 
    Your browser does not support the audio element. 
</audio> 

Я стараюсь это на Chrome и работает отлично. См. this example.

Answer 3

Я столкнулся с той же проблемой, где хочу удобство собственного звукового элемента, но имею бизнес-требования, когда я не хочу показывать новую кнопку загрузки Chrome.

Я сделал хакерское решение, где я помещаю маскирующий div над кнопкой загрузки, чтобы скрыть его, если я обнаруживаю Chrome 55 или выше.

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

Answer 4

Эта кнопка загрузки на 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>

Click here to see the screenshot

Answer 5

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