âm thanh html5 với nút tải xuống

Question

Tôi sử dụng mã bên dưới để phát tệp .mp3 trong cổng công ty (biểu mẫu web asp.net).

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

Mọi thứ hoạt động tốt, nhưng khi tôi sử dụng nút chrome tải xuống hiển thị trong các điều khiển âm thanh.

audio download button

Làm thế nào tôi có thể ẩn hoặc vô hiệu hóa các nút tải về, mà không cần vô hiệu hóa các điều khiển khác?

Cảm ơn.

Answer 1

Google đã bổ sung một tính năng mới kể từ chrome 58. Bây giờ bạn có thể làm điều này:

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

Thông tin thêm ở đây

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

Answer 2

Kiểm tra cú pháp này

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

tôi cố gắng này trên Chrome và hoạt động tốt. Xem this example.

Answer 3

Tôi đã gặp sự cố tương tự, nơi tôi muốn sự tiện lợi của phần tử âm thanh gốc nhưng có các yêu cầu kinh doanh mà tôi không muốn hiển thị nút tải xuống Chrome mới.

Tôi đã thực hiện giải pháp hacky nơi tôi định vị div mặt nạ trên nút tải xuống để ẩn nó, nếu tôi phát hiện Chrome 55 trở lên.

<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

này có thể ẩn nút tải xuống trên Chrome khi HTML5 âm thanh được sử dụng.

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