HTML 5：没有进度条的音频控件？答案

【问题标题】：HTML 5: audio controls without progress bar?HTML 5：没有进度条的音频控件？
【发布时间】：2015-03-19 02:08:39
【问题描述】：

我正在尝试使用 html 5 构建响应式音频流播放器。我已经实现了 flash 的后备解决方案，以保持 x 浏览器兼容，但在播放器样式方面遇到了麻烦。

html 5 音频播放器的标准示例是：

<audio id="audio" preload="auto" controls style="width:100%;">

我喜欢 html 5 音频播放器的标准控件在以这种方式编码时的外观，但由于我的播放器仅用于直播，我不希望有标准进度条，只需播放/暂停，音量和静音。

是否可以以某种方式停用音频标签的进度条功能？到目前为止，我发现的唯一解决方案是在 html 中编写每个按钮并使用 css 对其进行样式设置。这将花费更多的时间。

感谢您的每一个提示，最好的问候，

塞巴斯蒂安

【问题讨论】：

标签： html audio html5-audio

【解决方案1】：

使用以下代码：希望对你有用

<html>
<body>
<audio id="player" src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"></audio>
<div>
	<button onclick="document.getElementById('player').play()">
    <img src="http://icons.iconarchive.com/icons/icons-land/play-stop-pause/48/Play-Normal-icon.png"/>
    </button>

	<button onclick="document.getElementById('player').pause()">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/pretty-office-8/48/Pause-icon.png"/>
    </button>

	<button onclick="document.getElementById('player').volume+=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_sound_audio_speaker_music_off_high.png"/>
    </button>

	<button onclick="document.getElementById('player').volume-=0.1">
    <img src="https://cdn2.iconfinder.com/data/icons/perfect-flat-icons-2/48/Volume_down_arrow_download_up.png"/>
    </button>
</div> 
</body>
</html>

如果要添加背景等，请在<div> 上添加样式。

希望它能满足你的目的

【讨论】：