在html5音频播放器时间轴上制作风格

Question

我想在html5音频播放器上制作一种风格。

    <audio id="player" controls="controls">
        <source src="song.ogg" type="audio/ogg" /> 
        <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

是否可以在html5通用音频播放器时间轴上放置css样式？

-Thanks。

Answer 1

以下代码粘贴到Chrome的开发者控制台时，会显示描述音频元素结构的文档片段：

var aud = document.createElement('audio');
document.querySelector('body').appendChild(aud);
aud.controls = true;

转到chrome调试器的元素选项卡会显示此文档片段：

<div>
 <div>
  <div>
   <input type="button">
   <input type="range" precision="float" max="0">
   <div style="display: none;">0:00</div>
   <div>0:00</div>
   <input type="button">
   <input type="range" precision="float" max="1" style="display: none;">
   <input type="button" style="display: none;">
   <input type="button" style="display: none;">
  </div>
 </div>
</div>

如果有办法改变时间显示或播放/暂停按钮的样式而不重新定义内部结构（即影子DOM），那么它将通过该文档片段。既没有函数也没有属性表明能够访问所述文档片段。

Answer 2

Youtube有自己的HTML5视频时间轴，以防有人想“尝试新的东西”（或者只是简单地下载一些无广告的WebM视频），所以我知道这是可能的。我猜你需要这样做：

 <audio id="player" ><!--notice how you get rid of the controls -->
        <source src="song.ogg" type="audio/ogg" /> <!-- using mozilla firefox -->
        Your browser does not support HTML5 audio. Please upgrade your browser.
    </audio>

如果您隐藏了音频播放器，则可以添加Event Listeners来更新状态/进度。您肯定希望至少使用onTimeUpdate

同时，您可以使用带有border-radius =（width / 2）的方形标记创建自己的DOM控制器，或者只使用a。我建议您查看Shadow DOM，以便隐藏用户和其他脚本的功能。 如果您只想向用户显示音乐播放的距离而不允许用户搜索，请使用标签或标签。否则，您可以使用标记并对其进行样式化。不要忘记添加onInput处理程序以跳过轨道。

修改的

我没看到那张照片。你在回答时必须上传它。我建议你使用过滤器，但除了图像之外，这可能不起作用。尝试使div透明并allowing the user to click through it

编辑＃2

事实证明，背景颜色有点根据背景颜色为Chrome中的播放器（仅限音频播放器）着色，但播放时间颜色不会改变背景颜色或颜色的颜色。您可以使用自定义播放器获得完全控制和统一的风格，但这对您来说意味着额外的工作。我希望我的回答很有帮助。