更改音频标签图标（如果已暂停）

Question

我有一系列音频元素，当用户将鼠标悬停在图像上时，如果单击播放图标，则音频开始，并且该图标变为暂停图标。当用户单击暂停图标，并且该图标又变回播放状态时，同样如此。

但是，如果用户将鼠标悬停在另一个图像上并单击其播放按钮怎么办？然后，我有一些代码可以暂停所有不是刚刚单击的元素。但是所有已暂停音频元素的图标仍保留为已暂停图标。

如何更改由于以下代码而暂停播放的所有元素的图标：

dat <- data.frame(
  C1 = c("A", "B", "C"),
  C2 = c(4, "5%", "-6%")
)
dat$C2numeric <- stringr::str_extract(dat$C2, "\\-*\\d+\\.*\\d*")

datatable(dat, options = list(
  columnDefs = list(
    list(targets=-1, visible=FALSE)
  )
)) %>%
  formatStyle(2, valueColumns = ncol(dat), 
              backgroundColor = styleInterval(c(-0.000001,0.000001), c("red",'lightgrey','lightgreen')))

下面的完整代码段（此演示中的图像更改为彩色框）：

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);

function play(el, id) {
  var audio = document.getElementById(id);
  if (audio.paused) {
    audio.play();
    $(el).addClass("fa-pause-circle").removeClass("fa-play-circle");

  } else {
    audio.pause();
    $(el).removeClass("fa-pause-circle").addClass("fa-play-circle");
  }
}

function reset(id) {
  $(id).addClass("fa-play-circle").removeClass("fa-pause-circle");
}

document.addEventListener('play', function(e) {
  var audios = document.getElementsByTagName('audio');
  for (var i = 0, len = audios.length; i < len; i++) {
    if (audios[i] != e.target) {
      audios[i].pause();
    }
  }
}, true);

#credits-content {
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 15px;
  height: 750px;
  width: 80%;
  margin: 0 10% 50px 10%;
}

#images-services {
  grid-row: span 1;
  grid-column: span 1;
}

.image-item {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #f1f1f1;
}

#coward-image:hover,
#dad-image:hover,
#fresh-image:hover,
#wrestling-image:hover,
#cinescope-image:hover,
#happy-image:hover {
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.7);
  cursor: pointer;
}

#coward-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#coward-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#coward-image:hover #coward-play {
  opacity: 1;
}

#dad-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#dad-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#dad-image:hover #dad-play {
  opacity: 1;
}

#fresh-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#fresh-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#fresh-image:hover #fresh-play {
  opacity: 1;
}

#wrestling-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#wrestling-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#wrestling-image:hover #wrestling-play {
  opacity: 1;
}

#cinescope-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#cinescope-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#cinescope-image:hover #cinescope-play {
  opacity: 1;
}

#happy-image {
  background-color: steelblue;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: inset 0 0 0 2000px rgba(0, 0, 0, 0.0);
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#happy-play {
  opacity: 0;
  -moz-transition: all .2s ease-in;
  -o-transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
}

#happy-image:hover #happy-play {
  opacity: 1;
}