在 <audio> 中隐藏上下文菜单

Question

我正在为我儿子创建一个 php 程序，我在其中使用组件音频。但是我想阻止他使用上下文菜单下载音频文件。

属性控件显示或隐藏所有内容，所以这不是我需要的。我想要比 javascript 函数更简单的东西。

我是这样用的:

<audio controls src="music.wav"></audio>

Answer 1

我找到了一个解决方案：我隐藏了音频组件的右端：

<div class="positionRelative">
  <audio controls src="music.wav"></audio>
  <div class="styleAudio"></div>
</div>

样式：

.positionRelative { position : relative; }
.styleAudio
{
  background : #F2F2F2;
  position : absolute;
  top : 0;
  right : 0;
  width : 2.8em;
  height : 3.4em;
  border-radius : 2.8em;
}

Answer 2

您可以将 controlsList="nodownload" 添加到 <audio> 标签以隐藏下载按钮（至少在 Chrome 上）

<div class="positionRelative">
  <audio controls src="https://ccrma.stanford.edu/~jos/wav/viola.wav" controlsList="nodownload"></audio>
  <div class="styleAudio"></div>
</div>

在 <audio> 中隐藏上下文菜单

Hide the context menu in <audio>

html

css

html5-audio