Блог

Главная - Вопросы по программированию - Как я могу использовать html аудио тег со значком?

Как я могу использовать html аудио тег со значком?

#html #audio #mp4

#HTML #Аудио #МР4

Вопрос:

Я использую элемент управления звуком html на веб-странице для воспроизведения файла mp4.

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

Тег отображает визуальный элемент управления, специфичный для платформы.

введите описание изображения здесь

Как я могу использовать тег, чтобы он отображал интерактивную иконку по моему выбору вместо визуального элемента управления по умолчанию?

введите описание изображения здесь

Ответ №1:

Может быть, вот так :

     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>

Я использовал javascript addEventListener с traitement. Таким образом, вы можете воспроизводить или приостанавливать звук. Также вы можете найти значок увеличения громкости, который вы ищете наhttps://fontawesome.com/icons/volume-up?style=solid.

Комментарии:

1. Спасибо, Мохамед. Для других нубов вроде меня там, я вложил первая часть ответа «пусть a=0;документ…» в <script> tags and copied it to bottom of my php file.

2. Приветствую тебя, Марк.