HTML5音频标签自定义控件？

我觉得我正在服用疯狂的药丸，因为我不知道如何使用自定义控件呈现HTML5音频标记

到目前为止，我已经有了这个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>

---

现在，按钮只是简单的文本（“play！”或“pause！”），但是你可以用CSS做任何你想做的事情。不要设置

innerHTML

，而是设置

className

，这样就可以开始了

我一直在尝试使用图形而不是播放器。将“音频”标签中的样式设置为“显示：无；宽度：0px；高度：0px；”（显示无在iPad上不起作用，因此附加的宽度-0和高度-0设置）。此外，不包括“控件”属性也应该有效。（不同的系统/浏览器以及桌面与iOS的操作方式都不同……）

例如：

功能评估声音（soundobj）{
var thissound=document.getElementById（soundobj）；
这个声音。play（）；
}
单击扬声器以听到声音。
如果您只想要内置播放按钮，您可以：

使用autio标记的类属性：

 <audio controls preload='auto' class="audio_volume_only"><source src='the url to the 
audio' type='audio/mp3' /></audio>   

我希望有一些参数。。我们拭目以待

然后可能使用更改css以满足您的需要。
播放按钮将成为内置控件中的暂停按钮

正如其他人所指出的，您可以自己制作……
经过大量研究，我找到了一种简单的方法来消除和操作预定义控件的特定部分

按照通常的方式创建元素，如下所示：

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

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

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

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

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

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

您不必将样式设置为“display:none；”。如果你看你有一个“控制”标签。这是一个布尔值，用于指定是否显示播放器。只要去掉它，你就不必包含任何内联css。遗憾的是，上面的“更有用的信息”链接似乎被破坏了，目标被蒸发了。@AdilMalik Change audio link dropbox。嗨，实际上我正在搜索谷歌字典，我的意思是当我假设搜索“定义你好”时，谷歌上会出现一个字典，它也有音频图标，当我点击它时，音频播放，但它没有任何控件，我想他们可能会使用你的答案建议的东西，音频在我点击音频图标时开始，这是一个输入元素，但我找不到任何与之相关的点击事件，触发音频，我感到困惑
 .audio_volume_only {
    width: 35px;
  }

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

/* 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;
}