html5 audio組件禁止下載

參考連接：https://wdd.js.org/audio-hide-download-icon.html

1. controlsList=」nodownload」
// 這個方法只支持 Chrome 58+， 低於該版本的是沒有沒法隱藏的

<audio src="/record/test.wav" controls="controls" controlsList="nodownload"></audio>

controlsList屬性只兼容Chrome 58+以上，具體能夠參考controlslist.html ，controlsList在線例子

nodownload: 不要下載
nofullscreen: 不要全屏
noremoteplayback: 不要遠程回放

2. css方式來隱藏

// 這個方式兼容全部版本的谷歌瀏覽器
audio::-webkit-media-controls { 　　overflow: hidden !important } audio::-webkit-media-controls-enclosure { 　　width: calc(100% + 32px); 　　margin-left: auto; }

3. 即便讓下載按鈕隱藏了，如何禁止右鍵下載？
// 給audio標籤禁止右鍵，來禁止下載

<audio src="/record/test.wav" controls="controls" controlsList="nodownload" oncontextmenu="return false"></audio>

 

補充說明：

經測試，firefox（版本55.0.3）自然的不顯示下載按鈕。二者對禁用右鍵下載的支持卻是一致的。