HTML5音频显示仅播放暂停和静音按钮

时间:2012-12-10 22:05:59

标签: html5 html5-audio

我想知道是否有一种快速简单的方法来设置HTML5音频元素的样式以显示我想要的内容。我想知道你是否可以打开和关闭某些控件,但情况似乎并非如此。

我不想要进度/跟踪栏,或显示剩余时间。我只想要一个简单的播放/暂停切换按钮,以及一个静音/取消静音切换按钮。

这就是全部!有什么想法吗?

2 个答案:

答案 0 :(得分:22)

使用此代码,它将满足您的目的。

<!DOCTYPE html>
<html>
<body>
 <audio id="player" src="horse.ogg"></audio>
<div>
    <button onclick="document.getElementById('player').play()">Play</button>
    <button onclick="document.getElementById('player').pause()">Pause</button>
    <button onclick="document.getElementById('player').muted=!document.getElementById('player').muted">Mute/ Unmute</button>
</div>
</body>
</html>

答案 1 :(得分:4)

您可以使用Media API并使用所需的功能构建自己的控件集。我已经写过这个:Working with HTML5 multimedia components – Part 3: Custom controls - 它显示了一个视频示例,但您可以轻松地构建一个音频示例。