[英]html5 audio with download button
I Use the code below to play .mp3 files in a company portal (asp.net webform). 我使用下面的代码在公司门户网站(asp.net webform)中播放.mp3文件。
<audio id="player" style="margin-top:10px;margin-bottom:10px" src="audio/aaa.mp3" controls loop autoplay></audio>
Everything works fine, but when I use chrome a download button is visible within the audio controls. 一切正常,但是当我使用chrome时,音频控件中会显示下载按钮。
How can I hide or disable the download button, without disable the other controls? 如何在不禁用其他控件的情况下隐藏或禁用下载按钮?
Thanks. 谢谢。
Google added a new feature since chrome 58. Now you can do this : 谷歌自Chrome 58以来增加了一项新功能。现在你可以这样做:
<audio width="400" height="38" controls controlsList="nodownload">
<source data-src="...." type="audio/mpeg">
</audio>
More info here 更多信息在这里
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
I have run into the same issue, where I want the convenience of the native audio element but have business requirements where I don't want to show the new Chrome download button. 我遇到了同样的问题,我想要原生音频元素的便利,但有业务要求,我不想显示新的Chrome下载按钮。
I made a hacky solution where I position a masking div over the download button to hide it, if I detect Chrome 55 or above. 我做了一个hacky解决方案,如果我检测到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/ https://jsfiddle.net/keeth/bqdc4uL7/6/
This can hide download button on Chrome when HTML5 Audio is used. 当使用HTML5音频时,这可以隐藏Chrome上的下载按钮。
#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>
#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>
Check this syntax 检查此语法
<audio controls>
<source src="audio/aaa.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
I try this on Chrome and works fine. 我在Chrome上尝试这个并且运行正常。 See this example .
看这个例子 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.