如何使用带有图标的 html 音频标签？

Question

I'm using an html audio control in a webpage to play an mp4 file.我在网页中使用 html 音频控件来播放 mp4 文件。

<audio controls>
  <source src="example.m4a" type="audio/mp4">
</audio>

The tag displays a visual control specific to the platform.该标签显示特定于平台的视觉控件。

How can I use the tag so that it displays a clickable icon of my choice instead of the default visual control?我如何使用标签来显示我选择的可点击图标而不是默认的视觉控件？

Answer 1

Maybe like this :也许是这样的：

 let a=0;document.getElementsByTagName("i")[0].addEventListener("click",function(){ if(a==0){ document.getElementsByTagName("audio")[0].play();a++;document.querySelector("i").style.opacity="1"; }else{ document.querySelector("audio").pause();a--;document.querySelector("i").style.opacity=".5"; } });

 <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div> <h1 style="display:inline;color:grey;font-family:sans-serif;font-weight:normal;">Prison Walls</h1> <span><i class="fa fa-volume-up fa-2x" style="color:grey;opacity:.5"></i></span> </div> <audio hidden> <source src="https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Julie_Maxwells_Piano_Music/Classic_Piano_Collection_from_the_Princess_of_Mars/Julie_Maxwells_Piano_Music_-_21_-_Prison_Walls.mp3" type="audio/mp3"> </audio> </body>

I used javascript addEventListener with traitement.我使用了带有 traitement 的 javascript addEventListener 。 So that, you can play or pause the audio.这样，您就可以播放或暂停音频。 Also you can found the volume up icon you are looking for on https://fontawesome.com/icons/volume-up?style=solid .您也可以在https://fontawesome.com/icons/volume-up?style=solid上找到您正在寻找的音量增大图标。

如何使用带有图标的 html 音频标签？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-09-04 13:20:08

如何使用带有图标的 html 音频标签？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-09-04 13:20:08

解决方案1
0 已采纳 2020-09-04 13:20:08