Question

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

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

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

如何让它仅显示播放按钮，也许在播放时，在其中显示暂停按钮。

从我读到的，

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

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

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

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

Answer 2

我一直在尝试使用图形而不是播放器。将'audio'标签内的样式设置为“display：none; width：0px; height：0px;” （显示无在iPad上不起作用，因此附加宽度-0和高度-0设置）。也不包括“controls”属性应该工作。（不同的系统/浏览器和桌面与iOS都采取不同的行为.....）

例如：

<head>
<script>
function EvalSound(soundobj) {
  var thissound=document.getElementById(soundobj);
  thissound.play();
}
</script>
</head>

<body>
Click the speaker to hear the sound.  <a href="javascript:null()" onClick="EvalSound('sound1'); return false;">
<img src="sound_icon.png" alt="" title="sound_icon" width="" height="" class="" /></a>
<audio id="sound1" style="display: none; width: 0px; height: 0px;" src="sound.mp3" controls preload="auto" autobuffer>
</body>

“javascript：null（）”在iPad上与“return false”一起使用而不是通常的“＃”。

有关更多实用信息： http://www.phon.ucl.ac.uk/home/mark/audio/play.htm

Answer 3

如果你想要内置的播放按钮，你可以：

使用autio-tag的class属性：

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

并适合css：

 .audio_volume_only {
    width: 35px;
  }

我希望controls有一些参数but not found any or misunderstood ..我们会看到。

然后可能会使用audio's onplay - event来根据您的需要更改css。播放按钮将成为内置控件中的暂停按钮

正如其他人指出的那样，你可以随时制作自己的......

Answer 4

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

像平常一样创建元素，

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

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

要全面了解您可以修改的所有内容，请查看here。

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

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

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

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

4 个答案: