Html 5 音频标签自定义控件？

我觉得我在这里服用了疯狂的药丸，因为我不知道如何使用自定义控件渲染 html 5 音频标签。

到目前为止我有这个 html，它工作没有问题：

<audio controls preload='none'><source src='the url to the audio' type='audio/wav' /></audio>

我如何让它只显示播放按钮，也许在播放时，在它的位置显示暂停按钮。

从我读到的来看，

默认情况下，该元素不会公开任何类型的播放器控件。 您可以使用普通的旧式 HTML、CSS 和 JavaScript。该元素具有 play() 和pause() 等方法以及 称为 currentTime 的读/写属性。还有读/写 音量和静音属性。所以你真的拥有你需要的一切 构建您自己的界面。

如果你不想构建自己的界面，你可以告诉 浏览器显示一组内置控件。要做到这一点，只需 在标记中包含控件属性。

但我找不到任何使用自定义控件的示例。如何只获得播放按钮？

你像这样创建你的元素......

<audio id="yourAudio" preload='none'>
    <source src='the url to the audio' type='audio/wav' />
</audio>
<a href="#" id="audioControl">play!</a>

并添加一些功能：

var yourAudio = document.getElementById('yourAudio'),
    ctrl = document.getElementById('audioControl');

ctrl.onclick = function () {

    // Update the Button
    var pause = ctrl.innerHTML === 'pause!';
    ctrl.innerHTML = pause ? 'play!' : 'pause!';

    // Update the Audio
    var method = pause ? 'pause' : 'play';
    yourAudio[method]();

    // Prevent Default Action
    return false;
};

现在，按钮只是简单的文本（“播放！”或“暂停！”），但您可以使用 CSS 执行任何您想要的操作。而不是设置innerHTML，设置className就可以开始了！