Question

我需要一个javascript代码，因为我想在暂停音频元素时删除此id =“imgg”中的类w3-spin ...

<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg"   style="width:44%;height:149px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
 <audio id="audio" controls loop autoplay style="width:100%;" onclick="pause()">
    <source src="<?php echo $row['Song']?>" type="audio/mpeg">
</audio>

我的javascript ..

<script> 
    var player = document.getElementById("audio"); 
    var imgg1 = document.getElementById("imgg"); 
    function pause() { 
      player.pause();
      imgg1.removeClass("w3-spin");
      } 
</script>

Answer 1

暂停audio元素时您应该收听的事件是pause。

与游戏一样，它是（你猜对了）play。

在MDN上查看media events列表，查找可以收听audio元素的可能事件列表。

这是一个例子。为.w3-spin添加了红色背景颜色，以帮助说明班级名称。

var audioPlayer = document.getElementById("audio");
var imgg = document.getElementById("imgg");
audioPlayer.onpause = function() {
  imgg.className = imgg.className.replace(/\bw3-spin\b/g, "");
};
audioPlayer.onplay = function() {
  if (imgg.className.indexOf("w3-spin") === -1) {
    imgg.className = imgg.className + " w3-spin";
  }
};

.w3-spin {
  background-color: red;
}

<div style="width:100%;height:150px;">
<img id="imgg" class="w3-spin img-circle" src="Pic/sky.jpg"   style="width:44%;height:149px;">
<img id="imgg2" class="w3-spin img-circle" src="Pic/b.png" style="width:20%;height:75px;top:85px;left:150px;position:absolute;">
</div>
 <audio id="audio" controls loop autoplay style="width:100%;">
    <source src="https://upload.wikimedia.org/wikipedia/en/2/26/Europe_-_The_Final_Countdown.ogg" type="audio/ogg">
</audio>

需要javascript代码

1 个答案: