如何在 HTML5 音频标签中隐藏位置滑块？在音频元素中隐藏 "fake" 输入元素？

Question

我在 radio.meteor.com (code at 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 有点重复 - 但这个问题不太精确，这个问题对两个人都更有用，也更有可能被发现。）

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

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

Answer 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

JS

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

Fiddle: https://jsfiddle.net/r9exn16d/

如何在 HTML5 音频标签中隐藏位置滑块？在音频元素中隐藏 "fake" 输入元素？

How to hide position slider in HTML5 audio tag? Hide "fake" input element inside audio element?

html

javascript

css

audio-streaming

html5-audio