如何隔离HTML5音频播放器控制功能？

Question

我想为HTML5播放器隔离'play'，'pause'和'stop'功能。我想把它们放在我的主页上的随机位置（即，停在左上角，在右下方播放，并在页面中间暂停）。我也希望能够隔离跟踪器。因此，例如，将跟踪器放在页面的左下角。

有谁能告诉我隔离出其中一个控件需要什么？因此，例如，“如果用户点击div中的任何位置，”右下角“，音频将开始”播放“。左下角的跟踪器将开始跟踪，停止和暂停按钮将转到准备状态......

Answer 1

我不相信你可以通过CSS或JavaScript影响浏览器本机音频播放器的控制，至少在你想要的范围内。因此，您需要省略音频标签中的controls属性（这将为您提供没有控件的播放器）并自己编写控件和控件背后的逻辑。

这个tutorial应该足以让你开始。但是，您应该注意，根据您需要的功能级别，这可能不是一项简单的任务。

您可能还会考虑寻找支持所需UI自定义级别的第三方库。我自己没有用过它，但听过关于audio.js的好话。

[编辑]

此HTML5 audio test suite作为音频元素的API摘要非常方便，并且链接到W3规范中针对列出的每个属性和事件的相应条目，但我希望支持支持HTML5音频的各种浏览器不一致。

我创建了this fiddle，演示了由一组非常基本的自定义控件控制的HTML5音频播放器（仅在最新版本的Chrome中测试过）。