需要触发带有音频文件开始的文本滚动

Question

目前，我有不同的音频文件显示使用表在html5和css。在每个带有音频文件的单元格中，有艺术家信息等的文本。我想要发生的是，只有当特定的音频文件播放时，才会在单元格内滚动文本。现在，我可以使用标题栏功能制作文本滚动，但我不知道如何使它只在只播放该音频文件时滚动。

Answer 1

注意：marquee被否决了.

但是要解决这个特定的问题，如果要在受支持的浏览器中执行它

见片段

​

marq = document.getElementById("marq");;
marq.style.opacity = "0";
aud = document.getElementById("aud");;
aud.onplay = function() {
  marq.style.display = "auto";
  marq.start();
  marq.style.opacity = "1";
}
aud.onpause = function() {
  marq.stop();
}

<td>
  <center>
    <img src="images/artists/Becca.png" width="110" heigth="110">
    <marquee id="marq" behavior="" direction="left">Becca - Trap (J Paul Mix)</marquee>
    <audio controls id="aud">
      <source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
        <p>Your browser doesn't support HTML5 audio. Here is a<a href="mp3s/TrapJPaulMix.m4a">link to the audio</a>instead.</p>
    </audio>
  </center>
</td>

​

​

尽管如此，我还是建议您使用marquee动画来模仿标记。

​

见下面的片段

​

var title = document.getElementById("title");

aud = document.getElementById("aud");;
aud.onplay = function() {
  title.classList.remove('stop');
  title.classList.add('running');
}
aud.onpause = function() {
  title.classList.remove('running');
  title.classList.add('stop');
}

@-webkit-keyframes anime {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}
@-moz-keyframes anime {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}
@-o-keyframes anime {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}
@keyframes anime {
  0% {
    right: 0%;
  }
  100% {
    right: -100%;
  }
}
#marq {
  border: solid black 1px;
  ;
  overflow: hidden;
  text-align: left;
}
#title {
  position: relative;
  animation-name: anime;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  display: inline-block;
  right: 0%;
  opacity: 0;
  color: green;
}
.stop {
  animation-play-state: paused;
  opacity: 1 !important;
}
.running {
  animation-play-state: running;
  opacity: 1 !important;
}

<td>
  <center>
    <img src="images/artists/Becca.png" width="110" heigth="110">
    <div id="marq">
      <div id="title">
        Song 1
      </div>
    </div>
    <audio controls id="aud">
      <source src="http://mp3-pesni.org/music/3dc9ed0908d29016e2d41e8abb0a31fd.mp3" type="audio/mp3">
        <p>Your browser doesn't support HTML5 audio. Here is a<a href="mp3s/TrapJPaulMix.m4a">link to the audio</a>instead.</p>
    </audio>
  </center>
</td>

​