谷歌瀏覽器：audio如何隱藏下載按鈕

當咱們使用原生的audio標籤時，能夠看到以下的效果。

那麼如何讓下載按鈕隱藏掉呢？

1. controlsList="nodownload"

// 這個方法只支持 Chrome 58+， 低於該版本的是沒有沒法隱藏的
<audio src="/i/horse.ogg" controls="controls" controlsList="nodownload">
    Your browser does not support the audio element.
</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="/i/horse.ogg" controls="controls" controlsList="nodownload" oncontextmenu="return false">
    Your browser does not support the audio element.
</audio>

4. 第三方插件: audiojs

項目地址: https://github.com/kolber/aud...
優勢： 簡單，無依賴
缺點：異步插入的audio標籤，每次仍是須要從新調用audiojs.createAll()方法來從新實例化

// 1.
<script src="/audiojs/audio.js"></script>

// 2.
<script>
   audiojs.events.ready(function() {
     var as = audiojs.createAll();
   });
</script>

效果圖：

5 audio相關問題以及解決方案

• 關於動態生成的mp3在audio標籤沒法拖動的問題: (audio斷點續傳)

6 參考文獻

• https://stackoverflow.com/que...
• https://stackoverflow.com/que...
• https://googlechrome.github.i...