html 中的单个图标声音播放器使用超棒的字体

Question

我想要一个单一图标的声音播放器，当用户点击时播放一个声音文件... 唯一的要求是应该纯HTML CSS only... 没有JavaScript please

<a href="test.mp3"><i class="fa fa-sound"></a>

Answer 1

这是可能的，但只能使用 javascript。您可以使用以下代码来完成：

    <audio id="player" src="Kalimba.mp3"></audio>
    <div>
         <a onclick="document.getElementById('player').play()"><i class='fa fa-volume-up fa-2x'></i></a>
     </div>

祝你好运！

编辑：

href 颜色会使它变成蓝色。您需要添加自定义 css 规则才能将其改回黑色。 Google那个。

例如：

a {
    color: black;
    background-color: transparent;
    text-decoration: none;
 }

html 中的单个图标声音播放器使用超棒的字体

Single icon sound player in html using font awesome

html

css

font-awesome