html - html中使用 Font Awesome 的单个图标声音播放器

Question

我想要一个单一图标的声音播放器，当用户点击时播放一个声音文件...唯一的要求是它应该只是纯 HTML CSS ...请不要使用 JavaScript

<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 规则以将其改回黑色。谷歌那个。

例如:

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