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

Question

我觉得我在这里服用了疯狂的药丸，因为我无法弄清楚如何使用自定义控件呈现 html 5 音频标签。

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

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

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

从我读到的，

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

如果您不想构建自己的界面，您可以告诉浏览器显示一组内置控件。为此，只需在您的标记中包含 controls 属性。

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

原文由 Levitikon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

 <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 就可以了！

原文由 sdleihssirhc 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

经过大量研究，我找到了一种简单的方法来消除和操作预定义控件的特定部分。

像往常一样创建元素，如下所示：

 <audio autoPlay>
    <source src='audioUrl' type='audio/mpeg' />
</audio>

然后在 CSS 文件中，编写以下内容：

 /* Specifies the size of the audio container */
audio {
  width: 115px;
  height: 25px;
}

audio::-webkit-media-controls-panel {
  -webkit-justify-content: center;
  height: 25px;
}

/* Removes the timeline */
audio::-webkit-media-controls-timeline {
  display: none !important;
}

/* Removes the time stamp */
audio::-webkit-media-controls-current-time-display {
  display: none;
}
audio::-webkit-media-controls-time-remaining-display {
  display: none;
}

使用此代码，您应该得到一个小巧美观的容器，其中只有静音按钮、暂停/播放按钮和“下载文件”标签。

有关您可以修改的所有内容的概述，请查看 此处。

以下代码还将删除静音和播放按钮：

 /* Removes mute-button */
audio::-webkit-media-controls-mute-button {
  display: none;
}

/* Removes play-button */
audio::-webkit-media-controls-play-button {
  display: none;
}

原文由 Lars Eivind 发布，翻译遵循 CC BY-SA 4.0 许可协议