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

Question

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

38

我感觉自己像疯了一样，因为我无法弄清楚如何呈现带有自定义控件的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

4个回答

12

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

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

<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

5

我一直在尝试使用图像代替播放器。在“audio”标签中设置样式为"display: none; width: 0px; height: 0px;"（display none在iPad上无效，因此需要额外设置width-0和height-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

- Johnathan

5

您不必将样式设置为"display: none;"。如果您查看，会发现有一个"controls"标签。这个标签用作布尔值来指定播放器是否显示。只需删除它，您就无需包含任何内联CSS。 - Booker

很遗憾，上面的“更多真正有用的信息”链接似乎已经失效，目标消失了。 - Opsimath

4

如果您只想使用内置的播放按钮，可以：

使用audio标签的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;
  }

我希望控件有一些参数，但没有找到或误解了...我们会看到的。

然后可能使用音频的onplay事件来更改CSS以满足您的需求。内置控件中的播放按钮将变为暂停按钮。

正如其他人指出的那样，您总是可以自己制作...

- womd

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sdleihssirhc · Accepted Answer

你可以这样创建元素...

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

目前，该按钮只是简单的文本（"play！"或"pause！"），但你可以使用CSS做任何你想做的事情。不要设置innerHTML，而是设置className，就可以了！