如何在 HTML5 音频标签中隐藏位置滑块？隐藏音频元素内的“假”输入元素？ [复制]答案

【问题标题】：How to hide position slider in HTML5 audio tag? Hide "fake" input element inside audio element? [duplicate]如何在 HTML5 音频标签中隐藏位置滑块？隐藏音频元素内的“假”输入元素？ [复制]
【发布时间】：2015-10-27 10:57:55
【问题描述】：

我在radio.meteor.com（代码GitHub）建立了一个网络收音机。我正在使用 HTML5 音频标签。

<audio preload id="player" controls>
  <source src="{{srcUrl}}" />
</audio>

link to source

由于它只播放流，因此滑块没有任何意义。有没有隐藏幻灯片的好方法？理想情况下，不要在顶部放置另一个 div 以使整个区域变黑。

在 Chrome 中，甚至在音频元素中似乎也有一个输入元素。没有办法隐藏这个输入元素吗？即使它只在 Chrome 中运行也很棒。

（是的，这个问题有点重复 How to disable specific control in audio player HTML5 - 但这个问题不太精确，而且这个问题对人们都更有用，也更有可能被发现。）

（问题已关闭，因此我无法将其添加为答案：）

2015 年 8 月，仍然没有干净的方法来做到这一点。这些是一些有用的库：

【问题讨论】：

可以显示html代码吗？
添加了 HTML 代码，带有指向源的深层链接。

标签： javascript html css html5-audio audio-streaming

【解决方案1】：

很遗憾，您无法隐藏幻灯片。我最近在一个语音邮件应用程序中使用了这个，最后收听了<audio ..> 元素发出的事件并编写了我自己的显示。如果您不包含controls，则不会显示（尽管我也使用 css 明确隐藏了它）。

MDN 文档： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio

这是一种方法的简单示例... HTML

<audio controls src="http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg" autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
<br/>
Current Time: <span id="currentTime"></span>s

var v = document.getElementsByTagName("audio")[0];
v.addEventListener("timeupdate", function() { 
  document.getElementById('currentTime').innerHTML = Math.floor(v.currentTime);
}, true);

小提琴：https://jsfiddle.net/r9exn16d/

【讨论】：